Question

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

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

Answer 1

基本检查很简单，等待ended事件。这很简单，你可以谷歌吧。

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

播放视频很长的秒数
播放到视频结尾

这段代码正是如此。如果您跳到最后，视频将不会被标记为完全播放。一遍又一遍地开始也不会标记它完全播放：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13; 另外，jsFiddle：https://jsfiddle.net/p56a1r45/2/

然后，您可以将其连接到Google Analytics，以查看有多少视频用户播放。来自google analytics website的简单代码：

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

Answer 2

添加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
});

Answer 3

这是一个全面的解决方案：

用户无法向前搜索尚未观看的部分（这也确保了正确的观看顺序，即，不会向前跳然后向后跳）
然后可以简单地检测到视频结尾
还：当窗口（或标签）失去焦点时，视频会暂停，以使用户更有可能在整个过程中实际观看视频
还：可以轻松地将其重置为任意数量的观看次数/视频

（下面的搜索禁用功能来自How to disable seeking with HTML5 video tag ?）

假设您在HTML中有一个ID为"vid_id"的视频元素，例如：

<video id="vid_id" controls>
    <source src="whatever.mp4" type="video/mp4">
</video>

您可以使用以下功能：

function vid_listen() {
    var video = document.getElementById('vid_id');
    video.addEventListener('timeupdate', function() {
        if (!video.seeking) {
            if (video.currentTime > timeTracking.watchedTime) {
                timeTracking.watchedTime = video.currentTime;
                lastUpdated = 'watchedTime';
            } else {
                //tracking time updated  after user rewinds
                timeTracking.currentTime = video.currentTime;
                lastUpdated = 'currentTime';
            }
        }
        if (!document.hasFocus()) {
            video.pause();
        }
    });
    // prevent user from seeking
    video.addEventListener('seeking', function() {
        var delta = video.currentTime - timeTracking.watchedTime;
        if (delta > 0) {
            video.pause();
            //play back from where the user started seeking after rewind or without rewind
            video.currentTime = timeTracking[lastUpdated];
            video.play();
        }
    });
    video.addEventListener("ended", function() {
        // here the end is detected
        console.log("The video has ended");
    });
}
function vid_start() {
    window.timeTracking = {
        watchedTime: 0,
        currentTime: 0
    };
    window.lastUpdated = 'currentTime';
}

在加载文档后的任何时间执行vid_listen()。在视频开始之前的任何时间（或需要进行新的类似检查时）执行vid_start()。

Answer 4

您可以使用：

function getPlayedTime(video) {
    let totalPlayed = 0;
    const played = video.played;

    for (let i = 0; i < played.length; i++) {
        totalPlayed += played.end(i) - played.start(i);
    }

    return {
        total: totalPlayed,
        percent: totalPlayed / video.duration * 100,
    };
}

Answer 5

@BindingAdapter("bind:selection")
public static void bindSelection(Spinner spinner, int position) {
    spinner.setSelection(position);
}

Answer 6

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>

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

6 个答案: