canvas绘制video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.videoBox {
width: 100%;
height: 50vh;
position: relative;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
img {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
#btn {
position: absolute;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
text-align: center;
}
canvas {
width: 100%;
height: 50vh;
}
video {
display: none;
}
</style>
</head>
<body>
<div class="videoBox">
<img id="poster" src="https://difluid-resources.oss-accelerate.aliyuncs.com/v1.0.4/images/product/coffee/banner.jpg" alt="">
<video id="video"
preload="auto"
playsinline="true"
x-webkit-airplay="true"
webkit-playsinline="true"
x5-video-player-type="h5"
x-video-orientation="h5"
x5-video-player-fullscreen="true"
muted="false"
src="https://difluid-resources.oss-accelerate.aliyuncs.com/v1.0.4/video/product/coffee/en/咖啡浓度仪.mp4"></video>
<canvas id="canvas"></canvas>
<div id="btn">点击</div>
</div>
<script>
const video = document.getElementById('video');
const palyBtn = document.getElementById('btn');
const canvas = document.getElementById('canvas');
const poster = document.getElementById('poster')
// 初始化(创建)canvas
const ctx = canvas.getContext('2d')
// 获取可视宽高
const screen_W = window.innerWidth || document.body.clientWidth
const screen_H = window.innerHeight || document.body.clientHeight
// 设置画布宽高（画布宽高，最好是根据设计视频所做实际宽高）
canvas.width = screen_W * 3 // 获取屏幕宽度作为canvas的宽度 这个设置的越大，画面越清晰（相当于绘制的图像大，然后被css缩小）
canvas.height = screen_H * 3 + 12
// 绘制视频
palyBtn.addEventListener('click', function (e) {
e.preventDefault()
poster.style.display = 'none'
// 绘制背景
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
if (video.paused) {
video.play()
} else {
video.pause()
}
})
video.addEventListener('play', playCallBack)
function playCallBack() {
if (video.paused) {
return;
}
captureFrame();
setTimeout(playCallBack, 40);
}
function captureFrame() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
}
</script>
</body>
</html>
