h5视频，获取视频第一帧当视屏封面图片。

最新推荐文章于 2024-06-04 09:39:18 发布

邱志刚

最新推荐文章于 2024-06-04 09:39:18 发布

阅读量6.5k

点赞数 2

分类专栏： js技术

本文链接：https://blog.csdn.net/qq_42957741/article/details/105866059

版权

js技术专栏收录该内容

41 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
</head>
<style>
    #video{
        width: 300px;
        height: 300px;
    }
</style>
<body>
<video id="video" controls="controls">
    <!-- 视频连接替换自己视频就Ok了 -->
     <source src="https://vdept.bdstatic.com/716d746761353946755241424e454665/557a484331707262/438b39bbc40bd2605b71d6ec038a95616652ea7dbc72c2311333fe3bf46f9d1f9ad83670883155e357041bbf119ad688.mp4?auth_key=1588245759-0-0-d40adf36396b7a5007b67728edd4d835">
</video>
<div id="output"></div>
<script type="text/javascript">
(function(){
var video, output;
    output = document.getElementById("output");
    var canvas = document.createElement('canvas')
    var img = document.createElement("img");
    video = document.getElementById('video')
    video.setAttribute('crossOrigin', 'anonymous')
    canvas.width = video.clientWidth
    canvas.height = video.clientHeight
    video.onloadeddata = (() => {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
    var dataURL = canvas.toDataURL('image/png')
        img.src = dataURL;
        img.width = 400;
        img.height = 300;
        output.appendChild(img);
        console.log(img)
   })

})();
</script>
</body>
</html>