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

阅读 77

2022-03-23

前端视频截图的方法

	<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>

在这里插入图片描述

精彩评论(0)

0 0 举报