上传视频要提供视频封面（视频封面必填），这是在开发中实际问题。封面可以用户自己制作并上传，但这样脱离网站，体验不好，常见的处理方案就是用户未选择或上传封面时，自动截取视频第一帧作为封面，但这样并不友好。因此考虑视频上传后，在播放中由人员自行截取画面作为视频封面。
简单效果如图：
前端代码如下：
<template>
<div>
<video src="https://{{视频地址}}.mp4"
crossOrigin="Anonymous" controls style="width:300px;"></video>
<img :src="imgSrc">
<div>
<el-button @click="cutPicture">
截图
</el-button>
</div>
<canvas id="myCanvas" width="343" height="200"></canvas>
</div>
</template>
<script>
export default {
name: 'video',
data () {
return {
imgSrc: '',
videoData:{},
}
},
methods: {
//截取当前帧的图片
cutPicture () {
let self = this
var v = document.querySelector('video')
let canvas = document.getElementById('myCanvas')
// canvas.setAttribute("crossOrigin",'Anonymous')
var ctx = canvas.getContext('2d')
ctx.drawImage(v, 0, 0, 343, 200)
var oGrayImg = canvas.toDataURL('image/jpeg')
// this.imgSrc = oGrayImg
// axios请求，将截图传给后端API
this.$axios.post('test/upload', {file: oGrayImg})
},
}
}
</script>
原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/4116.html
相关推荐
-
云分发 证书管理 UCDN
摘要：证书管理证书管理证书管理当您需要使用加速时，需要上传证书。证书管理列表证书管理列表证书管理列表输入证书名称，上传授权证书文件授权私钥文件机构证书文件。 证书管理 当您需要使用…
-
武汉服务器托管要如何选择？
摘要：服务器托管是非常讲究的，那么，武汉服务器托管要如何选择呢由于武汉服务器托管，除了要负责一开始的托管服务购买之外，无需担心其他的衍生性工作。 服务器托管是非常讲究的，那么，武汉…
-
什么是easystack架构？
摘要：是开源架构，和传统的管理不同，通过基础架构层和平台服务层的融合，实现资源与服务的统一编排统一权限以及统一管理，能够支撑传统应用架构或新一代微服务应用架构，加速企业的创新与成长…
-
UCloud官网注册及账号机构认证（高校）流程
摘要：本篇文章讲解下如何在官网完成账号注册并进行机构认证高校的实名认证相关步骤流程。官网激活提示激活邮件内容账号实名认证机构认证高校登录。比如，下图，小设备不在校区所在地进行实名就…
-
监控视图 Kafka消息队列 UKafka
摘要：监控视图监控视图监控视图集群监控集群监控提供小时至天多个维度的集群流入流出数据量和消息个数监控，生产者消费者监控数据，以及相关监控数据。节点监控节点监控提供每个上的磁盘网卡，…
-
企业机房有哪些缺点呢？
摘要：维护困难企业必须以较高成本雇佣较高技术能力的工程师进行长期维护环境机房环境没有一个好的机房运营环境，服务器使用寿命会缩短，并且容易出现故障，造成数据流失或损毁。 互联网发达的…
-
Centos7下宝塔面板使用redis部署NodeBB论坛程序
摘要：使用默认配置，请按回车。数据库选择，填写，还会要求填写管理员账号密码等。如果是在下使用数据库，那么整个过程也差不多，只是需要配置下数据库，其他都一样。 1、简介 项目：htt…
-
《C语言入门》简单水仙花问题求解
摘要：目录问题问题求解及代码实现问题描述求出之间的所有水仙花数并输出。水仙花数是指一个位数，其各位数字的次方之和确好等于该数本身，如，则是一个水仙花数。 目录 1.问题 2.问题求…
-
InfluxDB专业术语 时序数据库 UTSDB
摘要：在的数据结构中是必须的且不会被索引。当你创建一个的时候，会自动创建一个叫做的保留策略，默认为永久有效数据结构的集合，一个特定的由，和组成。数据结构中的键值对，在的数据中是可选…