Controlling quicktime movie from javascript does not work in IE

对着背影说爱祢 提交于 2020-01-23 18:17:45

问题


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.


回答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.



来源:https://stackoverflow.com/questions/7836822/controlling-quicktime-movie-from-javascript-does-not-work-in-ie

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!