vue 截取video第一帧作为封面

最新推荐文章于 2024-10-14 14:56:50 发布

王新新2255

最新推荐文章于 2024-10-14 14:56:50 发布

阅读量5.3k

点赞数 3

分类专栏： vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_60336681/article/details/125664388

版权

本文介绍在Vue.js项目中如何获取视频的第一帧作为封面图片，适用于前端开发，实现视频预览功能。

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

说明：项目中需要视频的封面图片，以下是如何截取视频第一帧作为封面，如需截取多个视频，按自己需要代入即可。

<template>
  <div class="about">
    <div v-if="videoUrl">
      <video
        :src="videoUrl"
        style="width:320px;height:200px;"
        controls="controls"
        id="upvideo"
      >您的浏览器不支持视频播放</video>
    </div>
    <canvas
      id="mycanvas"
      style="display: none"
    ></canvas>

    <img v-if="imgsrc" :src="imgsrc"  style="margin-top:50px;">
  </div>
</template>
<script>
export default {
  data() {
    return {
      videoUrl: "http://video.xbbzp.com/llSEAeCVtYceYvivaDJ6jz3287WX",
      imgsrc:''
    };
  },
  mounted () {
    this.findvideocover(this.videoUrl,{url:''})
  },
  methods: {
    //截取视频第一帧作为播放前默认图片
    findvideocover(url, file) {