如何检查用户在 html5 视频播放器中观看了完整视频 [英] How to check a user watched the full video in html5 video player

问题描述

有谁知道我如何检查视频是否已被完全观看?我正在使用 html5 视频播放器:

解决方案

基本检查很简单，等待ended事件.这很简单，你可以谷歌一下.

现在要检查用户是否播放了完整视频，需要进行广泛的分析，检查他是否播放了每一秒.但是，这不是必需的，用户应该足够了:

• 播放的秒数与视频的长度一样
• 播放到视频结束

这段代码正是证明了这一点.如果您只是跳到最后，视频将不会被标记为已播放完毕.一遍又一遍地播放开头也不会将其标记为完全播放:

var video = document.getElementById("video");var timeStarted = -1;var timePlayed = 0;无功持续时间 = 0;//如果视频元数据已加载，则获取持续时间如果(video.readyState > 0)getDuration.call(视频);//如果元数据没有加载，使用事件来获取它别的{video.addEventListener('loadedmetadata', getDuration);}//记住用户开始视频的时间函数 videoStartedPlaying() {timeStarted = new Date().getTime()/1000;}功能 videoStoppedPlaying(事件){//开始时间小于零表示停止事件被触发 vidout start 事件如果(时间开始> 0){var playFor = new Date().getTime()/1000 - timeStarted;时间开始 = -1;//添加新的播放秒数timePlayed+=playedFor;}document.getElementById("played").innerHTML = Math.round(timePlayed)+"";//仅当到达视频结尾时才算完成if(timePlayed>=duration && event.type=="ended") {document.getElementById("status").className="complete";}}函数 getDuration() {持续时间 = video.duration;document.getElementById("duration").appendChild(new Text(Math.round(duration)+""));console.log("持续时间:", 持续时间);}video.addEventListener("播放", videoStartedPlaying);video.addEventListener("播放", videoStartedPlaying);video.addEventListener("已结束", videoStoppedPlaying);video.addEventListener("pause", videoStoppedPlaying);

#status span.status {显示:无；字体粗细:粗体；}span.status.complete {颜色:绿色；}span.status.incomplete {红色;}#status.complete span.status.complete {显示:内联；}#status.incomplete span.status.incomplete {显示:内联；}

<div><span id="played">0</span>秒出<span id="持续时间"></span>秒.(仅在视频暂停时更新)

同样在 jsFiddle:https://jsfiddle.net/p56a1r45/2/

然后您可以将其连接到谷歌分析，以查看有多少用户播放了视频.来自 谷歌分析网站的简单代码:

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

Does anyone knows how I can check if a video was completely watched or not? I am using html5 video players:

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

解决方案

Basic check is simple, wait for the ended event. This is so simple you can just google it.

Now to check that user played full video an extensive analysis would be needed checking if he played every second of it. That's not necessary however, it should be enough that user:

• played as many seconds as the video is long
• played to the end of the video

This snippet demonstrates exactly that. The video will not be marked as fully played if you just skip to the end. Playing the beginning over and over will also not mark it fully played:

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>

Also on jsFiddle: https://jsfiddle.net/p56a1r45/2/

You can then connect this to google analytics to see how many of the video users played. Simple code from google analytics website:

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

这篇关于如何检查用户在 html5 视频播放器中观看了完整视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！