前端视频截图的方法canvas.drawImage()

最新推荐文章于 2024-07-17 15:18:17 发布

呵呵的牛

最新推荐文章于 2024-07-17 15:18:17 发布

阅读量2.7k

点赞数 3

分类专栏： js 文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/weixin_43723051/article/details/123685194

版权

js 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

前端视频截图的方法

前端视频里面截图可以通过canvas.drawImage()方法去实现截取视频中的某一个时间的截图的图片。

	<video id="video" controls width="500" height="200" autoplay>
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/ogg'>
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/webm'>
    </video>
    <canvas id="myCanvas"></canvas>
    <script>
        var myCanvas = document.getElementById('myCanvas');
        var c = myCanvas.getContext("2d")
        var video = document.getElementById('video');
        setTimeout(() => {
            myCanvas.height = video.height
            myCanvas.width = video.width
            //在画布上定位图像，并规定图像的宽度和高度：
            c.drawImage(video, 0, 0, myCanvas.width, myCanvas.height)
        }, 3000);
    </script>

在这里插入图片描述