首页 > 代码库 > 自定义video控制栏，移动端可行
自定义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="http://www.mamicode.com/css/mui.min.css">
<link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/img/map.jpg" id="preload" class="preload" />
<div class="player mui-hidden" id="player">
<video id="video2" autoplay="autoplay" poster="../../img/map.jpg" src="http://www.mamicode.com/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="http://www.mamicode.com/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 = http://www.mamicode.com/canvas.toDataURL();"__"+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="http://www.mamicode.com/css/mui.min.css"><link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/0">默认</option><option value="http://www.mamicode.com/1">CIF格式</option><option value="http://www.mamicode.com/2">QCIF格式</option></select></div><img src="http://www.mamicode.com/img/map.jpg" id="preload" class="preload" /><div class="player mui-hidden" id="player"><video id="video2" autoplay="autoplay" poster="../../img/map.jpg" src="http://www.mamicode.com/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="http://www.mamicode.com/#">切换主码流</button></div><script src="http://www.mamicode.com/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 = http://www.mamicode.com/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 = http://www.mamicode.com/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 = http://www.mamicode.com/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控制栏，移动端可行