本文主要在vue中的写法,原生可以参考编写.
1.使用input选择视频.
<input type="file" style="display:none;" ref="vExampleFile" @change="vExampleUpload" capture="camcorder" accept="video/*"/>
2.使用video标签接收视频并读取视频
<video id="video" ref="videos" type="video/mp4"
style="width: 100%;height: 100%"
controls="controls"
preload="auto" :src="bvideoUrl"
@loadeddata="loadeddata"
webkit-playsinline="true"
autoplay
playsinline="true"
x5-video-player-type="h5"
x5-playsinline="true"
x5-video-player-fullscreen='true'
x-webkit-airplay="allow"
x5-video-orientation="portraint">
您的浏览器暂不支持播放该视频,请升级至最新版浏览器。
</video>
3. 读取视频信息后执行
loadeddata: function() {
let that = this
let video = that.$refs.videos
let scale = 0.3 // 压缩比率 0.1~1
let canvas = document.createElement('canvas')
let width = video.videoWidth*scale
let height = video.videoHeight*scale
console.log(width, height)
const MIN_WIDTH = 375
if (width < MIN_WIDTH) {
// 做最小值处理
height = height*MIN_WIDTH/width
width = MIN_WIDTH
}
canvas.width = width
canvas.height = height
canvas.getContext('2d').drawImage(video, 0, 0, width, height)
let image = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream')
// 输出视频封面
this.speedImgUrl = image
}
本文来自博客园,作者:ljyyjj,转载请注明原文链接:https://www.cnblogs.com/ljyyjj/p/12558949.html