Wie man einen Benutzer beobachtet das volle Video in html5 Video-Player

Question

Wer weiß, wie kann ich prüfen, ob ein Video vollständig oder nicht beobachtet? Ich bin mit html5 Video-Player:

<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

ein id Attribut hinzu:

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

Sie können das Ereignis ended zu Ihrem Video anhängen:

Mit Ebene javascript:

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

Mit jQuery:

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

Answer 3

Grundprüfung ist einfach, warten Sie auf den ended Ereignis. Das ist so einfach, dass Sie es einfach googeln können.

Jetzt zu überprüfen, dass Benutzer volle Video spielte eine umfangreiche Analyse würde überprüft werden, ob er jede Sekunde davon gespielt. Das ist jedoch nicht notwendig, sollte es genug, dass der Benutzer sein:

• spielte so viele Sekunden, wie das Video lang
• bis zum Ende des Videos gespielt

Dieser Code-Schnipsel zeigt genau das. Das Video wird nicht als vollständig abgespielt markiert, wenn Sie einfach zum Ende springen. Spielen den Anfang immer und immer markiert zudem nicht vollständig gespielt:

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>

Auch om jsFiddle: https://jsfiddle.net/p56a1r45/2/

Anschließend können Sie verbinden diese Google Analytics, um zu sehen, wie viele der Video-Nutzer gespielt . Einfacher Code aus google analytics website:

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