最近在做手机端上面播放视频的项目，但是在安卓上面，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>
原文地址：https://www.cnblogs.com/winteronlyme/p/9002002.html
时间： 2024-12-13 07:43:33