HTML5 视频播放器 - video.js - 在 Chromium 和 Mozilla Firefox 上视频播放结束时的不同行为

Question

我正在使用 video.js，

我正在两个不同的浏览器中渲染视频。

Chromium：版本 31.0.1650.63 Ubuntu 13.04 和

Mozilla 火狐：26.0

我已经给出了自动播放视频的选项

HTML 标记和 Jq 代码如下。

<script type="text/javascript">
  $("video").on("ended", function(){ 
      var vid = videojs($(this).attr("name"));
      vid.controlBar.hide();
      vid.bigPlayButton.show();
    });     
  $("video").on("pause", function()
    { 
       var vid = videojs($(this).attr("name"));
       vid.bigPlayButton.show(); 
    });  
  $("video").on("play", function(){  
       var vid = videojs($(this).attr("name"));
       vid.controlBar.show();
       vid.bigPlayButton.hide();
    });
 </script>

视频播放结束时 - Firefox 浏览器显示一些微调器，而 chromium 显示矩形框以单击以重新播放视频。

请说明为什么行为之间存在差异？ 我们如何克服这个问题？

Answer 1

您可以通过执行以下操作来尝试使用 videojs 事件：

var activePlayers = videojs.players;
$.each( activePlayers, function(key,value) { 
    value.on('ended', function() {
        this.controlBar.hide();
        this.bigPlayButton.show();
        this.loadingSpinner.hide();
    });
});

这相当快，主要是使用 $.each 与 for( x in obj) 以及如果 jquery 将 value 包装在 jquery 对象中，可能会进行一些调整。

顺便说一句：我知道在循环中使用匿名函数是不受欢迎的，但这是给你的想法。