vue 截取video第一帧作为封面

本文介绍在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) {
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值