<!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> 标签：canvas,const,height,width,video,document,绘制 From： https://www.cnblogs.com/xushan03/p/16746211.html