回答:
最初のパラメーターとして「終了」を使用してイベントリスナーを追加できます
このような ：
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>if(!e) { e = window.event; }、この回答に最初に含まれていたステートメントは、IEのattachEvent初期バージョンに添付されたイベントハンドラー内から最新のイベントを取得するためのIE固有のコードです。この場合、ハンドラーが添付されているaddEventListener（そして、それらの初期のバージョンのIEはHTML5ビデオを扱う人々には関係がない）ので、それは完全に不要であり、私はそれを削除しました。
これを見ていHTML5ビデオとオーディオについて知っているすべてはあなたの必要性「私は自分のコントロールをロールする」セクションの下でオペラのDevサイトでポストを。
これは適切なセクションです：
<video src="video.ogv">
video not supported
</video>それからあなたは使うことができます：
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>onendedすべてのメディア要素のHTML5標準イベントです。HTML5メディア要素（ビデオ/オーディオ）イベントのドキュメントをご覧ください。
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>イベントタイプHTMLオーディオおよびビデオDOMリファレンス
.on()推奨されてい.bind()ます。また、コードを適切にフォーマットしてください。
ここに完全な例があります。
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>これは、ビデオが終了したときにトリガーされる単純なアプローチです。
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html> 「EventListener」行で、「終了」という単語を「一時停止」または「再生」に置き換えて、これらのイベントもキャプチャします。
ビデオが終了したときended, loadedmetadata, timeupdateにended関数が呼び出される場所を含むすべてのビデオイベントにリスナーを追加できます
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>