h5获取视频的第一帧

最新推荐文章于 2024-07-30 18:07:05 发布

程序猿学社

最新推荐文章于 2024-07-30 18:07:05 发布

阅读量1.3w

点赞数 2

分类专栏：前端系统学习文章标签： h5获取视频第一帧获取视频第一帧

本文链接：https://blog.csdn.net/qq_16855077/article/details/91986634

版权

前端系统学习专栏收录该内容

3 篇文章 2 订阅

订阅专栏

1.需求

网站前端开发过程，可能有这样的场景，需要显示一个视频图片列表，点击图片，直接播放视频。

实现思路：1.首先定义发请求获取视频列表list(多个视频video标签),包含图片的url地址

2.对每一个video,都创建一个图片与之对应

2.前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
</head>
<body>
<video id="video" controls="controls">
<source src="http://localhost:8888/data/1111.mp4">
</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);
  })

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

http://localhost:8888/data/1111.mp4 这个地址是通过nginx转了一下，增加了跨域代码

如果改成本地路径就报如下错误。