阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案
2024-06-10 02:56:06
如果本文对你有用，请爱心点个赞，提高排名，帮助更多的人。谢谢大家！❤
如果解决不了，可以在文末进群交流。
文档地址：https：//player.alicdn.com/aliplayer/index.html
阿里播放器接口丰富，功能强大，并且官方提供了直接生成的代码。你只需要按照个人需求，定制功能即可。用起来非常简单。但是其中也有不少的坑。而且还提供了源码，如果功能不够项目扩展，可以自行修改源码，进行定制。
我在项目中碰到的坑主要有以下几点：
1.项目中的视频是由多段视频剪辑而成，所以需要重新自制进度条。
2.点击进度条的时候，不痛的媒体文件会有不同的效果很影响用户体验诸如：进度条来回调动，寻求时间不成功。
3.全屏情况下，不同的机型，也会有不同的效果。比如安卓和苹果，iphone在全屏情况下是覆盖了DOM元素的，所以是看不到自制的进度条。
注意事项：
1.在开始使用之前，先确定好到底要播放哪种媒体流.m3u8还是MP4。因为不同的文件，效果会不一样。
2.接口中的player.loadByUrl（）方法有时候不起作用。可以尝试先loadByUrl，然后在canplay方法中再通过player.seek（）方法去跳帧时间。
3.canplay方法可能会在多处用到，此时需要一定注意的是，player.on（'canplay'，function（）{}）;这个接口是全局使用的。凡是视频能够开始播放音频/视频时，都会多次触发调用这个接口，所以这个函数里面需要加个标识进行判断，到底要不要执行这个函数里面的一些逻辑代码。
4.iphone手机，由于内核不一样，所以是不需使用（fullscreenService.requestFullScreen）全屏接口的。这时候需要使用视频自有的webkitEnterFullScreen来进行全屏事件。
效果图：
以下，贴上项目中的部分代码，供大家参考，不懂地方可以进入微信技术交流群，如果过期可加我微信：mengyilingjian。
HTML部分：
<div class="pause animated"></div><img src="{$firstScreenURL}" style='max-width: 100%;width:100%' class='poster animated'>
<div class="prism-player" id="player-con"></div><style>.hideFooter{z-index: 0;}.hide{display: none;}.show{display: block;}.showProgress{z-index: 100000 !important;}.video-ad-component{z-index: 0;}.prism-auto-stream-selector{display:none;}.video-ad-close label{margin-left: 2px;color: #fff;vertical-align: top;}
</style><div class="video-controls new-video-controls animated" id="newVideoControl"><button class="video-icon"></button><div class="video-time"><span class="video-time__current">00:00</span></div><div class="live-progress-bar" id="liveProgressBar"><div class="video-seek clearfix" id="videoSeek"><div class="video-seek__container"><div class="video-progress-bar"></div></progress></div></div></div><div class="video-time"><span class="video-time__duration">00:00</span></div><button class="video-full-screen"></button>
</div><div class="video_loading adminid"><progress max="100" value="70"></progress>
</div>JS部分：
注: 实际项目我更改了阿里 aliplayer_components.js，满足了全部需求。以下代码仅供参考。直接copy使用的话，可能会导致部分报错。
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.7.4/aliplayer-min.js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/de/prismplayer/2.7.2/aliplayer-min.js"></script>
<script>
var vList = {$videoUrl1},originalUrl = "{$originalUrl}",advURL = "{$advUrl}",videoTotalTime = {$videoTime}, // 0/1 广告或者直播中zhiboStatus = $('#zhibostatus').val(),curr = 0,preview = false;previewTime = {$previewTime}, //试看时间advMsg = '', //广告提示信息adForceVal = {$ad_force}, //1 开启强制广告 0 未开启强制广告advVideo = {$adv_video}; //1 播放的广告 0直播中var isAndroid = /android/ig.test(navigator.userAgent);
if ($zhibo['open_amount'] > 0 && $zhibo['preview']==1 && $is_vip==0 && $is_pay==0 && $ad_force != 1){preview = true;
}/*视频播放逻辑
1.直播未开始有广告：不管是 否强制，都播放广告，并循环。无广告：播放器放置封面图2.直播中有广告：开启强制广告则播放广告，广告完成播放视频，没有推流则循环播放广告无广告：直接播放视频m3u8文件3.直播回放有广告：开启强制，才播放广告，广告播放完成，播放视频无广告：直接播放回放视频m3u8文件播放广告情况下，都不显示进度条。参数说明：播放状态，activity.zhiboStatus：0未开始，1直播中，2回放广告地址，activity.advURL：null无广告，长度大于0有广告是否强制广告，activity.ad_force ：1强制
*/$('.video_loading').hide();if(advURL.length > 0){if (adForceVal == 1 || (adForceVal == 0 && advVideo == 1)){curr = -1;advMsg = '倒计时'}else{advMsg = '跳过广告'}
}else{if(adForceVal == 1){console.log('视频链接有误')}
}
// https://abc.vyuan8.cn/vyuan/plugin.php?id=vyuan_zhibo&mod=info&identify=5711714
// http://ad.vyuan8.cn/user-dir/ad5712965.mp4?44
console.log(vList)
console.log(videoTotalTime)/* 关闭广告的自定义事件*/
var videoAdControl = function (videoAd) {/* 调用视频广告组件的暂停事件来暂停广告 */if(advVideo == 1){//直播未开始，不能跳过广告layer.msg('当前直播未开始，只有广告可以观看哦！');}else if(adForceVal != 1){videoAd.pauseVideoAd()var result = confirm('确定开通会员关闭广告吗？')if (result) {/* 关闭广告 */videoAd.closeVideoAd()} else {/* 播放广告 */videoAd.playVideoAd()}}
}//手机微信端播放器 文档地址https://help.aliyun.com/document_detail/62941.html
var player = new Aliplayer({id: "player-con",source: vList[0]['record_url'],width: "100%",height: $('.container').outerHeight()+"px",videoHeight: $('.container').outerHeight()+"px",autoplay: true,isLive: false,rePlay: false,useH5Prism: true,playsinline: true,preload:true,x5_type:'h5', //20181130 rockx5_fullscreen:true,x5_video_position:'top',skinLayout:[],components: [<!--{if ($ad_force == 1 || $adv_video == 1) && strlen($advUrl) >= 5 }-->// 有广告 开启强制广告、直播未开始{name: 'VideoADComponent',type: AliPlayerComponent.VideoADComponent,args: [advURL,'',videoAdControl, advMsg],},<!--{/if}--><!--{if $zhibo['open_amount'] > 0 && $zhibo['preview']==1 && $is_vip==0 && $is_pay==0 && $ad_force != 1}-->{ /* 强制广告不启用试看功能 */name: 'PreviewComponent',type: AliPlayerComponent.PreviewComponent,args: [previewTime,'试看已结束，点击开通VIP观看完整节目！']},<!--{/if}-->]
});<!--{if $zhibo['status'] == 1 && $zhibo['open_amount'] > 0 && $zhibo['preview']==1 && $is_vip==0 && $is_pay==0 && $ad_force != 1}-->//视频直播中，每分钟请求一次ajaxvar a = setInterval(function () {$.ajax({type: 'post',url: '{$videoControlsAjax}',success: function (data) {if (data == 1) {//超出试看时间player.pause();clearInterval(a);// layer.msg('试看结束，请付费继续观看', function () {// window.location.href = 'plugin.php?id=vyuan_zhibo&mod=introduceV&preview=preview&activity_id=' + $identify + '&zhibo_pid=' + $zhibo['zhibo_pid'];// });document.querySelector(".preview-component-layer").style.display = "block";}},error: function () {console.log('error');}});}, 1000 * 60);
<!--{/if}-->var videoDuration = 0,previousClipDuration = 0,touchSeekTime = 0, //释放进度条时间fullScreenHad = false, //是否全屏过fullScreenSuccess = false, //是否全屏成功touchProgress=false, //是否拖动进度条fullScreenTimes = 0, //全屏次数;showflag=0,hideStart=0, //进度条显示控制参数main_height = 0;
//封面图拉伸
$('.prism-cover').css({'height':$('.container').outerHeight(),'background-size':'100% 100%'});//控制条位置调整
$('.prism-controlbar').css('top',($('.container').outerHeight()-46)+"px");//点击屏幕事件
var video = document.querySelector('video');//播放器点击事件
$('#player-con').on('click',function(e){console.log('点击屏幕')videoControl.toggleShow();
})//点击手机返回按钮
video.addEventListener("x5videoexitfullscreen", function() {if(isAndroid){var screenIsFull = player.fullscreenService.getIsFullScreen();if(screenIsFull && player.getStatus() == 'pause'){//全屏退出的时候继续播放player.play();console.log('继续播放')}player.fullscreenService.cancelFullScreen();}
}, false);//试看功能遮罩层 点击事件
$('.preview-component-wrap').on('click',function(){if(player.getStatus() == 'pause'){window.location.href='plugin.php?id=vyuan_zhibo&mod=introduceV&preview=preview&activity_id='+$identify+'&zhibo_pid='+$zhibo['zhibo_pid'];}
});//播放、暂停按钮点击事件
$('.video-icon').on('click',function(){if($(this).hasClass('video-play')){$(this).removeClass('video-play')player.pause()}else{$(this).addClass('video-play') //更改图标player.play();}
});//大播放按钮点击事件
$('.pause').on('click',function(){//隐藏poster、big_button$(this).removeClass('fadeIn').addClass('fadeOut').css('z-index',0)//显示控制条if(curr == -1){$('.iconfont.icon-close').hide(); //隐藏关闭X广告按钮$('.danmu_bar').css('visibility','hidden'); //隐藏浏览量}else{//非广告情况下，才显示进度条$('.video-controls').addClass('fadeInUp')$('.video-controls').css({'z-index':3000})}//扩大互动区if(isAndroid && !$('.poster').is(':hidden')){main_height = $('.main-content').height() + 50;$('.main-content,.main-content-detail,.con4List,#iframe_one_2').height(main_height);}$('.poster').hide()player.play()videoDuration = getVideoDuration();var showItemTimer = setTimeout(function(){if($('.video-controls').hasClass('fadeInUp')){$('.video-controls').removeClass('fadeInUp').addClass('fadeOutDown');$(".icon-refresh").removeClass('fadeInLeft').addClass('fadeOutLeft');$(".liveHeader").removeClass('fadeInLeft').addClass('fadeOutLeft'); $('.preview-component-tip').removeClass('fadeIn').addClass('fadeOut'); //试看提示语}hideStart=1;}, 11000);
})// //广告视频点击事件
// $('.video-ad-component').on('click',function(){
// videoControl.toggleShow();
// console.log('点击广告div')
// })//进入全屏/退出全屏
$('.video-full-screen').on('click',function(){fullScreenTimes ++;if (isAndroid){var screenIsFull = player.fullscreenService.getIsFullScreen();if(screenIsFull){player.fullscreenService.cancelFullScreen();}else{if(fullScreenTimes == 1 && zhiboStatus != 1 && videoTotalTime !=1){fullScreenHad = true;// 获取分段url当前播放时间 var segmentedUrlSeekTime = ($('.video-progress-bar').width() / $('#videoSeek').width()).toFixed(2) * videoDuration;if(segmentedUrlSeekTime < 0){segmentedUrlSeekTime = 0;}player.loadByUrl(originalUrl,segmentedUrlSeekTime) //使用原始视频地址if(!fullScreenSuccess){curr = 0;}}player.fullscreenService.requestFullScreen();}}else{var fullscreenvideo = fullscreenFunction(video);video[fullscreenvideo]();if(fullScreenTimes == 1 && zhiboStatus != 1 && videoTotalTime !=1){fullScreenHad = true;// 获取分段url当前播放时间 var segmentedUrlSeekTime = $('.video-progress-bar').width() / $('#videoSeek').width() * videoDuration;if(segmentedUrlSeekTime < 0){segmentedUrlSeekTime = 0;}player.loadByUrl(originalUrl) //使用原始视频地址if(!fullScreenSuccess){player.seek(segmentedUrlSeekTime);curr = 0;fullScreenSuccess = true}}}
});var window_height = window.screen.height,
window_width = window.screen.width;
var container_bottom = $(".container").css("padding-bottom");
// 获取百分比
var container_percent = (window_width/window_height)*100+"%";//监听全屏事件
player.on('requestFullScreen',function(e){console.log('全屏')if(!fullScreenSuccess && zhiboStatus != 1){fullScreenSuccess = true;}//修改进度条样式if(isAndroid){$('.video-icon').addClass('fullscreen_playbtn');$('.video-controls .video-icon').addClass('fullscreen_control');$('.video-controls .video-full-screen').addClass('fullscreen_control');$('.video-controls .video-time').css('font-size','0.8rem').addClass('fullscreen_seek');//隐藏dom$('.footer').addClass('hideFooter');$('.right-tool-bar').addClass('hideFooter');//添加dom$('.new-video-controls').addClass('showProgress');//修改dom$('.video-full-screen').addClass('video-exit-full')$(".liveHeader").css("top","4.4rem").addClass('fullscreen_liveHeader');$('.icon-refresh').addClass('fullscreen_icon-refresh');$(".danmu_bar").css("top","4.4rem").addClass('fullscreen_danmubar');$(".danmu_bar img").addClass('fullscreen_danmubarImg');$(".container").css("padding-bottom", container_percent); //维持屏幕比 16：9 / 18：9}
});//监听退出全屏事件
player.on('cancelFullScreen',function(e){console.log('退出全屏')//修改进度条样式if(isAndroid){$('.video-icon').removeClass('fullscreen_playbtn');$('.video-controls .video-icon').removeClass('fullscreen_control');$('.video-controls .video-full-screen').removeClass('fullscreen_control');$('.video-controls .video-time').css('font-size','1.3rem').removeClass('fullscreen_seek');//添加dom$('.footer').removeClass('hideFooter');$('.right-tool-bar').removeClass('hideFooter');$('.new-video-controls').removeClass('showProgress');//修改$('.video-full-screen').removeClass('video-exit-full')$(".liveHeader").css("top","4.4rem").removeClass('fullscreen_liveHeader');$('.icon-refresh').removeClass('fullscreen_icon-refresh');$(".danmu_bar").css("top","4.4rem").removeClass('fullscreen_danmubar');$(".danmu_bar img").removeClass('fullscreen_danmubarImg');$(".container").css("padding-bottom", container_bottom);}
});player.on('timeupdate',function(){if(advVideo == 0 && zhiboStatus == 1){//直播中$("#Cntdown").hide();$('.video-time__current').text("\u5b9e\u65f6\u76f4\u64ad"); //实时直播$('.video-time__duration').text('');$('.video-progress-bar').hide();$('.video-seek__container').hide();}else{if((fullScreenSuccess && fullScreenHad) || videoTotalTime == 1){ //全屏过，使用原始url地址继续播放 或者一段视频//获取当前视频播放时长var currentTime = player.getCurrentTime();var videoDuration = player.getDuration();var progress_percent = parseFloat(currentTime / videoDuration * 100).toFixed(2);}else{// 视频当前播放时间if(player.getCurrentTime() == 0 && touchSeekTime > 0){var currentTime = previousClipDuration + touchSeekTime;touchSeekTime = 0;}else{var currentTime = previousClipDuration + parseInt(player.getCurrentTime());} videoDuration = getVideoDuration(); //视频总时长var progress_percent = parseFloat(currentTime / videoDuration * 100).toFixed(2); //进度条百分比}if (progress_percent >= 100) {progress_percent = 100;}if(!touchProgress){$('.video-progress-bar').width(progress_percent + '%');$('.video-time__duration').text(formatDurantion(videoDuration)); //写入总时长$('.video-time__current').text(formatDurantion(currentTime)); //写入当前播放时间}}
});player.on('error',function(e){console.log('error',e)
})player.on('playing',function(){videoDuration = getVideoDuration();if(!$('.video-icon').hasClass('video-play')){$('.video-icon').addClass('video-play');}$('.video_loading').hide();if(!$('.pause').hasClass('fadeOut') && $('.poster').is(':hidden')){$('.pause').addClass('fadeOut').css('z-index',0);}if(preview && previewTime <= previousClipDuration+player.getCurrentTime()){//试看结束player.pause();console.log('试看结束')}
})player.on('pause',function(){if($('.video-icon').hasClass('video-play')){$('.video-icon').removeClass('video-play')}//big_buttonif($('.pause').hasClass('fadeOut')){if(curr != -1){$('.pause').removeClass('fadeOut').addClass('fadeIn').css('z-index',100);}}
})player.on('waiting',function(){if($('.pause').hasClass('fadeOut')){//拖动进度条，显示loading$('.video_loading').show();}
});player.on('ended',function(e){if((fullScreenSuccess && fullScreenHad) || videoTotalTime == 1){//全屏过，使用原始url地址播放 或者是一段视频player.replay();player.pause();}else{console.log('ended_curr',curr)if(curr < vList.length - 1){if(curr != -1){previousClipDuration += parseInt(vList[curr]['session_time']);curr ++;player.loadByUrl(vList[curr]['record_url'],0);}}else if(curr == vList.length - 1){//全部播放完成，初始化样式$('.video-time__current').text('00:00');$('.video-progress-bar').width('0');curr = 0;previousClipDuration = 0;player.pause() //开启replay则注释掉即可player.loadByUrl(vList[curr]['record_url'],0);}}
});//进度条控制
var videoControl = {//判断设备是否支持touch事件touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,main: document.querySelector(".video-controls"),isInteractingWithControlBar: false,liveProgressBar: document.querySelector('#liveProgressBar'), width: 0,handleEvent: function(e) {var self = this; //this指videoControl对象var progressOffsetLeft = self.liveProgressBar.offsetLeft;if (e.type == "touchstart") {self.start(e,progressOffsetLeft);} else if (e.type == "touchmove") {self.move(e,progressOffsetLeft);} else if (e.type == "touchend") {self.end(e,progressOffsetLeft);}},//滑动开始start: function(e,progressOffsetLeft) {var self = this;self.width = self.liveProgressBar.offsetWidth;console.log(parseInt(adForceVal) == 1 && parseInt(curr) == -1)if (!(parseInt(adForceVal) == 1 && parseInt(curr) == -1)) {// 非观看广告状态下才可以拖动进度条var startPos = e.targetTouches[0].pageX - progressOffsetLeft;if (e.targetTouches.length === 1) {self.liveProgressBar.addEventListener("touchmove", self, false);self.liveProgressBar.addEventListener("touchend", self, false);}}},//移动move: function(e,progressOffsetLeft) {var self = this, videoTimeVal = $('#videoTime').val();touchProgress = true;// self.showControlBar();self.isInteractingWithControlBar = true;var startPos = e.targetTouches[0].pageX - progressOffsetLeft;if(startPos <= 0){startPos = 0;}else if(startPos > self.width){startPos = self.width;}var proBarOffset = parseFloat(startPos / self.width ).toFixed(2);if((fullScreenSuccess && fullScreenHad) || videoTotalTime == 1){//全屏过，使用原始url地址播放videoDuration = player.getDuration();var seekTime = proBarOffset * videoDuration;}else{var seekTime = proBarOffset * videoDuration;}// //拖动并预览画面start// var moveProInfo = seekVideo(seekTime,seekTime);// // 判断是否跳段// if(curr != moveProInfo['currIndex']){// //重置// curr = moveProInfo['currIndex'],previousClipDuration = 0;// for(i = 0;i < curr ;i ++){// previousClipDuration += parseInt(vList[i]['session_time']);// }// // player.loadByUrl(moveProInfo['currUrl'],moveProInfo['currTime']); //开发者工具调试使用// // 真机调试使用// player.loadByUrl(moveProInfo['currUrl']);// player.on('canplay',function(e){// player.seek(moveProInfo['currTime']);// });// }else{// player.seek(moveProInfo['currTime']);// }// //拖动并预览画面end$('.video-time__current').text(formatDurantion(seekTime)); //渲染播放时间$('.video-progress-bar').width(proBarOffset * 100 + '%'); //渲染进度条},//滑动释放end: function(e,progressOffsetLeft) {var self = this;var videoTypeVal = $('#video_type').val();var finalPos = e.changedTouches[0].pageX - progressOffsetLeft;if (finalPos <= 0) {finalPos = 0;} else if (finalPos >= self.width) {finalPos = self.width;}touchProgress = false;var finalOffsetRate = parseFloat(finalPos / self.width ).toFixed(2);if((fullScreenSuccess && fullScreenHad) || videoTotalTime == 1){//全屏过，使用原始url地址播放 或者一段视频 videoDuration = player.getDuration();var finalSeekTime = finalOffsetRate * videoDuration;player.seek(parseInt(finalSeekTime));}else{var finalSeekTime = finalOffsetRate * videoDuration;if (parseInt(videoTypeVal) == 1 || videoTotalTime == '' || videoTotalTime == 1) {// * 如果是小视频或者视频流只有一段或者是广告player.seek(parseInt(finalSeekTime))} else {var moveProInfo = seekVideo(finalSeekTime,finalSeekTime); // 判断是否跳段// alert('time1:'+formatDurantion(finalSeekTime))if(curr != moveProInfo['currIndex']){//重置curr = moveProInfo['currIndex'],previousClipDuration = 0;console.log('touchend跳段，curr是'+curr)for(i = 0;i < curr ;i ++){previousClipDuration += parseInt(vList[i]['session_time']);}player.loadByUrl(moveProInfo['currUrl'],moveProInfo['currTime']); //开发者工具调试使用// 真机调试使用// player.loadByUrl(moveProInfo['currUrl']);// player.on('canplay',function(e){// if(!fullScreenSuccess){// player.seek(moveProInfo['currTime']);// console.log('canplayAAA'+fullScreenSuccess)// console.log(moveProInfo)// }// });}else{player.seek(moveProInfo['currTime']);}touchSeekTime = parseInt(moveProInfo['currTime']);}}self.isInteractingWithControlBar = false;//解绑事件self.liveProgressBar.removeEventListener("touchmove", this, false);self.liveProgressBar.removeEventListener("touchend", this, false);},//初始化init: function() {var self = this;if (!!self.touch) self.liveProgressBar.addEventListener("touchstart", self, false); //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性},showControlBar: function() {var _self = this;if (_self.main.classList.contains("fadeOutDown")){console.log('显示元素')_self.main.classList.remove("fadeOutDown");_self.main.classList.add('fadeInUp');$(".icon-refresh").removeClass('fadeOutLeft').addClass('fadeInLeft');$(".liveHeader").removeClass('fadeOutLeft').addClass('fadeInLeft'); $('.preview-component-tip').removeClass('fadeOut').addClass('fadeIn')}},hideControlBar: function() {var _self = this;if (_self.main.classList.contains("fadeInUp")){console.log('隐藏元素')_self.main.classList.remove("fadeInUp");_self.main.classList.add('fadeOutDown');//全屏下隐藏$(".icon-refresh").removeClass('fadeInLeft').addClass('fadeOutLeft');$(".liveHeader").removeClass('fadeInLeft').addClass('fadeOutLeft'); $('.preview-component-tip').removeClass('fadeIn').addClass('fadeOut'); //试看提示}},toggleShow: function() {var _self = this;if (_self.main.classList.contains("fadeInUp")) {//进度条显示中_self.hideControlBar();showflag=0;} else {_self.showControlBar();showflag=1;}//自动消失弹出框if(showflag==1 && hideStart==1){hideStart=0;if (_self.main.classList.contains("fadeInUp")){setTimeout(function(){$(".video-controls").removeClass('fadeInUp').addClass('fadeOutDown');$(".icon-refresh").removeClass('fadeInLeft').addClass('fadeOutLeft');$(".liveHeader").removeClass('fadeInLeft').addClass('fadeOutLeft'); $('.preview-component-tip').removeClass('fadeIn').addClass('fadeOut'); //试看提示语hideStart=1;}, 10000);}}}
}
videoControl.init();function formatDurantion(durantion) {var theTime = parseInt(durantion);// 秒var days = Math.floor(theTime / 1440 / 60);var hours = Math.floor((theTime - days * 1440 * 60) / 3600);var minutes = Math.floor((theTime - days * 1440 * 60 - hours * 3600) / 60);var seconds = (theTime - days * 1440 * 60 - hours * 3600 - minutes *60);if (hours<10){hours="0"+hours;}if (minutes<10){minutes="0"+minutes;}if (seconds<10){seconds="0"+seconds;}if (hours=="00"){result=minutes +":"+seconds;}else{result=hours+":"+minutes +":"+seconds;}return result;
};function seekVideo(lTime,lTime1) {var myVideo=new Array();var sTime=0;for (var i = 0; i < vList.length; i ++) {lTime -= vList[i].session_time;if(lTime < 0){if(i == 0){var videoSeekTime = parseFloat(vList[i].session_time) + parseFloat(lTime);myVideo['currIndex']=i;myVideo['currTime']= videoSeekTime.toFixed(2) ;myVideo['currUrl']=vList[i].record_url;return myVideo;}else{for(var j = 0;j < i;j++){sTime += parseFloat(vList[j].session_time);}myVideo['currIndex']=i;myVideo['currTime']=lTime1 - parseFloat(sTime).toFixed(2);myVideo['currUrl']=vList[i].record_url;return myVideo;}}}
}function getVideoDuration(){if (videoTotalTime == '' || parseInt(videoTotalTime) == 1 || fullScreenSuccess) {var totalTime = player.getDuration();} else {var totalTime = videoTotalTime;}return totalTime;
}function fullscreenFunction(elem) {var prefix = 'webkit';if (elem[prefix + 'EnterFullScreen']) {return prefix + 'EnterFullScreen';} else if (elem[prefix + 'RequestFullScreen']) {return prefix + 'RequestFullScreen';};return false;
};
</script>阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案相关推荐
- 阿里web播放器微信浏览器打开进度条设置和时间获取
解决的问题: 1.阿里云的web播放器:移动端(安卓是红米手机和苹果11)在微信浏览器打开适用,pc端谷歌浏览器打开适用,其他没测. 2.全代码直接用,进度条没办法完全禁止拖动,只能快进就让他回到上一 ...
- 简单音乐播放器，可拖动进度条。完整代码demo
效果图: 可播放暂停继续播放,进度条可拖动,时间展示,声音调节 完整代码(直接拿来用) <!DOCTYPE html> <html> <head> <meta ...
- 【对象存储】关于阿里云OSS踩坑记录
前言:最近笔者通过PHP做了一个上传文件到阿里云OSS存储的程序,在上传过程中官方文档写的很清楚,几乎没有遇到什么问题,但在访问文件的过程中,遇到了问题,由于笔者的bucket是私有域,所以访问时,首 ...
- Pytorch踩坑记录：关于用net.eval()和with no grad装饰器计算结果不一样的问题
Pytorch踩坑记录 相同点 net.eval()和with toch.no_grad()的相同点:都停止反向传播 不同点: 1.net.eval() 用net.eval(),此时BN层会用训练时的 ...
- 数据标注平台（CVAT）安装及踩坑记录
目录 一.CVAT安装 step1 安装docker step2 获取权限 step3 获取权限 step4 克隆cvat源代码 step5 构建docker镜像 step6 运行Docker容器这一 ...
- 日常踩坑记录-汇总版
开发踩坑记录,不定时更新 心得 RTFM 严谨的去思考问题,处理问题 严格要求自己的代码编写习惯与风格 注意 单词拼写 20200207 mybatis plus 自带insert插入异常 sql i ...
- Slam学习笔记——ROS踩坑记录
Slam学习笔记--ROS踩坑记录 1. 安装 2. ROS文件系统 2.1 工作区 2.2 包package 2.2.1 包的操作 2.2.2 描述文件package.xml 2.3 节点node ...
- 微信客服机器人（踩坑记录、SpringBoot、企业微信）
微信客服机器人(踩坑记录.SpringBoot.企业微信) 转载请注明出处:https://www.jjput.com/archives/wei-xin-ke-fu-ji-qi-ren 总体流程 当有 ...
- 关于原神沙漠痕迹效果的踩坑记录
--因为个人之前活动的平台缺乏有营养的可以促进双方思考与进步的评论(毕竟平台的主打内容和用户群体不同),所以思考(与自己的懒惰做斗争)过后,技术相关的文章以后还是来知乎或CSDN之类专业性比较强的平台 ...
最新文章
- 单片机初学者做项目为什么这么难？单片机初学者心得有哪些
- 【多重数组降维的简单方法】
- Rep Loss笔记
- java的this_java的this是什么意思
- 百度网盘不限速被限速_基本API限速
- [渝粤教育] 四川农业大学 宏观经济学 参考 资料
- js处理16进制hex转str出现的中文乱码问题
- leetcode - 1191. K 次串联后最大子数组之和
- ASP.NET知识点
- Linux根据端口号或者关键字查询进程，重启Tomcat服务脚本优缺点说明
- [学习笔记]--ASP.Net MVC
- php 验证链接,PHP判断链接是否有效 的方法
- 0基础Java自学之路
- 向已经存在的Kubernetes集群中添加新的worker节点
- 【JS】点击文本复制到剪贴板实现
- c语言中罗马字母数字,罗马数字转整数C语言实现
- spaCy 2.1 中文NLP模型
- 三星i9220刷机包 新蜂 V4.4
- 读real time localization and 3D reconstruction笔记
- solaris配置php,Solaris 9.0下安装配置Apache-2.0.45+php-4.3.1+mysql-4.1.0