如何检查用户在 html5 视频播放器中观看了完整视频

2024-06-24

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

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

基本检查很简单,等待ended事件。这个很简单,google一下就可以了。

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

  • 视频长度与播放秒数相同
  • 播放至视频结尾

这个片段恰恰证明了这一点。如果您跳到最后,视频将不会被标记为已完全播放。一遍又一遍地播放开头也不会标志着它已完全播放:

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/ https://jsfiddle.net/p56a1r45/2/

然后,您可以将其连接到谷歌分析,以查看有多少视频用户播放过。简单的代码来自谷歌分析网站 https://developers.google.com/analytics/devguides/collection/analyticsjs/events#examples:

ga('send', 'event', 'Videos', 'play', 'Video name');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何检查用户在 html5 视频播放器中观看了完整视频 的相关文章

随机推荐