如何檢查用戶在 html5 視頻播放器中觀看了完整視頻

Question

有誰知道我如何檢查視頻是否已被完全觀看？ 我正在使用 html5 視頻播放器：

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

Answer 1

基本檢查很簡單，等待ended事件。 這很簡單，你可以谷歌一下。

現在要檢查用戶是否播放了完整視頻，需要進行廣泛的分析，以檢查他是否播放了每一秒。 但是，這不是必需的，用戶應該足夠了：

• 播放的秒數與視頻的長度一樣長
• 播放到視頻結束

這個片段恰恰證明了這一點。 如果您只是跳到最后，視頻將不會被標記為已播放完畢。 一遍又一遍地播放開頭也不會將其標記為完全播放：

 var video = document.getElementById("video"); var timeStarted = -1; var timePlayed = 0; var duration = 0; // If video metadata is laoded get duration if(video.readyState > 0) getDuration.call(video); //If metadata not loaded, use event to get it else { video.addEventListener('loadedmetadata', getDuration); } // remember time user started the video function videoStartedPlaying() { timeStarted = new Date().getTime()/1000; } function videoStoppedPlaying(event) { // Start time less then zero means stop event was fired vidout start event if(timeStarted>0) { var playedFor = new Date().getTime()/1000 - timeStarted; timeStarted = -1; // add the new number of seconds played timePlayed+=playedFor; } document.getElementById("played").innerHTML = Math.round(timePlayed)+""; // Count as complete only if end of video was reached if(timePlayed>=duration && event.type=="ended") { document.getElementById("status").className="complete"; } } function getDuration() { duration = video.duration; document.getElementById("duration").appendChild(new Text(Math.round(duration)+"")); console.log("Duration: ", duration); } video.addEventListener("play", videoStartedPlaying); video.addEventListener("playing", videoStartedPlaying); video.addEventListener("ended", videoStoppedPlaying); video.addEventListener("pause", videoStoppedPlaying);

 #status span.status { display: none; font-weight: bold; } span.status.complete { color: green; } span.status.incomplete { color: red; } #status.complete span.status.complete { display: inline; } #status.incomplete span.status.incomplete { display: inline; }

 <video width="200" controls="true" poster="" id="video"> <source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4"></source> </video> <div id="status" class="incomplete"> <span>Play status: </span> <span class="status complete">COMPLETE</span> <span class="status incomplete">INCOMPLETE</span> <br /> </div> <div> <span id="played">0</span> seconds out of <span id="duration"></span> seconds. (only updates when the video pauses) </div>

同樣在 jsFiddle： https ://jsfiddle.net/p56a1r45/2/

然后，您可以將其連接到谷歌分析以查看有多少視頻用戶播放。 來自谷歌分析網站的簡單代碼：

 ga('send', 'event', 'Videos', 'play', 'Video name');

Answer 2

添加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
});

Answer 3

這是一個全面的解決方案：

• 用戶不能向前尋找尚未觀看的部分（這也確保了正確的觀看順序，即不向前跳過然后向后跳過）
• 然后可以簡單地檢測視頻結尾
• 另外：當窗口（或選項卡）失去焦點時，視頻會暫停，以便用戶更有可能在整個過程中實際觀看視頻
• 此外：它可以輕松重置為任意數量的觀看/視頻

（下面的搜索禁用功能來自如何禁用 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()隨時執行vid_start() )。

Answer 4

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

Answer 5

您可以使用：

function getPlayedTime(video) {
    let totalPlayed = 0;
    const played = video.played;

    for (let i = 0; i < played.length; i++) {
        totalPlayed += played.end(i) - played.start(i);
    }

    return {
        total: totalPlayed,
        percent: totalPlayed / video.duration * 100,
    };
}

Answer 6

 var video = document.getElementById("video"); var timeStarted = -1; var timePlayed = 0; var duration = 0; // If video metadata is laoded get duration if(video.readyState > 0) getDuration.call(video); //If metadata not loaded, use event to get it else { video.addEventListener('loadedmetadata', getDuration); } // remember time user started the video function videoStartedPlaying() { timeStarted = new Date().getTime()/1000; } function videoStoppedPlaying(event) { // Start time less then zero means stop event was fired vidout start event if(timeStarted>0) { var playedFor = new Date().getTime()/1000 - timeStarted; timeStarted = -1; // add the new number of seconds played timePlayed+=playedFor; } document.getElementById("played").innerHTML = Math.round(timePlayed)+""; // Count as complete only if end of video was reached if(timePlayed>=duration && event.type=="ended") { document.getElementById("status").className="complete"; } } function getDuration() { duration = video.duration; document.getElementById("duration").appendChild(new Text(Math.round(duration)+"")); console.log("Duration: ", duration); } video.addEventListener("play", videoStartedPlaying); video.addEventListener("playing", videoStartedPlaying); video.addEventListener("ended", videoStoppedPlaying); video.addEventListener("pause", videoStoppedPlaying);

 #status span.status { display: none; font-weight: bold; } span.status.complete { color: green; } span.status.incomplete { color: red; } #status.complete span.status.complete { display: inline; } #status.incomplete span.status.incomplete { display: inline; }

 <video width="200" controls="true" poster="" id="video"> <source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4"></source> </video> <div id="status" class="incomplete"> <span>Play status: </span> <span class="status complete">COMPLETE</span> <span class="status incomplete">INCOMPLETE</span> <br /> </div> <div> <span id="played">0</span> seconds out of <span id="duration"></span> seconds. (only updates when the video pauses) </div>