0
点赞
收藏
分享

微信扫一扫

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

左小米z 2022-03-23 阅读 77

前端视频截图的方法

	<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 条评论