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

時間 2019-11-09
原文原文鏈接
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。