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 here

<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公开了这些事件：已结束，错误，已加载数据，已加载元数据，timeupdate，useractive，userinactive和volumechange。

但是还有其他人支持标准的html5视频标签，如播放，暂停等。

快乐代码： - ）

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

1 个答案: