javascript - 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 对象中。

旁白:我知道在循环内使用匿名函数是不受欢迎的，但这只是为了给你一个想法。