从视频中截取首帧作为封面图并展示出视频及封面图（canvas）

最新推荐文章于 2024-09-30 16:29:47 发布

GossoonLi

最新推荐文章于 2024-09-30 16:29:47 发布

阅读量7.1k

点赞数

分类专栏： script

本文链接：https://blog.csdn.net/shang_GQ/article/details/99342876

版权

本文介绍如何利用HTML5的canvas元素从视频中截取首帧，并将其作为封面图展示。同时讨论了可能遇到的图片跨域问题及其解决方案。

摘要由CSDN通过智能技术生成

html

<p class="clearfix">
	<label>视频文件：</label>
	<span>
		<video id="video" controls="controls" src="http://{
  {model.videoUrl}}">
			您的浏览器不支持 video 标签。
		</video>
		<span>
		    <input id="file" type="file" value="" name="file" style="display: none;" onchange="myFunction()"/>
		    <label style="width: 100%;" for="file">上传视频</label>
		</span>
	 </span>
</p>
<!--在网上查的是加上 crossorigin="anonymous" 就可以避免跨域的问题 但是我自己测试的还是不行 可能是我们后台那边没有添加吧 有时间让后台在请求头处加一下试试 如果可以的话在更新-->
<img id="img" crossorigin="anonymous" style="float: left;" src="../../img/aaa.png" />