有谁知道如何检查视频是否被完全观看?我正在使用html5视频播放器:
<video width="480" height="400" controls="true" poster="">
<source type="video/mp4" src="video.mp4"></source>
</video>
基本检查很简单,等待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 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>
然后,您可以将其连接到Google Analytics,以查看有多少视频用户播放。来自google analytics website的简单代码:
ga('send', 'event', 'Videos', 'play', 'Video name');
添加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
});
var vid = document.getElementById("myVid");
vid.onended = function() {alert("The video has ended");};