最近在做手机端上面播放视频的项目，但是在安卓上面，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>