<!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>
