javascript - 事件监听器不检测视频的结束

Question

我有一个 html 5 播放器，我正在尝试检测视频何时结束。我尝试使用 JQUERY 和 javascript 检测它，但到目前为止没有成功。

<video id="myVideo"></video>

$("#myVideo").bind("ended", function () {
    alert('Video ended!');
});

var vid = document.getElementById("myVideo");
vid.src = "Content/Test.mp4";
vid.play();

vid.addEventListener('ended', videoFinish, false);

function videoFinish() {
    alert('Video ended!');
}   

Answer 1

它在 JavaScript 部分运行良好，但如果您更喜欢使用 jQuery，则应该取消引用您打算与 JavaScript API 一起用于视频方法和属性的任何 jQuery 对象。详细信息在代码段中进行了注释。

顺便说一句，.bind() jQuery method is deprecated, the .on() method is it's replacement.

片段

/*~~~~~~~~~~~~~~~~~ 
|| Plain JavaScript 
*/
// Creating <video>
var vid1 = document.createElement("video");

/* Assigning:
|| #id
|| src
|| controls
*/
vid1.id = 'vid1';
vid1.src = 'http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4';
vid1.controls = true;

// Add node to DOM
document.body.appendChild(vid1);

// Register #vid1 to ended event to call videoFinish()
vid1.addEventListener('ended', videoFinish, false);

/*~~~~~~~
|| jQuery
*/
// Append this jQuery object to the DOM
$('<video id="vid2" src="http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4" controls></video>').appendTo('body');

/* Dereference a jQuery object in order to use a 
|| method from a JavaScript API like HTML5 Video by
|| using bracket notation.
*/
var vid2 = $('#vid2')[0];

/* Now vid2 is a plain JavaScript object like vid1
|| Now it can easily use video methods and properties
*/
vid2.addEventListener('ended', videoFinish, false);

function videoFinish(e) {
  alert(e.target.id + ' has ended!');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>