<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>播放器截图示例</title> </head> <body> <video id="video" controls="controls" width="460" height="270" crossorigin="anonymous"> <!-- 请替换为实际视频地址 --> <source src="请替换为实际视频地址" /> </video> <button onclick="captureVideo()">截图</button> <script> let video = document.querySelector("#video"); let canvas = document.createElement("canvas"); let img = document.createElement("img"); img.crossOrigin = ""; let ctx = canvas.getContext("2d");
function captureVideo() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; ctx.drawImage(video, 0, 0, canvas.width, canvas.height); img.src = canvas.toDataURL(); document.body.append(img); } </script> </body> </html>
5.3 如何实现 Canvas 播放视频
使用 Canvas 播放视频主要是利用 ctx.drawImage(video, x, y, width, height) 来对视频当前帧的图像进行绘制,其中 video 参数就是页面中的 video 对象。所以如果我们按照特定的频率不断获取 video 当前画面,并渲染到 Canvas 画布上,就可以实现使用 Canvas 播放视频的功能。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>使用 Canvas 播放视频</title> </head> <body> <video id="video" controls="controls" style="display: none;"> <!-- 请替换为实际视频地址 --> <source src="请替换为实际视频地址" /> </video> <canvas id="myCanvas" width="460" height="270" style="border: 1px solid blue;" ></canvas> <div> <button id="playBtn">播放</button> <button id="pauseBtn">暂停</button> </div> <script> const video = document.querySelector("#video"); const canvas = document.querySelector("#myCanvas"); const playBtn = document.querySelector("#playBtn"); const pauseBtn = document.querySelector("#pauseBtn"); const context = canvas.getContext("2d"); let timerId = null;
function draw() { if (video.paused || video.ended) return; context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(video, 0, 0, canvas.width, canvas.height); timerId = setTimeout(draw, 0); }
playBtn.addEventListener("click", () => { if (!video.paused) return; video.play(); draw(); });
pauseBtn.addEventListener("click", () => { if (video.paused) return; video.pause(); clearTimeout(timerId); }); </script> </body> </html>
以上就是前端H5 Video常见使用场景简介的详细内容,更多关于前端H5 Video常见场景的资料请关注脚本之家其它相关文章!
来源:脚本之家
链接:https://www.jb51.net/html5/741755.html
(编辑:ASP站长网)
|