当前位置: > > > HTML5 - Canvas的使用样例9(绘制视频帧,video视频截图)

HTML5 - Canvas的使用样例9(绘制视频帧,video视频截图)

前面讲到使用 drawImage() 方法可以绘制图片。这个图片可以是临时创建的图片对象,也可以是页面已存在的 <img> 元素。
除了绘制图片,drawImage() 还可以绘制整个 <canvas> 元素(不是指当前这个),也可以绘制目前正在播放的 <video> 元素。

比如下面样例,当点击“截图”时就会捕获正在播放视频的当前帧画面,然后把该画面绘制到画布上。
原文:HTML5 - Canvas的使用样例9(绘制视频帧,video视频截图)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>hangge.com</title>
 </head>
 <style>
    canvas {
        border: 1px dashed black;
    }
 </style>
 
 <script>
    function draw() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        var video = document.getElementById("videoPlayer");
        context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
    }
</script>
 <body>
     <video id="videoPlayer" src="hangge.mp4" controls width="200" height="150"></video>
     <button onclick="draw()">截图</button>
     <canvas id="myCanvas" width="300" height="180">
 </body>
</html>
评论0