web-dev-qa-db-ja.com

ユーザーがhtml5ビデオプレーヤーで完全なビデオを見たことを確認する方法

ビデオが完全に視聴されたかどうかを確認する方法を知っている人はいますか？私はhtml5ビデオプレーヤーを使用しています：

<video width="480" height="400" controls="true" poster="">
    <source type="video/mp4" src="video.mp4"></source>
</video>
javascripthtmlvideohtml5-video
12
mrana

id属性の追加：

<video id="video" width="480" height="400" controls="true" poster="">
    <source type="video/mp4" src="video.mp4"></source>
</video>

イベントendedを動画に添付できます。

プレーンJavaScriptの場合：

document.getElementById('video').addEventListener('ended', function(e) {
    // Your code goes here
});

JQueryの場合：

$('#video').bind('ended', function() {
   // Your code goes here
});
2
Yosvel Quintero

包括的なソリューションは次のとおりです。

  • ユーザーは、まだ視聴されていないパーツを先に進めることはできません（これにより、適切な視聴シーケンスが保証されます。つまり、前後にスキップすることはありません）。
  • 次に、ビデオの終了を簡単に検出できます
  • また、ウィンドウ（またはタブ）のフォーカスが失われると、ビデオが一時停止し、ユーザーが実際にビデオを見ている可能性が高くなります。
  • また、視聴/ビデオの数に応じて簡単にリセットできます

（以下のシーク無効化機能は HTML5ビデオタグでシークを無効にする方法は？ ）

HTMLにID _"vid_id"_のビデオ要素があると仮定します。例：

_<video id="vid_id" controls>
    <source src="whatever.mp4" type="video/mp4">
</video>
_

次の機能を使用できます。

_function vid_listen() {
    var video = document.getElementById('vid_id');
    video.addEventListener('timeupdate', function() {
        if (!video.seeking) {
            if (video.currentTime > timeTracking.watchedTime) {
                timeTracking.watchedTime = video.currentTime;
                lastUpdated = 'watchedTime';
            } else {
                //tracking time updated  after user rewinds
                timeTracking.currentTime = video.currentTime;
                lastUpdated = 'currentTime';
            }
        }
        if (!document.hasFocus()) {
            video.pause();
        }
    });
    // prevent user from seeking
    video.addEventListener('seeking', function() {
        var delta = video.currentTime - timeTracking.watchedTime;
        if (delta > 0) {
            video.pause();
            //play back from where the user started seeking after rewind or without rewind
            video.currentTime = timeTracking[lastUpdated];
            video.play();
        }
    });
    video.addEventListener("ended", function() {
        // here the end is detected
        console.log("The video has ended");
    });
}
function vid_start() {
    window.timeTracking = {
        watchedTime: 0,
        currentTime: 0
    };
    window.lastUpdated = 'currentTime';
}
_

ドキュメントがロードされた後はいつでもvid_listen()を実行します。ビデオが開始される前（または新しい類似のチェックが必要な場合）はいつでもvid_start()を実行します。

0
gaspar
var vid = document.getElementById("myVid");
vid.onended = function() {alert("The video has ended");};
0
Anand Chandwani