如何在移动设备上使用 videojs 播放器触发结束事件

Question

视频在 videojs html5 播放器中播放完毕后，我试图在 Android 设备上显示警报。我在视频标签末尾下方使用了 javascript，但我不知道为什么它没有显示警报。

视频播放器的 HTML

<video id="my-video" class="video-js" autoplay preload="auto" width="640" height="360" data-setup="{}">

        <!--poster="MY_VIDEO_POSTER.jpg"-->
          <!--Gets where video is locally stored and plays it-->
            <source ng-src="{{getFilePath()}}" type='video/mp4'>
            <!--<source src="MY_VIDEO.webm" type='video/webm'>-->
          <!--If there is no javascript for some reason-->
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>

</video>

这里是Javascript

<script type="text/javascript">
  var myPlayer = videojs("my-video");
     videojs("my-video").ready(function () {
        myPlayer.on("ended", function () {
         alert('The video has ended');
     });
});
</script>   

如果有人能告诉我为什么这不起作用以及如何解决它，我将很高兴。如果有人知道如何在不禁用所有控件的情况下禁用滚动条，那也可以作为旁注。

谢谢

Answer 1

试试这个：

<script type="text/javascript">
    var myPlayer =  videojs("my-video",{},function(){
      // the third parameter is the ready event on the constructor
      this.on("ended",function(){alert('The video has ended');});
    });
</script>

或者这个：

<script type="text/javascript">
    var myPlayer =  videojs("my-video");
    // myPlayer object is defined, so It is ready to listen events
    myPlayer.on("ready",function(){
      alert('The player is ready');
    });
    myPlayer.on("ended",function(){
      alert('The video has ended');
    });
</script>

或尝试使用html5：

<script type="text/javascript">
    var myPlayer =  videojs("my-video");
    // We will use getElementsByTagName, because videojs can wrap
    // your video inside a div, and changes its id. Your id will
    // be the videojs div wrapper.
    // Get the first video element found and append the listener
    var html5_video = document.getElementsByTagName("video")[0];
    html5_video.addEventListener('ended', function(e) {
      alert('The video has ended');
    });
</script>

videojs api 公开了这些事件：ended、error、loadeddata、loadedmetadata、timeupdate、useractive、userinactive 和 volumechange。

但标准 html5 视频标签还支持其他功能，例如播放、暂停等。

快乐的代码:-)