1. 程式人生 > >自定義video控制欄,移動端可行

自定義video控制欄,移動端可行

ima http請求 ret 需要 max -m etc ssi pau

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>預覽頁</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/video.css" />
		<style>
			.introduce {height:40px;position:relative;background-color:#fff;padding-left:15px;}
			.introduce>p.mui-ellipsis {line-height:40px;width:100%;padding-right:160px;margin-bottom:0;}
			.introduce>button.mui-btn {position:absolute;right:80px;top:4px;}
			.introduce>select {position:absolute;right:5px;top:3px;width:70px;padding:4px;border:1px solid #ddd !important;}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="introduce">
				<button class="mui-btn" id=‘capture‘>抓圖</button>
			</div>
			<img src="../../img/map.jpg" id="preload" class="preload" />
			<div class="player mui-hidden" id="player">
				<video id="video2" autoplay="autoplay" poster="../../img/map.jpg" src="../../images/movie.mp4"></video>	
				<div class="controls" id="controls">
					<span class="video video-play" id="switch"></span>
					<span class="video video-big" id="expand"></span>
					<div class="progress">
							<div class="bar"></div><!--視頻總時長-->
							<div class="loaded"></div><!--視頻加載時長-->
							<div class="elapse" id="elapse"><span></span></div><!--視頻當前播放長度-->
					</div>
					<div class="time">
						<span class="currentTime" id="currentTime">00:00</span>/<span class="totalTime" id="totalTime">00:00</span>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script>
//			mui.plusReady(function() {
				//plus.screen.lockOrientation(‘portrait-primary‘);
				"use strict";
				var video = document.getElementById(‘video2‘);
				/*
				 * 抓圖
				 */
				document.getElementById(‘capture‘).addEventListener(‘tap‘,function(){
					var canvas = document.createElement(‘canvas‘);
					canvas.width = video.videoWidth;
					canvas.height = video.videoHeight;
					canvas.getContext(‘2d‘).drawImage(video,0,0,canvas.width,canvas.height);
//					var img = document.getElementById(‘img‘);
//					img.src = canvas.toDataURL();
                                mui.toast(‘截圖成功‘);
                                if(null!=plus.storage.getItem(‘screenshot‘) && ‘‘!=plus.storage.getItem(‘screenshot‘)){
                    	              plus.storage.setItem(‘screenshot‘,plus.storage.getItem(‘screenshot‘)+canvas.toDataURL()+‘__‘+document.getElementById(‘DevName‘).innerText+"__"+new Date()+"——");
                                }else{
                    	              plus.storage.setItem(‘screenshot‘,canvas.toDataURL()+‘__‘+document.getElementById(‘DevName‘).innerText+"__"+new Date()+"——");
                                }
				});
				/*
				 * 視頻能播了
				 */
				video.addEventListener(‘canplay‘,function(){
					setTimeout(function(){
						document.getElementById(‘preload‘).classList.add(‘mui-hidden‘);
						document.getElementById(‘player‘).classList.remove(‘mui-hidden‘);
						document.getElementById(‘totalTime‘).innerText=getTime(video.duration);
					},1000);
				});
				/*
				 * 視頻暫停、播放
				 */
				document.getElementById(‘switch‘).addEventListener(‘tap‘,function(){
					debugger;
					if(video.paused){
						video.play();
					}else {
						video.pause();
					}
					toggleClass(this,‘video-play‘,‘video-pause‘);
				});
				/*
				 * 視頻播放過程中
				 */
				video.addEventListener(‘timeupdate‘,function(){
					var currentTime=video.currentTime;
					document.getElementById(‘currentTime‘).innerText=getTime(currentTime);
					//模擬進度條
					document.getElementById(‘elapse‘).style.width=(currentTime/video.duration*100)+‘%‘;
				})
				/*
				 * 視頻全屏
				 */
				document.getElementById(‘expand‘).addEventListener(‘tap‘,function(){
					plus.screen.lockOrientation(‘landscape-primary‘);
					toggleClass(this,‘video-big‘,‘video-small‘);
					document.querySelector(‘body‘).classList.add(‘big‘);
					var player = document.getElementById(‘player‘);
//					player.style="height:"+(window.scrollHeight-44)+";width:"+(window.scrollWidth-)+
				});
				/*
				 * 點擊視頻任務欄消失和出現
				 */
				video.addEventListener(‘tap‘,function(){
					toggleClass(document.getElementById(‘controls‘),‘mui-hidden‘,‘‘);
				})
			//通過時間返回需要展示的html
			function getTime(time){
				//將時間進行轉換,獲取分秒
				var minute = Math.floor(time/60);
				var second = Math.floor(time%60);
				//前面補0
				minute = minute<10?"0"+minute:minute;
				second = second<10?"0"+second:second;
				return minute+‘:‘+second;
			}
			function toggleClass(ele,a,b){
				if(ele.classList.contains(a)){
					ele.classList.remove(a);
					ele.classList.add(b);
				}else {
					ele.classList.add(a);
					ele.classList.remove(b);
				}
			}
		</script>
	</body>

</html>

  

<!DOCTYPE html>

<html>
<head><meta charset="utf-8"><title>預覽頁</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="../../css/mui.min.css"><link rel="stylesheet" href="../../css/video.css" /><style>.introduce {height:40px;position:relative;background-color:#fff;padding-left:15px;}.introduce>p.mui-ellipsis {line-height:40px;width:100%;padding-right:160px;margin-bottom:0;}.introduce>button.mui-btn {position:absolute;right:80px;top:4px;}.introduce>select {position:absolute;right:5px;top:3px;width:70px;padding:4px;border:1px solid #ddd !important;}</style></head>
<body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">視頻預覽</h1></header><div class="mui-content"><div class="introduce"><p id="DevName" class="mui-ellipsis">通道名稱</p><button class="mui-btn" id=‘capture‘>抓圖</button><select name="" id="changeGe" onchange=‘changeGe()‘><option value="0">默認</option><option value="1">CIF格式</option><option value="2">QCIF格式</option></select></div><img src="../../img/map.jpg" id="preload" class="preload" /><div class="player mui-hidden" id="player"><video id="video2" autoplay="autoplay" poster="../../img/map.jpg" src="../../images/movie.mp4"></video><div class="controls" id="controls"><span class="video video-play" id="switch"></span><span class="video video-big" id="expand"></span><div class="progress"><div class="bar"></div><!--視頻總時長--><div class="loaded"></div><!--視頻加載時長--><div class="elapse" id="elapse"><span></span></div><!--視頻當前播放長度--></div><div class="time"><span class="currentTime" id="currentTime">00:00</span>/<span class="totalTime" id="totalTime">00:00</span></div></div></div><button id="mySwitch" href="#">切換主碼流</button></div><script src="../../js/mui.min.js"></script><script>var sessionid = "";var DevID = ‘‘;var Pwd1 = ‘‘;var DevPort1 = ‘‘;var DevIP1 = ‘‘;var DevType1 = ‘‘;var UserName1 = ‘‘;var DevNum1 = ‘‘;var DevName = ‘‘;//mui.plusReady(function() {//plus.screen.lockOrientation(‘portrait-primary‘);"use strict";var video = document.getElementById(‘video2‘);/* * 抓圖 */document.getElementById(‘capture‘).addEventListener(‘tap‘,function(){var canvas = document.createElement(‘canvas‘);canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext(‘2d‘).drawImage(video,0,0,canvas.width,canvas.height);//var img = document.getElementById(‘img‘);//img.src = canvas.toDataURL(); mui.toast(‘截圖成功‘); if(null!=plus.storage.getItem(‘screenshot‘) && ‘‘!=plus.storage.getItem(‘screenshot‘)){ plus.storage.setItem(‘screenshot‘,plus.storage.getItem(‘screenshot‘)+canvas.toDataURL()+‘__‘+document.getElementById(‘DevName‘).innerText+"__"+new Date()+"——"); } else{ plus.storage.setItem(‘screenshot‘,canvas.toDataURL()+‘__‘+document.getElementById(‘DevName‘).innerText+"__"+new Date()+"——"); }});/* * 視頻能播了 */video.addEventListener(‘canplay‘,function(){setTimeout(function(){document.getElementById(‘preload‘).classList.add(‘mui-hidden‘);document.getElementById(‘player‘).classList.remove(‘mui-hidden‘);document.getElementById(‘totalTime‘).innerText=getTime(video.duration);},1000);});/* * 視頻暫停、播放 */document.getElementById(‘switch‘).addEventListener(‘tap‘,function(){debugger;if(video.paused){video.play();}else {video.pause();}toggleClass(this,‘video-play‘,‘video-pause‘);});/* * 視頻播放過程中 */video.addEventListener(‘timeupdate‘,function(){var currentTime=video.currentTime;document.getElementById(‘currentTime‘).innerText=getTime(currentTime);//模擬進度條document.getElementById(‘elapse‘).style.width=(currentTime/video.duration*100)+‘%‘;})/* * 視頻全屏 */document.getElementById(‘expand‘).addEventListener(‘tap‘,function(){plus.screen.lockOrientation(‘landscape-primary‘);toggleClass(this,‘video-big‘,‘video-small‘);document.querySelector(‘body‘).classList.add(‘big‘);var player = document.getElementById(‘player‘);//player.style="height:"+(window.scrollHeight-44)+";width:"+(window.scrollWidth-)+});/* * 點擊視頻任務欄消失和出現 */video.addEventListener(‘tap‘,function(){toggleClass(document.getElementById(‘controls‘),‘mui-hidden‘,‘‘);})var media = document.getElementById("video2");var self = plus.webview.currentWebview();var VideUrl = self.VideUrl; //視頻路徑;sessionid = self.sessionid; //回話id;DevID = self.DevID; //回話id;Pwd1 = self.Pwd1; //回話id;DevPort1 = self.DevPort1; //回話id;DevIP1 = self.DevIP1; //回話id;DevType1 = self.DevType1; //回話id;DevNum1 = self.DevNum1; //回話id;UserName1 = self.UserName1;DevName = self.DevName;media.src = VideUrl;media.play();var timer = window.setInterval("keepAlive()", 20000); //保持會話var mySwitch = document.getElementById("mySwitch"); document.getElementById(‘DevName‘).innerText=DevName;mySwitch.addEventListener(‘tap‘, function() {clearInterval(timer);// window.location.reload();mui.ajax(plus.storage.getItem(‘videoPath‘) + ‘/VideoStop.php‘, {data: ‘{"sessionid":"‘ + sessionid + ‘"}‘,type: ‘post‘, //HTTP請求類型timeout: 100000, //超時時間設置為10秒;dataType: "json",headers: {},success: function(data) {mui.ajax(plus.storage.getItem(‘videoPath‘) + ‘/VideoStart.php‘, {data: ‘{"hls-time":"3","szFS-Addr":"‘ + DevIP1 + ‘","bytImgFormat":"0","bytNetType":"3","szFS-User":"‘ + UserName1 + ‘","szFS-PWD":"‘ + Pwd1 + ‘","nManagePort1":"‘ + plus.storage.getItem(‘nManagePort1‘) + ‘","bytChannel":"‘ + DevNum1 + ‘","lVideoPri":"1","nManagePort2":"3002","bytServerType":"‘ + DevType1 + ‘","nFS-Port":"‘ + DevPort1 + ‘","szManageIP1":"‘ + plus.storage.getItem(‘szManageIP1‘) + ‘","hls-list-size":"5","szManageIP2":"127.0.0.1","hls-resolution":0}‘,type: ‘post‘, //HTTP請求類型timeout: 100000, //超時時間設置為10秒;dataType: "json",headers: {},success: function(data1) {mui.openWindow({url: ‘VideoLiveZhu.html‘,createNew: true,extras: {VideUrl: plus.storage.getItem(‘videoPath‘) + data1.videosrc,sessionid: data1.sessionid,DevID: DevID,Pwd1: Pwd1,DevPort1: DevPort1,DevIP1: DevIP1,DevType1: DevType1,UserName1: UserName1,DevNum1: DevNum1,DevName:DevName}});var self1 = plus.webview.currentWebview();self1.hide();},error: function(xhr, type, errorThrown) {}});},error: function(xhr, type, errorThrown) {}});}, false);
//});//通過時間返回需要展示的htmlfunction getTime(time){//將時間進行轉換,獲取分秒var minute = Math.floor(time/60);var second = Math.floor(time%60);//前面補0minute = minute<10?"0"+minute:minute;second = second<10?"0"+second:second;return minute+‘:‘+second;}function toggleClass(ele,a,b){if(ele.classList.contains(a)){ele.classList.remove(a);ele.classList.add(b);}else {ele.classList.add(a);ele.classList.remove(b);}}function keepAlive() {mui.ajax(plus.storage.getItem(‘videoPath‘) + ‘/KeepAlive.php‘, {data: ‘{"sessionid":"‘ + sessionid + ‘"}‘,type: ‘post‘, //HTTP請求類型timeout: 100000, //超時時間設置為10秒;dataType: "json",headers: {},success: function(data) {
},error: function(xhr, type, errorThrown) {mui.toast("網絡中斷,暫時不能播放");}});}function changeGe(){mui.ajax(plus.storage.getItem(‘videoPath‘) + ‘/VideoStart.php‘, {data: ‘{"hls-time":"3","szFS-Addr":"‘ + DevIP1 + ‘","bytImgFormat":"0","bytNetType":"3","szFS-User":"‘ + UserName1 + ‘","szFS-PWD":"‘ + Pwd1 + ‘","nManagePort1":"‘ + plus.storage.getItem(‘nManagePort1‘) + ‘","bytChannel":"‘ + DevNum1 + ‘","lVideoPri":"1","nManagePort2":"3002","bytServerType":"‘ + DevType1 + ‘","nFS-Port":"‘ + DevPort1 + ‘","szManageIP1":"‘ + plus.storage.getItem(‘szManageIP1‘) + ‘","hls-list-size":"5","szManageIP2":"127.0.0.1","hls-resolution":‘+document.getElementById(‘changeGe‘).value+‘}‘,type: ‘post‘, //HTTP請求類型timeout: 100000, //超時時間設置為10秒;dataType: "json",headers: {},success: function(data1) {sessionid = data1.sessionid;Media = document.getElementById("video2");Media.src = plus.storage.getItem(‘videoPath‘) + data1.videosrc;},error: function(xhr, type, errorThrown) {}});}
mui.back = function() {var btn = ["確定", "取消"];mui.confirm(‘確認退出當前視頻播放?‘, ‘是否退出‘, btn, function(e) {if(e.index == 0) {mui.ajax(plus.storage.getItem(‘videoPath‘) + ‘/VideoStop.php‘, {data: ‘{"sessionid":"‘ + sessionid + ‘"}‘,type: ‘post‘, //HTTP請求類型timeout: 100000, //超時時間設置為10秒;dataType: "json",headers: {},success: function(data) {
},error: function(xhr, type, errorThrown) {}});mui.currentWebview.close();}});}</script></body>
</html>

自定義video控制欄,移動端可行