javascript - 使用 addevent 时 VideoJs 自动播放不会触发

Question

我按照 videojs 的快速入门指南进行操作并将以下代码放入我的 html 文档正文中:

<video id="video" class="video-js vjs-default-skin" controls width="941" 
      height="531" autoplay preload="auto" data-setup="{}">
  <source type="video/mp4" src="dummy_url">
</video>

一切正常。自动播放和控制就位。

由于我需要在视频结束时删除视频，因此我将以下代码放在视频标签后面:

<script type="text/javascript">
    _V_("video").addEvent("ended", videoEnd);

    function videoEnd(){
        $('#divId').slideToggle("slow");
        setTimeout("$('#divId').remove()", 700);
    }
</script>

问题是，每次我尝试检测某些视频时，自动播放都不再起作用。即使以下内容也不会触发自动播放:

<script type="text/javascript">
    _V_("video").ready(function(){

        var myPlayer = this;

        // EXAMPLE: Start playing the video.
        myPlayer.play();

    });

    _V_("video").addEvent("ended", videoEnd);

    function videoEnd(){
        $('#divId').slideToggle("slow");
        setTimeout("$('#divId').remove()", 700);
    }
</script>

知道如何保持自动播放并收听结束的事件吗？

Answer 1

嗯，我不确定这是否是最正确的实现，但是:

<video id="video" class="video-js vjs-default-skin" controls 
     width="941" height="531" autoplay preload="auto" data-setup="{}">
     <source type="video/mp4" src="dummy_url">
</video>

<script type="text/javascript">
    interval = setInterval(videoLoaded, 100);

    function videoEnd(){
            $('#someid').slideToggle("slow");
            setTimeout("$('#someid').remove()", 700);
        }

    function videoLoaded(){
        if(!_V_.players.video){
            return false;
        }

        _V_.players.video.play();
        _V_.players.video.addEvent("ended", videoEnd);
        clearInterval(interval);
    }

</script>

据我所知，替代方法是仅通过js加载视频。

这是 videojs 初始化视频对象的方式的问题(根据我的阅读)。更多详情可查看here .

希望它能帮助一些保险杠:)