如何检查用户在html5视频播放器中观看了完整的视频
How to check a user watched the full video in html5 video player
有人知道我如何检查视频是否被完整观看吗?我正在使用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 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>
同样在jsFiddle上:https://jsfiddle.net/p56a1r45/2/
然后你可以将其连接到谷歌分析,看看有多少视频用户播放了。来自谷歌分析网站的简单代码:
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
});
这里有一个全面的解决方案:
- 用户无法向前搜索尚未观看的部分(这也确保了观看的正确顺序,即不向前跳然后向后跳)
- 然后可以简单地检测视频的结尾
- 此外:当窗口(或选项卡)失去焦点时,视频会暂停,以使用户更有可能全程观看视频
- 此外:它可以很容易地为任何数量的观看/视频重置
(下面的搜索禁用功能来自于如何使用HTML5视频标签禁用搜索?)
假设您在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()
。
var vid = document.getElementById("myVid");
vid.onended = function() {alert("The video has ended");};
您可以使用:
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,
};
}
相关文章:
- 如何检查用户在html5视频播放器中观看了完整的视频
- 音乐播放器使用相同的id播放所有内容
- 在FF和IE中使用vimeo播放器的问题-加载flash播放器而不是使用HTML5播放器
- 使用HTML5播放器时使用Javascript更改Youtube视频
- 可以't根据设备自动调整youtube播放器的大小
- html5视频播放器和视频js之间的关系
- 有没有办法在dailymotion播放器的新测试版中播放youtube视频
- 我可以共享一个HTML播放器吗
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- 我们如何在dailymotion播放器的新测试版中播放youtube视频
- 角度媒体播放器和动态内容
- Javascript::通过HTML5音频播放器播放列表播放多个音频文件
- HTML5、CSS3和/或JS中旋转CD上的音频播放器
- 用于播放背景音乐的嵌入式flash播放器在IE浏览器中不起作用
- 在选择更改时更改从外部javascript生成的flash播放器
- 视频播放器错误promise DOMException中未捕获
- html视频播放器并不总是从src读取
- 加载Soundcloud嵌入式播放器OnClick在FireFox中不工作
- 对Soundcloud自定义播放器播放列表的顺序进行排序
- HTML 5视频播放器用给定的数字更新currentTime