Question

I’ve got a problem controlling a quicktime movie from javascript. I am embedding a video in my HTML page using <video> HTML5 element – with fallback to quicktime if the browser doesn’t support it (e.g. IE 8) (I have a specific requirement of “no flash”, but quicktime is allowed). The video is displayed in a popup; when the popup is being closed, I want to stop video playback. I can do this successfully in HTML5, but the quicktime control is not working.

My html looks like this:

<video width="360" height="298" autobuffer="autobuffer" controls="controls" id="video" tabindex="0">
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="/data/mmg-demo.mp4"></source>
    <source type="video/ogg" src="/data/mmg-demo.ogv"></source>
    <object width="360" height="298" id="videoem" codebase="http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b">
        <param value="/data/mmg-demo.mp4" name="src">
        <param value="false" name="autoplay">
        <param value="true" name="controller">
        <embed width="360" height="298" name="videoem" pluginspage="http://www.apple.com/quicktime/download/" loop="false" controller="true" autoplay="false" src="../files/380/380523/video.mp4">
    </object>
</video>

The pop-up close javascript function looks like this:

function closePopup {
    //stop html5 playback if it's there
    if(typeof document.getElementById('video').pause == 'function') {
        document.getElementById('video').pause();
    }
    //stop playback of quicktime embed if it's there
    if(document.getElementById('videoem')) {
        document.getElementById('videoem').SetRate(0.0);
    }
    $('#demo-video').fadeOut();
}

I’ve tested this exact same quicktime code in firefox – and it works fine. Moreover, examples in other forums that claim to work, do not work in IE 8 (e.g. see http://lists.apple.com/archives/quicktime-api/2008/Mar/msg00187.html – does not work in IE 8).

Line document.getElementById('videoem').SetRate(0.0) causes Object does not support this property or method error.

I’m not sure where else to look. Any help is greatly appreciated.

Answer 1

Ok, I think I figured it out. The trick is to use the ID from the <embed> element and not the <object> element. So the final (working) code I got is this.

HTML:

<div id="mkt-video" style="position:fixed;width:360px;background-color:black;padding:10px;border:solid 2px white;display:none;z-index:100003">
    <video id="video" width="360" height="298" controls="controls" autobuffer="autobuffer">
        <source src="/data/mmg-demo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="/data/mmg-demo.ogv" type="video/ogg" />
        <object classid='clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b' width="360" height="298" codebase='http://www.apple.com/qtactivex/qtplugin.cab' id="videoem-object">
            <param name='src' value="/data/mmg-demo.mp4" />
            <param name='autoplay' value="false" />
            <param name='controller' value="true" />
            <param name="enablejavascript" value="true" />
            <embed src="../files/380/380523/video.mp4" width="360" height="298" autoplay="false" controller="true" loop="false" pluginspage='http://www.apple.com/quicktime/download/' name="videoem" id="videoem"></embed>
        </object>
    </video>
</div>

And Javascript:

function closeVideo() {
    if(typeof document.getElementById('video').pause == 'function') {
        document.getElementById('video').pause();
    }
    try {
        document.getElementById('videoem-object').SetRate(0.0);
    }
    catch (err) {}
    $('#mkt-video').fadeOut();
}

The “try-catch” is required, because IE9 still creates the embed object but of some strange type and throws errors of some strange content. Anyway, it works fine now.