自定义video控制栏，移动端可行
Posted kapokkopak
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义video控制栏，移动端可行相关的知识，希望对你有一定的参考价值。
<!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控制栏，移动端可行的主要内容，如果未能解决你的问题，请参考以下文章