vue 获取上传视频的第一帧做为视频封面

最新推荐文章于 2024-08-07 16:41:51 发布

＊且听风吟

最新推荐文章于 2024-08-07 16:41:51 发布

阅读量3.6w

点赞数 1

分类专栏： # Vue 2.x 文章标签： vue.js 音视频 javascript

本文链接：https://blog.csdn.net/HH18700418030/article/details/121404398

版权

这篇博客介绍了如何在Vue.js应用中，通过canvas截取上传视频的第一帧作为视频封面。文章详细阐述了利用canvas的绘图环境、getContext('2d')方法以及toDataURL()方法来实现这一功能。

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

上一篇文章记录了vue上传视频，接下来，需要在上传成功后截取视频第一帧做为视频封面。

截取视频第一帧

具体实现如下：

<template>
  <div>
    <div v-if="mediaList&&mediaList[0]&&mediaList[0].url">
      <video :src="mediaList[0].url" style="width:320px;height:200px;" controls="controls" id="upvideo">您的浏览器不支持视频播放</video>
    </div>
    <canvas id="mycanvas" style="display: none"></canvas>
  </div>
</template

最低0.47元/天解锁文章

＊且听风吟

关注

1
点赞
踩
42

收藏

觉得还不错? 一键收藏
11
评论
vue 获取上传视频的第一帧做为视频封面

//截取视频第一帧作为播放前默认图片 findvideocover(url,file) { const video = document.getElementById("upvideo"); // 获取视频对象 // const video = document.createElement("video") // 也可以自己创建video video.src=url // url地址 url跟视频流是一样的 var canvas
复制链接

扫一扫

专栏目录