Question

我在选项卡（jQuery UI选项卡）中使用html5视频（html5media.com）。当视频在旧的IE浏览器中播放时，它会回退到Flowplayer（swf播放器）。

我的问题是每当我选择不同的标签时，视频会在失焦时继续播放。

感谢有人在这里帮助我，在使用以下语法时，我能够在除IE 8及更旧版本之外的所有浏览器中暂停播放视频：

JS：

$('#tabs').tabs({
    select: function(event, ui) {
        if (ui.tab.id != 'videos') {
        $("#myvid")[0].pause();
        }
    }
});

另外，这是我的HTML：

<div id="videos"> 
<div id="VideoContainer"> 
<video id="myvid" poster="img/poster-showreel.jpg" width="470" height="265" fullscreen="true" controls preload> 
<source src="showreel.mp4"></source> 
<source src="showreel.webm"></source> 
</video> 
</div> 
</div>

问题是，现在IE开回错误（'对象不支持此属性......'），因为它使用基于闪存的播放器。

当不再选择或关注标签时，如何停止播放视频（在所有浏览器中）？

-
如果您是想要删除此帖子的版主，请说明原因。我认为这是一个合法的问题，我没有找到包含所有浏览器解决方案的直接答案。

Answer 1

你将不得不使用javascript停止Flash播放器。 Flowplayer自带api，一旦在您的网站上启用，您就可以直接通过javascript修改Flash视频。转到here，下载文件并将其包含在标题中。完成后，您可以在javascript中添加一行来停止流程图：

$('#tabs').tabs({
    select: function(event, ui) {
        if (ui.tab.id != 'videos') {
        $("#myvid")[0].pause();
        // get a handle to the flowplayer and stop it
        $f().stop();
        }
    }
});

Answer 2

如果您同时拨打电话，可能仍然会收到错误...添加swf检查。

$('#tabs').tabs({
        select: function(event, ui) {
            if (ui.tab.id != 'videos') {
              if ( $("'"+ui.tab.id+" object'").length >= 1 ){ 
                // get a handle to the flowplayer and stop it
                $f().stop();
              } else {
                $("#myvid")[0].pause();
              }
            }
        }
    });

当标签失焦时，停止播放html5视频和swf播放器

2 个答案: