抓住自己最有兴趣的东西，由浅入深，循序渐进地学……
最近在做手机端上面播放视频的项目，但是在安卓上面，video的播放是脱离页面，置于最顶层的，所以带来了很多问题，为了解决这个问题，查看了多方资料，写了下面简单的demo，方便以后使用。
下面就是运用canvas重绘video视频。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640,user-scalable=no"/>
<title>X5内核浏览器video自动全屏解决办法-canvas</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
overflow:hidden!important;
}
.content{
position: absolute;
width: 100%;
height: 1136px;
top: 50%;
transform: translate3d(0, -50%, 0);
}
#play{
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 100px;
height: 100px;
line-height: 100px;
font-size: 28px;
border: 1px solid #000;
color: #000;
text-align: center;
border-radius: 50%;
}
#video{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display:none;
}
#myCanvas{
display: block;
}
</style></head><body>
<div class="content">
<div id="play">播放</div>
<video id="video" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" src="movie.mp4" preload></video>
<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag. </canvas>
</div>
<script type="text/javascript">
var v = document.getElementById('video'); var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d');
document.getElementById("myCanvas").width = 640;
document.getElementById("myCanvas").height = 1136;
var cwidth = document.getElementById('myCanvas').offsetWidth; var cheight = document.getElementById('myCanvas').offsetHeight; // 初始化定时器
var i=null;
document.getElementById("play").addEventListener("click",function(){
document.getElementById('video').play()
}); // 播放 v.addEventListener("play", function() {
document.getElementById("play").style.cssText = " display:none "; var i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, cwidth, cheight);
}, 20); // 每0.02秒画一张图片 }, false); // 暂停 v.addEventListener("pause", function() {
window.clearInterval(i); // 暂停绘画 }, false); // 结束 v.addEventListener("ended", function() {
clearInterval(i);
}, false); </script></body></html>
