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

问题描述

有谁知道如何检查视频是否被完全监听？
我使用的是html5视频播放器：

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:

• 播放视频很长的秒数


• 播放到视频结尾

此片段演示了这一点。如果您跳到最后，视频将不会被标记为完全播放。一遍又一遍地开始也不会标记它完全播放：

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

另外om jsFiddle： https://jsfiddle.net/p56a1r45/2/

你可以然后将其连接到谷歌分析，以查看有多少视频用户播放。来自 Google Analytics（分析）网站的简单代码：

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屋！