阿里播放器踩坑记录 进度条重构 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- 100%;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'],
	 "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("u5b9eu65f6u76f4u64ad"); //实时直播
		$('.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'), 
	 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>