首頁 > 開發者 > 手機程式開發

自訂video控制欄，移動端可行

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：server   pat   listener   hid   html   meta   null   orm   abs   

<!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‘,‘‘);})//通過時間返回需要展示的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);}}</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控制欄，移動端可行

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More