Cách kiểm tra người dùng xem toàn bộ video trong trình phát video html5

Question

Có ai biết cách tôi có thể kiểm tra xem video có được xem hoàn toàn hay không? Tôi đang sử dụng html5 chơi video:

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

Answer 1

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

Answer 2

Thêm một id thuộc tính:

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

Bạn có thể đính kèm các sự kiện ended để video của bạn:

Với javascript đơn giản:

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

Với jQuery:

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

Answer 3

kiểm tra cơ bản là đơn giản, chờ cho sự kiện ended. Điều này rất đơn giản, bạn chỉ có thể google nó.

Bây giờ, hãy kiểm tra xem người dùng đó đã phát video đầy đủ có cần phân tích sâu rộng không nếu bạn chơi từng giây một. Đó không phải là cần thiết tuy nhiên, nó phải là đủ dùng rằng:

• chơi như nhiều giây như video dài
• chơi đến cuối của video

đoạn này thể hiện chính xác điều đó. Video sẽ không được đánh dấu là đã phát hoàn toàn nếu bạn chỉ cần bỏ qua đến cuối video. Chơi đầu hơn và hơn cũng sẽ không đánh dấu nó chơi đầy đủ:

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 ammount 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>

Cũng om jsFiddle: https://jsfiddle.net/p56a1r45/2/

Sau đó, bạn có thể kết nối này để Google Analytics để xem có bao nhiêu người sử dụng video chơi . mã đơn giản từ google analytics website:

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