阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人。谢谢大家!❤
如果解决不了,可以在文末进群交流。
文档地址: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 rock
x5_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}-->
//视频直播中,每分钟请求一次ajax
var 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_button
if($('.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>
![添加好友 添加好友](https://images.cnblogs.com/cnblogs_com/mengyilingjian/1570270/o_alipay.bmp)
![谢谢支持 打赏码](https://images.cnblogs.com/cnblogs_com/mengyilingjian/1570270/o_200623060543weixinshang.bmp)