video视频开发(播放前,播放中,播放结束记录播放记录)
第一方式:视频播放

//视频点击控件播放触发 playVideo.on('play',function(){ $('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut(); endedAjax(1,''); }) //视频结束时候触发接口 playVideo.on('ended',function(){ $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn(); time_historical_time=''; endedAjax(0,'') }); //视频暂停时候触发接口保存播放历史 playVideo.on('pause',function(){ $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn(); var time=formatSeconds(playVideo[0].currentTime); time_historical_time=''; if(playVideo[0].currentTime != playVideo[0].duration){ endedAjax(0,time) } }); //当目前的播放位置更改时候,进行浏览器关闭刷新保存播放历史 //数据一直跳跃, //360刷新关闭浏览器正常 //谷歌刷新关闭浏览器正常触发 //IE刷新关闭浏览器正常触发 //火狐刷新浏览器正常触发,关闭不触发 playVideo.on('timeupdate',function(){ time_historical_time=playVideo[0].currentTime; console.log(time_historical_time) window.onbeforeunload=function(event){ if(time_historical_time != 0){ if(!!window.ActiveXObject || "ActiveXObject" in window){ var n = window.event.screenX - window.screenLeft; var b = n > document.documentElement.scrollWidth-20; if(b || window.event.clientY < 0 || window.event.altKey){ endedAjax(0,formatSeconds(time_historical_time)); }else{ endedAjax(0,formatSeconds(time_historical_time)); } }else if(navigator.userAgent.indexOf("Firefox")>-1){ endedAjax(0,formatSeconds(time_historical_time)); }else{ endedAjax(0,formatSeconds(time_historical_time)); } } } window.onunload = function(){ if(time_historical_time != 0){ if(navigator.userAgent.indexOf("Firefox")>-1){ if(document.documentElement.scrollWidth==0) { endedAjax(0,formatSeconds(time_historical_time)); }else{ endedAjax(0,formatSeconds(time_historical_time)); } } } } }); //当用户拖动横条时触发 playVideo.on('seeked',function(){ $('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut(); }); playVideo.on('seeking',function(){ $('.playTip').fadeOut(); }); function playControl(){ if(playVideo[0].paused){ playVideo[0].play(); endedAjax(1,'') $('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut(); }else{ playVideo[0].pause(); $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn(); } }
本地文件来自:http://svn.chenhua.cc/project/chuangke/index.html
线上效果为:http://www.wxeepp.com/index.php/Home/Education/detail?id=130(创业路发布项目)
浙公网安备 33010602011771号