视频播放结束后添加事件答案

【问题标题】：Add Event after video play is ended视频播放结束后添加事件
【发布时间】：2020-10-09 19:11:06
【问题描述】：

在 Laravel 项目中，我有视频 vjs 播放器，如下代码所示：

<video
   id="my-video"
   class="video-js "
   controls 
   preload="auto"
   width="100%"
   height="auto"
   poster={{asset('images/'.$course->id.'.png')}}
   data-setup='{"fluid": true}'
   >
   <source src="{{asset('promos/'.$course->id.'.mp4')}}" />
   <source src="{{asset('promos/'.$course->id.'.mp4')}}" />
</video>

我想在视频播放结束后执行操作（将数据添加到服务器），我这样做了但不起作用：

<script>
    var vid = document.getElementById("my-video");
    vid.onended = function() {
    alert("The video has ended");
};
</script>

我该如何解决这个问题？

【问题讨论】：

脚本在页面下方
我使用了 addEventListener : vid.addEventListener('ended', (event) => { action}; ，但还是不行
我正在使用这个：videojs.com

标签： javascript video html5-video media-player video.js

【解决方案1】：

我希望其中一个有用

var options = {};
var player = videojs('my-video', options, function onPlayerReady() {
    this.on('ended', function() {
        //do something here...
    });
});

欧

var player = document.getElementById("my-video");
player.addEventListener("ended", function() {
  //do something here...
});

【讨论】：

html视频插件javascript，可以通过npm安装
是我必须安装它还是使用cdn链接足够
第一个代码使视频不开始播放，第二个代码不工作
是的，你可以使用 CDN 链接，不要犹豫，阅读一些关于如何将它集成到你的项目中的文档，它是如此简单
我知道这是为了活动结束，这就是你想要的？

【解决方案2】：

由于 Jsplayer 无法正常工作，我使用了 html5 视频播放器，它很好：-

<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
    <source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
    <source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
</video>

【讨论】：