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.clientWidthcanvas.height = video.clientHeightvideo.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转了一下，增加了跨域代码

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

到这里，获取h5视频的第一帧的功能就实现了，如有问题，欢迎加群，一起沟通，或者在下方留言

如果你热衷技术，喜欢交流，欢迎加入我们！

欢迎关注公众号，免费领取各种学习视频，学习相关java各个技术点面试知识，有相关学习疑问或者面试困惑,也可以通过公众号私信博主

h5获取视频的第一帧相关推荐

php 获取视频首帧,PHP获取视频的第一帧与时长
//获得视频文件的缩略图 function getVideoCover($file,$time,$name) { if(empty($time))$time = '1';//默认截取第一秒第一帧 $s ...
java 取视频第一帧,java获取视频的第一帧
//------------maven配置文件--------------- org.bytedeco javacv 0.8 /** * 获取指定视频的帧并保存为图片至指定目录 * @param vi ...
根据视频地址获取视频的第一帧画面做为封面 IllegalArgumentException
关于这一类的文章网上也是很多的,只是在复制黏贴别人代码的时候竟然直接崩溃了--这就很蛋疼了! public Bitmap getBitmapFormUrl(String url) {MediaMeta ...
根据视频地址获取视频的第一帧画面做为封面
关于这一类的文章网上也是很多的,只是在复制黏贴别人代码的时候竟然直接崩溃了--这就很蛋疼了! public Bitmap getBitmapFormUrl(String url) {MediaMeta ...
Android获取视频的第一帧照片
Android录完视频(视频)获取第一帧照片 1.应用场景当你录完视频后.或者本来就有一部视频,在进行展示的时候需要展示封面,但是封面展示需要图片,这个时候就需要开始从视频里面获取第一帧图片. 2. ...
java 获取第一帧_java获取视频的第一帧
//------------maven配置文件--------------- org.bytedeco javacv 0.8 /** * 获取指定视频的帧并保存为图片至指定目录 * @param vi ...
如何获取网络视频（或者说后台返回视频URL）第一帧图片以及获取本地视频的第一帧图片
在项目开发的时候,有可能会有这样的一种需求:有一段视频需要展示给用户,在界面上先展示视频上的某一帧图片,用户点击的时候再去获取视频资源进行播放.这时,服务器会先给我们返回视频的url,这个时候就需要通 ...
h5 video 手机显示第一帧_解决h5嵌入app后video标签poster不能显示视频第一帧（表现为空白）...
这里我们先来描述一下问题,页面中使用了video标签,按照video标签的官方介绍下图介绍: 没有设置poster的情况下在浏览器中我们可以看到视频的第一帧,页面效果如下图左图所示:但是嵌入App后, ...
查看视频的IPB帧，IPB帧编码顺序，视频的第一帧图片
> 如何查看视频的IPB帧 Android, 如何获取视频的每一帧的信息视频 = 图片.图像(摄像头) + 声音(麦克风) : 谷歌官方给我们的提供的api接口类:MediaMetadataR ...
Java代码实现上传视频获取视频某一帧作为截图封面(二)
上一个文章讲了Java代码实现上传视频获取视频某一帧作为截图封面的一种方法,现在讲述第二种方法.为什么要在这里讲这种方法呢?第一.这种方法生成的图片占用的空间更小第二.这种方法可以获取很多信息一.根 ...

h5获取视频的第一帧

1.需求

2.前端代码

h5获取视频的第一帧相关推荐

最新文章

热门文章