大佬教程收集整理的这篇文章主要介绍了如何检查用户在html5视频播放器中观看完整视频,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<video width="480" height="400" controls="true" poster=""> <source type="video/mp4" src="video.mp4"></source> </video>
现在要检查用户是否播放了完整视频,需要进行广泛的分析,检查他是否每次都播放.然而,这不是必需的,用户应该足够了:
>播放视频很长的秒数
>播放到视频结束
这个片段正是如此.如果您只是跳到最后,视频将不会被标记为完全播放.一遍又一遍地开始也不会标记它完全播放:
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>
也就是jsfiddle:https://jsfiddle.net/p56a1r45/2/
然后,您可以将其连接到Google Analytics,以查看有多少视频用户播放.来自google analytics website的简单代码:
ga('send','event','Videos','play','Video name');
以上是大佬教程为你收集整理的如何检查用户在html5视频播放器中观看完整视频全部内容,希望文章能够帮你解决如何检查用户在html5视频播放器中观看完整视频所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。