vue项目使用@ffmpeg/ffmpeg在客户端上传本地视频并处理的开发记录
1、安装包2、页面上传方法功能vue页面<input v-show="false"id="pop_video" type="file" accept="video/mp4" capture="camcorder" @change="getVideo" name="fileTrans" ref="file" value="">对应方法getVideo (event) {if (this.
·
目前实现的功能：处理本地，线上URL视频，视频加水印，分离音频、截取下载某一帧图片，调整输出分辨率，导出到VOD或本地，替换视频背景音。
浏览器版本请使用91，不要使用最新的，否则连测试都不行
不支持safari浏览器！！！视频文件在操作过程中使用blob地址
纯前端处理视频文件，由于文件是写在内存文件里面的，所以前端处理一些视频是没有问题的，项目最终结果差不多如下，只能处理小视频，上G的视频应该会很慢的而且机器内存可能满足不了需求。
1、安装包
2、页面上传方法功能
vue页面
<input v-show="false" id="pop_video" type="file" accept="video/mp4" capture="camcorder" @change="getVideo" name="fileTrans" ref="file" value="">
对应方法
getVideo (event) {
if (this.player) {
this.player.dispose()
}
const file = event.target.files[0]
if (file.type !== 'video/mp4') {
alert('请选择MP4格式视频！')
return
}
this.options.sources[0].src = ''
const vm = this
console.info(event)
console.info(file)
if (window.FileReader) {
var reader = new FileReader()
reader.readAsDataURL(file)
// 监听文件读取结束后事件
reader.onloadend = function (e) {
vm.fileObj = e.target.result
vm.options.sources[0].src = e.target.result
vm.$nextTick(() => {
vm.initPlay()
})
// console.log(e.target.result) // e.target.result就是最后的路径地址
}
}
}3、对应的ffmpeg编码加水印导出
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
const ffmpeg = createFFmpeg({ log: true }) async test () {
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
}
ffmpeg.setProgress(({ ratio }) => {
console.log(ratio)
/*
* ratio is a float number between 0 to 1.
*/
})
ffmpeg.FS('writeFile', 'overlay.png', await fetchFile('./overlay.png'))
ffmpeg.FS('writeFile', 'a.mp4', await fetchFile(this.fileObj))
// ffmpeg.FS('writeFile', 'a.mp4', await fetchFile('./a.mp4'))
await ffmpeg.run(
'-i',
'a.mp4',
'-i',
'overlay.png',
'-filter_complex',
"[0:v][1:v] overlay=10:10:enable='between(t,0,20)'",
'b.mp4'
)
console.info(ffmpeg.FS('readFile', 'b.mp4'))
console.info(fs)
this.offerFileAsDownload('b.mp4', ffmpeg)
// await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'b.mp4'))
process.exit(0)
},
4、将上传处理好的文件上传至vod
async uploadCos (fileObj) {
const vm = this
try {
const result = await this.up({
files: [fileObj],
dirType: 'ClientUsr',
onprogress: (file) => {
vm.percent = file.percent ? parseInt(file.percent * 100) : 0
}
})
vm.newUrl = result.video.url
alert('上传文件成功！' + result.video.url)
} catch (err) {
alert('上传文件失败' + err)
}
},
async test () {
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
}
ffmpeg.setProgress(({ ratio }) => {
console.log(ratio)
/*
* ratio is a float number between 0 to 1.
*/
})
ffmpeg.FS('writeFile', 'overlay.png', await fetchFile('./overlay.png'))
ffmpeg.FS('writeFile', 'a.mp4', await fetchFile(this.fileObj))
// ffmpeg.FS('writeFile', 'a.mp4', await fetchFile('./a.mp4'))
await ffmpeg.run(
'-i',
'a.mp4',
'-i',
'overlay.png',
'-filter_complex',
"[0:v][1:v] overlay=10:10:enable='between(t,0,20)'",
'b.mp4'
)
console.info(ffmpeg.FS('readFile', 'b.mp4'))
// this.offerFileAsDownload('b.mp4', ffmpeg)
const files = new window.File(
[new Blob([ffmpeg.FS('readFile', 'b.mp4')])],
'b.mp4',
{ type: 'video/mp4' }
)
this.uploadCos(files)
// await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'b.mp4'))
process.exit(0)
},5、将上传的视频解析成一帧一帧的作为视轨
ffmpeg -i 2.mp4 -r 1 -ss 0 -vframes 5 -f image2 -s 352x240 image-%02d.jpegvue代码如下
// 上传视频后解析视频帧
async getVideoFrames () {
this.videoInfo.waterFrames = []
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
}
// 计算10个对应的时间点
// const averageDura = this.videoInfo.baseInfo.duration / 10
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
// console.info(ffmpeg.FS('readFile', 'frame.png'))
await ffmpeg.run('-i', 'source.mp4', '-r', '1', '-ss', '0', '-vframes', '15', '-f', 'image2', '-s', '88*50', 'image-%02d.png')
// ffmpeg -i 2.mp4 -r 1 -ss 0 -vframes 5 -f image2 -s 352x240 image-%02d.jpeg
for (let i = 0; i < 15; i++) {
// await ffmpeg.run('-i', 'source.mp4', '-y', '-f', '-ss', averageDura * i, '1', 'frame.png')
let temp = i + 1
if (temp < 10) {
temp = '0' + temp
}
this.videoInfo.waterFrames.push(this.arrayBufferToBase64(ffmpeg.FS('readFile', 'image-' + temp + '.png')))
console.info(this.videoInfo.waterFrames)
}
},用的需要将uint8array图片转base64显示图
arrayBufferToBase64 (array) {
array = new Uint8Array(array)
var length = array.byteLength
var table = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
'w', 'x', 'y', 'z', '0', '1', '2', '3',
'4', '5', '6', '7', '8', '9', '+', '/']
var base64Str = ''
for (var i = 0; length - i >= 3; i += 3) {
var num1 = array[i]
var num2 = array[i + 1]
var num3 = array[i + 2]
base64Str += table[num1 >>> 2] +
table[((num1 & 0b11) << 4) | (num2 >>> 4)] +
table[((num2 & 0b1111) << 2) | (num3 >>> 6)] +
table[num3 & 0b111111]
}
var lastByte = length - i
if (lastByte === 1) {
var lastNum1 = array[i]
base64Str += table[lastNum1 >>> 2] + table[((lastNum1 & 0b11) << 4)] + '=='
} else if (lastByte === 2) {
// eslint-disable-next-line no-redeclare
var lastNum1 = array[i]
var lastNum2 = array[i + 1]
base64Str += table[lastNum1 >>> 2] +
table[((lastNum1 & 0b11) << 4) | (lastNum2 >>> 4)] +
table[(lastNum2 & 0b1111) << 2] +
'='
}
return base64Str
},效果图如下
截取帧参考的内容
使用ffmpeg从视频中截取图像帧
1.问题
从视频中抽取图像帧，并按照指定命名规则保存。
2. 环境
centos 6.3 + ffmpeg 0.6.5
3. 方法
1）安装ffmpeg
ffmpeg 位于rpmforge中，如果你的centos没有配置rpmforge，请先配置rpmforge。
yum -y install ffmpeg
并安装对应的依赖包。
2）使用场景
1. ffmpeg -i inputfile.avi -r 1 -f image2 image-%05d.jpeg
-r 指定抽取的帧率，即从视频中每秒钟抽取图片的数量。1代表每秒抽取一帧。
-f 指定保存图片使用的格式，可忽略。
image-%05d.jpeg，指定文件的输出名字。
2. ffmpeg -i inputfile.avi -r 1 -s 4cif -f image2 image-%05d.jpeg
4cif 代表帧的尺寸为705x576.其他可用尺寸如下。
3. ffmpeg -i inputfile.avi -r 1 -t 4 -f image2 image-%05d.jpeg
-t 代表持续时间，单位为秒。
4. ffmpeg -i inputfile.avi -r 1 -ss 01:30:14 -f image2 image-%05d.jpeg
-ss 指定起始时间
5.ffmpeg -i inputfile.avi -r 1 -ss 01:30:14 -vframes 120 4cif -f image2 image-%05d.jpeg
-vframes 指定抽取的帧数
踩坑：视频缩放计算分辨率报错"width / height not divisible by 2"
出现该错误的原因是在于：视频的宽度必须是2的倍数，高度必须是2的倍数
将视频解析成一帧一帧的提高效率，不适用ffmpeg进行解析帧
参考代码
var video = document.createElement("video");
var canvas = document.getElementById("prevImgCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
video.addEventListener('loadeddata', function() {
reloadRandomFrame();
}, false);
video.addEventListener('seeked', function() {
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
}, false);
var playSelectedFile = function(event) {
var file = this.files[0];
var fileURL = URL.createObjectURL(file);
video.src = fileURL;
}
var input = document.querySelector('input');
input.addEventListener('change', playSelectedFile, false);
function reloadRandomFrame() {
if (!isNaN(video.duration)) {
var rand = Math.round(Math.random() * video.duration * 1000) + 1;
video.currentTime = rand / 1000;
}
}
<input type="file" accept="video/*" />
<input type="submit" onClick="reloadRandomFrame()" value="load random frame" /><br/>
<canvas id="prevImgCanvas">Your browser does not support the HTML5 canvas tag.</canvas> 写出的vue代码如下
async extractFramesFromVideo (videoUrl) {
const vm = this
var video = document.createElement('video')
var canvas = document.createElement('canvas')
canvas.width = 88
canvas.height = 50
video.addEventListener('loadeddata', function () {
for (let i = 0; i < 14; i++) {
const temp = parseInt(video.duration / 14)
setTimeout(() => {
if (!isNaN(video.duration)) {
// var rand = Math.round(Math.random() * video.duration * 1000) + 1
video.currentTime = temp * i === 0 ? 0.1 : temp * i
}
}, 500 * i)
}
}, false)
video.addEventListener('seeked', function () {
var context = canvas.getContext('2d')
context.drawImage(video, 0, 0, canvas.width, canvas.height)
// 转换成base64形式
const img = canvas.toDataURL('image/jpeg') // 这个就是图片的base64
vm.videoInfo.waterFrames.push(img)
}, false)
video.src = videoUrl
},总结
该项目差不多告一段落了，优化了解析帧，视频最终上传至vod,方法里面保存了下载到本地的方法
最终代码如下
VideoCut组件
<template>
<div class="video-cut" crossorigin=“anonymous”>
<!-- <span v-tip="123">2222</span>
<i class="iconfont icon-lkingboxiaojianzi"></i>-->
<template v-if="!options.sources[0].src">
<input v-show="false" id="pop_video" type="file" accept="video/mp4" @change="getVideo" name="fileTrans" ref="file"
value="">
</template>
<input v-show="false" id="pop_pic" type="file" accept="image/*" @change="getPic" name="filePic" ref="filePic"
value="">
<div style="padding: 30px 40px;">
<div class="content" v-if="options.sources[0].src">
<!--头部菜单-->
<div class="block-top">
<div class="toolbar">
<div class="tool-item" @click="changeCurrentType('cut')" :class="{'active': currentType == 'cut'}" v-tip.top.dark.hover="'裁剪视频'"><i class="iconfont icon-cut"></i><span
class="i-name">裁剪</span></div>
<div class="tool-item" @click="changeCurrentType('snapshot')" :class="{'active': currentType == 'snapshot'}" v-tip.top.dark.hover="'屏幕快照'"><i class="iconfont icon-post_pic"></i></div>
<div class="tool-item" @click="changeCurrentType('addimg')" :class="{'active': currentType == 'addimg'}" v-tip.top.dark.hover="'上传水印图片'"><i
class="iconfont icon-ai-up-img"></i></div>
<div class="tool-item" @click="changeCurrentType('audio')" :class="{'active': currentType == 'audio'}" v-tip.top.dark.hover="'音频'"><i
class="iconfont icon-yinpinbofang"></i></div>
</div>
<div class="toolbar-right">
<div class="reset tool-item" v-tip.top.dark.hover="'回到初始状态'" @click="reset">
<i class="iconfont icon-chexiao" style="margin-right: 5px;"></i>重置
</div>
<div class="tool-item" v-tip.top.dark.hover="'关闭项目'" @click="options.sources[0].src = ''"><i class="iconfont icon-guanbi111"></i></div>
</div>
</div>
<!--视频部分-->
<div class="video-content">
<div class="video_box">
<div class="video-name">{{videoInfo.baseInfo.name}}</div>
<div style="position: relative">
<video ref="videoPlayer" id="videoPlayer" class="video-js"></video>
<!--因为视频大小是动态的，所以dragable-area的大小也是不断变化的-->
<div class="dragable-area" :style="{'width': videoInfo.baseInfo.width + 'px', 'left': 'calc((100% - '+videoInfo.baseInfo.width+'px)/2)'}">
<!--判断是不是需要展示可编辑水印部分内容-->
<template>
<vue-draggable-resizable
v-if="waterPicInfo.source"
:draggable="currentType === 'addimg'"
:resizable="currentType === 'addimg'"
style="position: absolute"
:w="waterPicWidth"
:h="50"
:x="10"
:y="10"
:min-width="50"
:min-height="50"
:grid="[10,10]"
:parent="true"
@dragging="onDrag"
@resizing="onResize"
>
<i v-if="currentType === 'addimg'" class="iconfont icon-guanbi111 clear-water"
@click="waterPicInfo={source: null,x: 10,y: 10,width: null,height: 50}"></i>
<img :src="waterPicInfo.source" style="width: 100%;height: 100%" :style="{'opacity':waterPicInfo.opacity?waterPicInfo.opacity/100:1}"/>
</vue-draggable-resizable>
</template>
<div ></div>
</div>
</div>
</div>
</div>
<!--底部变化的菜单-->
<div>
<!--轨道区域-->
<div class="track-wrap">
<div class="components_video-navigation navigation">
<div class="component_storyboard storyboard">
<!--视频的帧数组-->
<div class="frames">
<div class="frame loaded" style="width: 80px; height: 50px;" v-for="(item, index) in 13" :key="index">
<img :src="videoInfo.waterFrames[index]" v-if="videoInfo.waterFrames[index]"
class="loaded"/>
</div>
</div>
</div>
<div class="drag-frames">
<ul class="box" ref="box">
<li class="left" ref="left"></li>
<li class="mid" ref="mid">
<div class="resize" ref="resize"></div>
<div class="youbiao" ref="youbiao" :style="{'left':youbiaoLeft}" style="height: 50px;border-left: 1px solid #FFFFFF"></div>
<div class="youbiao-time" ref="youbiaotime" :style="{'left':youbiaoLeft}" v-if="player">{{ transTimeCom }}</div>
<div class="resize2" ref="resize2"></div>
</li>
<li class="right" ref="right"></li>
</ul>
</div>
</div>
</div>
<!--底部操作菜单-->
<div class="bottom-nav">
<div style="display: flex">
<!--控制视频播放的菜单-->
<div class="play-btn bottom-nav-item" @click="!playStatus?player.play():player.pause()">
<i class="iconfont icon-bofang" v-if="!playStatus"></i>
<i class="iconfont icon-weibiaoti519" v-else></i>
</div>
<!--cut视频的部分-->
<template v-if="currentType === 'cut'">
<div class="bottom-nav-item" style="padding: 0 20px;display: flex">
<step @addSecond="addSecond" :type="'start'" @delSecond="delSecond" :initval="videoInfo.controlInfo.start" style="margin-right: 10px;" :min="0" :max="videoInfo.controlInfo.end"></step>
<step @addSecond="addSecond" :type="'end'" @delSecond="delSecond" :initval="videoInfo.controlInfo.end" :min="videoInfo.controlInfo.start" :max="videoInfo.baseInfo.duration"></step>
</div>
</template>
<!--屏幕快照部分-->
<template v-if="currentType === 'snapshot'">
<div class="bottom-nav-item" @click="makePhoto">
<i class="iconfont icon-post_pic" style="margin-right: 10px"></i> 下载快照
</div>
</template>
<!--添加水印图片部分-->
<template v-if="currentType === 'addimg'">
<div class="bottom-nav-item" @click="selectPic">
<i class="iconfont icon-ai-up-img" style="margin-right: 10px"></i> 添加图片
</div>
<div class="bottom-nav-item">
<label style="display: inline-block">透明度</label>
<div style="position: relative;display: inline-block;min-width: 160px;transform: translateY(-5px)">
<vue-range-slider width="160" class="range-slide" ref="slider" v-model="waterPicInfo.opacity"></vue-range-slider>
</div>
</div>
</template>
<!--视频声音相关-->
<template v-if="currentType === 'audio'">
<div class="bottom-nav-item" @click="downloadAudio" v-tip.top.dark.hover="'下载视频的音频'">
<i class="iconfont icon-xiazai" style="margin-right: 10px"></i> 下载音频
</div>
</template>
</div>
<!--靠右的设置、保存输出-->
<template v-if="videoInfo.baseInfo.originHeight">
<div style="float: right">
<!--输出选项进行设置-->
<div class="setting-box" v-if="showSetting" @mouseleave="showSetting=false">
<div v-for="key in Object.keys(resolvingPower)" :key="key">
<template v-if="!key || key <= videoInfo.baseInfo.originHeight">
<label>
<input type="radio" name ="rdSpeed" :value="key" v-model="videoInfo.controlInfo.resolvingPower">
{{resolvingPower[key]}}
</label>
</template>
</div>
</div>
<div class="bottom-nav-item" v-tip.top.dark.hover="'输出设置'" @click="showSetting = !showSetting">
<i class="iconfont icon-shezhi"></i>
</div>
<div class="bottom-nav-item" v-tip.top.dark.hover="'保存'" @click="saveFinally">
保存
</div>
</div>
</template>
</div>
</div>
</div>
<!--选择视频-->
<div class="select-video-box" v-else>
<div class="title">简易剪辑视频</div>
<div class="tips" @click="initFfmpeg"> Trim or cut video</div>
<div class="select-type" v-if="initFfmpegBool">
<div class="select-type-inner">
<div style="display: inline-block" class="open-file" @click="selectFile">打开文件</div>
<div style="display: inline-block" class="arrow"
@click="showSelectDrop?showSelectDrop=false:showSelectDrop=true"><i class="iconfont icon-xia"></i></div>
</div>
<div class="select-drop" v-if="showSelectDrop" @mouseleave="showSelectDrop=false">
<div class="select-item">本地视频</div>
<div class="select-item">平台视频</div>
<div class="select-item" @click="inputFileUrl">通过视频URL</div>
</div>
</div>
<div v-else style="color: white">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div style="margin-top: 20px;">环境准备中...</div>
</div>
</div>
</div>
<!--加载视频中，请稍等的过程-->
<div class="full-loading" v-show="showFullLoading">
<div style="color: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">
<div class="loading" style="margin-top: 0px;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div style="margin-top: 20px;">{{showFullLoadingText}}</div>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import { mapActions } from 'vuex'
// import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
import step from './Step'
import 'vue-range-component/dist/vue-range-slider.css'
import VueRangeSlider from 'vue-range-component'
// const ffmpeg = createFFmpeg({ log: true })
// eslint-disable-next-line no-undef
const { createFFmpeg, fetchFile } = FFmpeg
const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js'
})
export default {
name: 'Home',
components: { step, VueRangeSlider },
props: ['videoinfo_parent'],
data () {
return {
maxSize: 1024 * 1024 * 1024,
showFullLoading: false,
showFullLoadingText: '',
showSetting: false,
resolvingPower: {
360: '360P', // '640:-1': '360P'
480: '480P', // '720:-1': '480P',
720: '720P', // '1280:-1'
1080: '1080P', // '1920:-1'
'': '不设置'
},
playStatus: false,
currentType: 'cut', // 当前默认操作项，cut 裁剪,addimg 添加水印图片，snapshot 屏幕快照，crop 裁剪划选区,audio视频声音
initFfmpegBool: false, // 是否已经初始化ffmpeg环境
videoInfo: { // 操作视频的基本信息
baseInfo: {
name: '新编辑视频',
resolvingPower: null, // 原始视频的分辨率
width: null,
height: 360,
duration: 0,
originWidth: null, // 原视频的宽
originHeight: null // 原视频的高
},
currentTime: 0,
controlInfo: {
start: 0, // 开始时间
end: null, // 结束时间
resolvingPower: null // 输出的码率
},
waterFrames: [] // 获得对应帧数的图片数组，保留10张图片
},
waterPicWidth: 50,
waterPicInfo: { // 水印图片的相关信息
source: null,
x: 10,
y: 10,
width: null,
height: 50,
opacity: 100
},
percent: 0,
showSelectDrop: false,
fileObj: null,
player: null,
options: {
controls: false, // 是否显示底部控制栏
preload: 'auto', // 加载<video>标签后是否加载视频
autoplay: false, // 静音播放
// playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
width: '800px',
height: '360px',
controlBar: {
// 自定义按钮的位置
children: []
},
sources: [
{
src: '',
// src: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
type: 'video/mp4'
}
]
}
}
},
mounted () {
/* this.initFfmpegBool = true
if (this.videoinfo.url) { // 有传过来的url参数
this.videoInfo.baseInfo.name = this.videoinfo.name
// 通过url加载视频资源
this.initVideoCutByUrl(this.videoinfo.url)
} */
this.initFfmpeg()
},
filters: {
},
computed: {
// 动态计算时间游标的值显示
youbiaoLeft () {
if (!this.videoInfo.currentTime) {
return '0px'
}
let left = 0
const percent = (Math.floor(this.videoInfo.currentTime) / this.videoInfo.baseInfo.duration).toFixed(2)
// 计算总长100的百分之几，并减去左边的宽度
left = percent * 1000 - this.$refs.left.offsetWidth
return left + 'px'
},
transTimeCom () {
if (!this.videoInfo.currentTime) {
return '00:00'
}
const secondsT = this.videoInfo.currentTime
const time = moment.duration(secondsT, 'milliseconds')
const hours = time.hours()
const minutes = time.minutes()
const seconds = time.seconds()
const milliseconds = time.milliseconds()
// return moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.SSS')
return moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.S')
}
},
methods: {
...mapActions({
up: 'up'
}),
reset () {
try {
// 重置到最初始的状态
// 1 清除水印设置
this.waterPicInfo = {
source: null,
x: 10,
y: 10,
width: null,
height: 50,
opacity: 100
}
// 重置begin、end time
this.videoInfo.controlInfo.start = 0
this.videoInfo.controlInfo.end = this.videoInfo.baseInfo.duration
// 重置视轨左右调节部分
this.calLeftRightYouBiao()
this.$msg.success('重置成功！')
} catch (e) {
this.$msg.error('重置失败！')
}
},
// 组装命令进行保存输出
async saveFinally () {
this.setFullLoading(true, '处理中...')
try {
/**
* 整体过程
* 1、获得水印，计算水印大小
* 2、获得裁剪视频的时间起始点
* 3、设置分辨率
* **/
// 添加水印并设置水印透明度的命令
// ffmpeg -y -i input.mp4 -i water1.png -filter_complex "[1]lut=a=val*0.3[a];[0][a]overlay=0:0" -c:v libx264 -an output.mp4
// 获得源
this.showFullLoadingText = '获得视频源...'
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
// 判断有无水印，有的话添加水印
let waterArray = []
if (this.waterPicInfo.source) { // 有水印资源
// 1 获得水印原始大小
this.showFullLoadingText = '准备水印配置...'
ffmpeg.FS('writeFile', 'overlay.png', await fetchFile(this.waterPicInfo.source))
console.info(this.waterPicInfo.width)
console.info(this.videoInfo.baseInfo.originWidth)
console.info(this.videoInfo.baseInfo.width)
await ffmpeg.run(
'-i',
'overlay.png',
'-y',
'-v',
'quiet',
'-vf',
'scale=' + parseInt(this.waterPicInfo.width * this.videoInfo.baseInfo.originWidth / this.videoInfo.baseInfo.width) + ':' + parseInt(this.waterPicInfo.height * this.videoInfo.baseInfo.originHeight / this.videoInfo.baseInfo.height),
'scaled.png'
)
// 计算相对于原视频的位置
const x = parseInt(this.waterPicInfo.x * this.videoInfo.baseInfo.originWidth / this.videoInfo.baseInfo.width)
const y = parseInt(this.waterPicInfo.y * this.videoInfo.baseInfo.originHeight / this.videoInfo.baseInfo.height)
// 2、设置一个指定大小的水印
// ffmpeg -i watermark.png -y -v quiet -vf scale=1280*0.15:-1 scaled.png
// waterArray = ['-i', 'scaled.png', '-filter_complex', 'overlay=' + x + ':' + y]
// waterArray = ['-i', 'scaled.png', '-filter_complex', '[1]lut=a=val*' + this.waterPicInfo.opacity / 100 + '[a];[0][a]overlay=' + x + ':' + y + '']
// -vf "movie=scaled.png, scale=50:50, lut=a=val*0.5[watermark];[in][watermark] overlay=10:10[out]"
const scaleWater = 'scale=' + parseInt(this.waterPicInfo.width * this.videoInfo.baseInfo.originWidth / this.videoInfo.baseInfo.width) + ':' + parseInt(this.waterPicInfo.height * this.videoInfo.baseInfo.originHeight / this.videoInfo.baseInfo.height)
const overlay = x + ':' + y
const waterOpcity = this.waterPicInfo.opacity * 0.01
waterArray = ['-vf', 'movie=overlay.png, ' + scaleWater + ', lut=a=val*' + waterOpcity + '[watermark];[in][watermark] overlay=' + overlay + '[out]']
}
const start = ['-i', 'source.mp4']
// const lineTime = ['-ss', this.videoInfo.controlInfo.start * 0.001, '-to', this.videoInfo.controlInfo.end * 0.001] // 时间线的begin/end
// beigin time 和 end time
const lineTime = ['-ss', this.videoInfo.controlInfo.start * 0.001.toFixed(3) + '', '-to', this.videoInfo.controlInfo.end * 0.001.toFixed(3) + ''] // 时间线的begin/end
// 设置分辨率,保证不变形 ffmpeg -i 1.mp4 -strict -2 -vf scale=-1:480 4.mp4
let resolvingPower = []
// console.info(this.videoInfo.controlInfo.resolvingPower)
// console.info(this.videoInfo.baseInfo.originHeight)
let tempHeight = parseInt(this.videoInfo.controlInfo.resolvingPower)
let tempWidth = parseInt(this.videoInfo.baseInfo.originWidth * tempHeight / this.videoInfo.baseInfo.originHeight)
if (tempWidth % 2 !== 0) {
tempWidth = tempWidth + 1
}
if (tempHeight % 2 !== 0) {
tempHeight = tempHeight + 1
}
console.info(tempWidth)
console.info(tempHeight)
if (this.videoInfo.controlInfo.resolvingPower && (tempHeight !== this.videoInfo.baseInfo.originHeight)) {
// resolvingPower = ['-s', tempWidth + ':' + tempHeight]
if (waterArray.length === 0) {
resolvingPower = ['-vf', 'scale=' + tempWidth + ':' + tempHeight]
} else {
resolvingPower = ['-s', tempWidth + ':' + tempHeight]
}
}
// 动态计算视频的宽
// const resolvingPower = ['-strict', '-2', '-vf', 'scale=' + parseInt(this.videoInfo.baseInfo.width * this.videoInfo.controlInfo.resolvingPower / this.videoInfo.baseInfo.height) + ':' + this.videoInfo.controlInfo.resolvingPower]
const end = ['download.mp4']
this.showFullLoadingText = '视频处理中，请稍后...'
ffmpeg.setProgress(({ ratio }) => {
console.log(ratio)
/*
* ratio is a float number between 0 to 1.
*/
if (ratio !== 1) {
this.showFullLoadingText = '视频处理中，请稍后...' + (ratio * 100).toFixed(2) + '%'
} else {
this.showFullLoading = false
this.showFullLoadingText = ''
}
})
await ffmpeg.run(...start, ...lineTime, ...waterArray, ...resolvingPower, ...end)
// 下载到本地
// this.fileDownloadLocal('download.mp4')
// 保存至Vod平台
this.saveFileToVod('download.mp4')
this.setFullLoading(false)
} catch (e) {
this.$msg.error('导出出问题了，请重新试试吧！')
this.setFullLoading(false)
}
this.setFullLoading(false)
},
// 下载视频的背景音频
async downloadAudio () {
this.setFullLoading(true, '输出音频中，请稍等...')
// 参考命令
// ffmpeg -i 人生若只如初见.flv -vn r.mp3
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
await ffmpeg.run(
'-i',
'source.mp4',
'-vn',
'audio.mp4'
)
this.fileDownloadLocal('audio.mp4')
this.setFullLoading(false)
},
// 保存当前帧的快照
async makePhoto () {
this.setFullLoading(true, '输出快照中，请稍等...')
// 参考ffmpeg命令
// ffmpeg -i 2.mp4 -y -f image2 -ss 01.010 -t 0.001 b.jpg
// 执行命令
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
const timestamp = new Date().getTime()
await ffmpeg.run(
'-i',
'source.mp4',
'-y',
'-f',
'image2',
'-ss',
this.player.currentTime() + '',
'-t',
'0.001',
timestamp + '.png'
)
this.fileDownloadLocal(timestamp + '.png')
this.setFullLoading(false)
},
// 重新计算左右游标的显示位置
calLeftRightYouBiao () {
// 重新计算左右两侧的时间显示和left、right位置
const leftPercent = (this.videoInfo.controlInfo.start / this.videoInfo.baseInfo.duration).toFixed(2)
const rightPercent = 1 - (this.videoInfo.controlInfo.end / this.videoInfo.baseInfo.duration).toFixed(2)
const leftWidth = parseInt(leftPercent * 1000)
const rightWidth = parseInt(rightPercent * 1000)
this.$refs.left.style.width = leftWidth + 'px'
this.$refs.right.style.width = rightWidth + 'px'
const minWidth = 1000 - leftWidth - rightWidth
this.$refs.mid.style.width = minWidth + 'px'
this.$refs.resize.setAttribute('data-before', this.transTime(this.videoInfo.controlInfo.start) + 's')
this.$refs.resize2.setAttribute('data-after', this.transTime(this.videoInfo.controlInfo.end) + 's')
},
// 增加秒数
addSecond (type) {
if (type === 'start') {
if ((this.videoInfo.controlInfo.start + 100) < this.videoInfo.controlInfo.end) {
this.videoInfo.controlInfo.start = this.videoInfo.controlInfo.start + 100
}
// 重新定位播放的游标
this.videoInfo.currentTime = this.videoInfo.controlInfo.start
if (this.player) {
this.player.currentTime(this.videoInfo.currentTime / 1000)
}
} else {
if ((this.videoInfo.controlInfo.end + 100) <= this.videoInfo.baseInfo.duration) {
this.videoInfo.controlInfo.end = this.videoInfo.controlInfo.end + 100
} else {
this.videoInfo.controlInfo.end = this.videoInfo.baseInfo.duration
this.$msg.warning('值已经最大了！')
}
}
this.calLeftRightYouBiao()
},
// 减少秒数
delSecond (type) {
if (type === 'start') {
if ((this.videoInfo.controlInfo.start - 100) >= 0) {
this.videoInfo.controlInfo.start = this.videoInfo.controlInfo.start - 100
// 重新定位播放的游标
this.videoInfo.currentTime = this.videoInfo.controlInfo.start
if (this.player) {
this.player.currentTime(this.videoInfo.currentTime / 1000)
}
} else {
this.videoInfo.controlInfo.start = 0
this.$msg.warning('已经最小值了！')
}
} else {
if ((this.videoInfo.controlInfo.end - 100) > this.videoInfo.controlInfo.start) {
this.videoInfo.controlInfo.end = this.videoInfo.controlInfo.end - 100
}
}
// 重新计算左右两侧的时间显示和left、right位置
this.calLeftRightYouBiao()
/* const leftPercent = (this.videoInfo.controlInfo.start / this.videoInfo.baseInfo.duration).toFixed(2)
const rightPercent = 1 - (this.videoInfo.controlInfo.end / this.videoInfo.baseInfo.duration).toFixed(2)
const leftWidth = parseInt(leftPercent * 1000)
const rightWidth = parseInt(rightPercent * 1000)
this.$refs.left.style.width = leftWidth + 'px'
this.$refs.right.style.width = rightWidth + 'px'
const minWidth = 1000 - leftWidth - rightWidth
this.$refs.mid.style.width = minWidth + 'px' */
},
// 格式化时间
transTime (secondsT) {
const time = moment.duration(secondsT, 'milliseconds')
const hours = time.hours()
const minutes = time.minutes()
const seconds = time.seconds()
const milliseconds = time.milliseconds()
// return moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.SSS')
return moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.S')
},
onResize (x, y, width, height) {
this.waterPicInfo.x = x
this.waterPicInfo.y = y
this.waterPicInfo.width = width
this.waterPicInfo.height = height
},
onDrag (x, y) {
this.waterPicInfo.x = x
this.waterPicInfo.y = y
},
// 点击头部菜单切换操作类型
changeCurrentType (type) {
this.currentType = type
},
// 初始化配置ffmpeg环境
async initFfmpeg () {
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
this.initFfmpegBool = true
this.$msg.success('环境初始化成功！')
// 获得路由传参
console.info(this.$route.query.url)
let tempUrl = ''
if (this.$route.query.url) {
tempUrl = this.$route.query.url + '&sign=' + this.$route.query.sign + '&us=' + this.$route.query.us
}
console.info(tempUrl)
const tempName = this.$route.query.name
if (tempUrl && tempName) { // 有传过来的url参数
this.videoInfo.baseInfo.name = tempName
// 通过url加载视频资源
this.initVideoCutByUrl(tempUrl)
}
/* if (this.videoinfo_parent && this.videoinfo_parent.url) { // 有传过来的url参数
this.videoInfo.baseInfo.name = this.videoinfo_parent.name
// 通过url加载视频资源
this.initVideoCutByUrl(this.videoinfo.url)
} */
}
},
initVideoCutByUrl (url) {
const match = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[//?/:]?.*$/
// 判断是不是正确的url
if (url === 'https://') {
return
}
if (match.test(url)) {
this.setFullLoading(true, '请求视频资源')
this.loadVideoByUrl(this, url)
} else {
this.setFullLoading(false)
this.$msg.error('该视频格式不支持，请换一个吧！')
}
},
// 初始化拖拽视轨
dragControllerDiv () {
var resize = document.getElementsByClassName('resize')
var resize2 = document.getElementsByClassName('resize2')
var left = document.getElementsByClassName('left')
var right = document.getElementsByClassName('right')
var mid = document.getElementsByClassName('mid')
var box = document.getElementsByClassName('box')
const vm = this
for (let i = 0; i < resize.length; i++) {
resize[i].onmousedown = function (e) {
e = e || window.event // 兼容低版本IE 防止时间参数对象失效
var startX = e.clientX
// resize[i].left = resize[i].offsetLeft
var leftTemp = mid[i].offsetLeft
document.onmousemove = function (e) {
var endX = e.clientX
var rightW = right[i].offsetWidth
var moveLen = leftTemp + (endX - startX)
var maxT = box[i].clientWidth
if (moveLen < 0) moveLen = 0
if (moveLen > maxT - rightW - 0) moveLen = maxT - rightW - 0
// resize[i].style.left = moveLen
for (let j = 0; j < left.length; j++) {
if ((box[i].clientWidth - moveLen - rightW) < 10) {
left[j].style.width = (box[i].clientWidth - 10 - rightW) + 'px'
mid[j].style.width = '10px'
} else {
left[j].style.width = moveLen + 'px'
mid[j].style.width = (box[i].clientWidth - moveLen - rightW) + 'px'
}
// 动态计算需要显示的秒数
const temp = left[j].clientWidth / maxT * vm.videoInfo.baseInfo.duration
// resize[i].setAttribute('data-before', Number(temp).toFixed(1) + 's')
resize[i].setAttribute('data-before', vm.transTime(temp) + 's')
// 更新start值，并更新游标位置
vm.videoInfo.controlInfo.start = temp
vm.videoInfo.currentTime = vm.videoInfo.controlInfo.start
// 更新当前播放的时间点
vm.player.currentTime(vm.videoInfo.currentTime / 1000)
}
}
document.onmouseup = function (evt) {
document.onmousemove = null
document.onmouseup = null
resize[i].releaseCapture && resize[i].releaseCapture()
}
resize[i].setCapture && resize[i].setCapture()
return false
}
}
for (let i = 0; i < resize2.length; i++) {
resize2[i].onmousedown = function (e) {
var startX = e.clientX
// resize2[i].left = resize2[i].offsetLeft
var tempLeft = right[i].offsetLeft
document.onmousemove = function (e) {
var endX = e.clientX
var leftW = left[i].offsetWidth
var moveLen = tempLeft + (endX - startX) - leftW
var maxT = box[i].clientWidth
if (moveLen < 0) {
moveLen = 0
return
}
if (moveLen > maxT - leftW - 0) moveLen = maxT - leftW - 0
// resize2[i].style.left = moveLen
for (let j = 0; j < right.length; j++) {
if (moveLen < 10) {
mid[j].style.width = '10px'
right[j].style.width = (box[i].clientWidth - 10 - leftW) + 'px'
} else {
mid[j].style.width = moveLen + 'px'
right[j].style.width = (box[i].clientWidth - moveLen - leftW) + 'px'
}
}
// 动态计算需要显示的秒数
const temp = (left[i].clientWidth + mid[i].clientWidth) / maxT * vm.videoInfo.baseInfo.duration
// resize2[i].setAttribute('data-after', Number(temp).toFixed(1) + 's')
resize2[i].setAttribute('data-after', vm.transTime(temp) + 's')
// 更新end的值并更新游标的位置
vm.videoInfo.controlInfo.end = temp
// 更新起始点游标
vm.videoInfo.currentTime = vm.videoInfo.controlInfo.start
// 更新当前播放的时间点
vm.player.currentTime(vm.videoInfo.currentTime / 1000)
}
document.onmouseup = function (evt) {
document.onmousemove = null
document.onmouseup = null
resize2[i].releaseCapture && resize2[i].releaseCapture()
}
resize2[i].setCapture && resize2[i].setCapture()
return false
}
}
},
async uploadVod (fileObj) {
this.setFullLoading(true, '正在上传至平台')
const vm = this
try {
const result = await this.up({
files: [fileObj],
dirType: 'ClientUsr',
onprogress: (file) => {
// vm.percent = file.percent ? parseInt(file.percent * 100) : 0
this.setFullLoading(true, '正在上传至平台' + parseInt(file.percent * 100) + '%')
}
})
vm.newUrl = result.video.url
console.info(result.video.url)
// alert('上传文件成功！' + result.video.url)
// this.setFullLoading(true,'' + parseInt(file.percent * 100) + '%')
// 调用平台保存文件地址的方法
this.$emit('saveVideoCutFile', { name: this.videoInfo.baseInfo.name, size: fileObj.size, uid: result.fileId })
this.setFullLoading(false)
this.$msg.success({
message: '文件已经上传至平台，请前往列表查看',
showClose: true,
duration: -1
})
} catch (err) {
this.setFullLoading(false)
this.$msg.error('文件上传失败！')
}
},
async test1 () {
await ffmpeg.load()
// const data = await fetchFile('http://1256648398.vod2.myqcloud.com/88947976vodcq1256648398/06e508513701925920467286858/playlist.m3u8')
const data = await fetchFile('http://1256648398.vod2.myqcloud.com/cdc92f3bvodtransgzp1256648398/e6a56a003701925920453271852/v.f100030.mp4')
console.info(data)
},
async test () {
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
}
ffmpeg.setProgress(({ ratio }) => {
console.log(ratio)
/*
* ratio is a float number between 0 to 1.
*/
})
ffmpeg.FS('writeFile', 'overlay.png', await fetchFile('./overlay.png'))
ffmpeg.FS('writeFile', 'a.mp4', await fetchFile(this.fileObj))
// ffmpeg.FS('writeFile', 'a.mp4', await fetchFile('./a.mp4'))
await ffmpeg.run(
'-i',
'a.mp4',
'-i',
'overlay.png',
'-filter_complex',
'[0:v][1:v] overlay=10:10:enable=\'between(t,0,20)\'',
'b.mp4'
)
console.info(ffmpeg.FS('readFile', 'b.mp4'))
// this.offerFileAsDownload('b.mp4', ffmpeg)
const files = new window.File(
[new Blob([ffmpeg.FS('readFile', 'b.mp4')])],
'b.mp4',
{ type: 'video/mp4' }
)
this.uploadVod(files)
// await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'b.mp4'))
process.exit(0)
},
saveFileToVod (filename) {
const files = new window.File(
[new Blob([ffmpeg.FS('readFile', filename)])],
this.videoInfo.baseInfo.name,
{ type: 'video/mp4' }
)
window.parent.postMessage({ files: files, name: this.videoInfo.baseInfo.name, type: 'upfile' }, '*')
const test = setInterval(() => {
if (Number(this.$route.query.uppercent) >= 0 && Number(this.$route.query.uppercent) < 100) {
this.setFullLoading(true, '视频上传中...' + this.$route.query.uppercent + '%')
}
if (Number(this.$route.query.uppercent) === 100) {
this.setFullLoading(false)
clearInterval(test)
}
if (Number(this.$route.query.uppercent) === -1) {
this.setFullLoading(false)
clearInterval(test)
}
}, 100)
// parent.upFileToVod(files)
// this.uploadVod(files)
// await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', 'b.mp4'))
process.exit(0)
},
offerFileAsDownload (filename) {
const mime = 'application/octet-stream'
const content = ffmpeg.FS('readFile', 'b.mp4')
console.log(`Offering download of "${filename}", with ${content.length} bytes...`)
var a = document.createElement('a')
a.download = filename
a.href = URL.createObjectURL(new Blob([content], { type: mime }))
a.style.display = 'none'
document.body.appendChild(a)
a.click()
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(a.href)
}, 2000)
},
// 通过文件名将MEMFS文件保存到本地
fileDownloadLocal (filename) {
const mime = 'application/octet-stream'
const content = ffmpeg.FS('readFile', filename)
// console.log(`Offering download of "${filename}", with ${content.length} bytes...`)
var a = document.createElement('a')
a.download = filename
a.href = URL.createObjectURL(new Blob([content], { type: mime }))
a.style.display = 'none'
document.body.appendChild(a)
a.click()
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(a.href)
}, 2000)
ffmpeg.FS('unlink', filename)
},
// 设置满屏loading
setFullLoading (display, msg = '') {
this.showFullLoading = display
this.showFullLoadingText = msg
},
inputFileUrl () {
const _this = this
var url = prompt('请输入视频路径', 'https://')
const match = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[//?/:]?.*$/
// 判断是不是正确的url
if (url === 'https://') {
return
}
if (match.test(url)) {
this.setFullLoading(true, '请求视频资源')
_this.loadVideoByUrl(_this, url)
} else {
_this.setFullLoading(false)
this.$msg.error('您输入的视频格式不支持，请换一个吧！')
}
},
async extractFramesFromVideo (videoUrl) {
const vm = this
var video = document.createElement('video')
var canvas = document.createElement('canvas')
canvas.width = 88
canvas.height = 50
video.addEventListener('loadeddata', function () {
for (let i = 0; i < 14; i++) {
const temp = parseInt(video.duration / 14)
setTimeout(() => {
if (!isNaN(video.duration)) {
// var rand = Math.round(Math.random() * video.duration * 1000) + 1
video.currentTime = temp * i === 0 ? 0.1 : temp * i
}
}, 500 * i)
}
}, false)
video.addEventListener('seeked', function () {
var context = canvas.getContext('2d')
context.drawImage(video, 0, 0, canvas.width, canvas.height)
// 转换成base64形式
const img = canvas.toDataURL('image/jpeg') // 这个就是图片的base64
vm.videoInfo.waterFrames.push(img)
}, false)
video.src = videoUrl
},
loadVideoByUrl (_this, url) {
try {
const xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.responseType = 'blob'
xhr.onprogress = function (e) {
// _this.updateCircleProgressWrapper(e.loaded, e.total)
if (e.loaded < e.total) {
_this.setFullLoading(true, '加载视频中，请稍等...' + (e.loaded / e.total * 100).toFixed(1) + '%')
} else {
_this.setFullLoading(false)
}
}
xhr.onload = function () {
if (this.status === 200) {
const blob = this.response
var reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function (e) {
// console.info(e.target.result)
_this.options.sources[0].src = e.target.result
_this.initVideo(e.target.result, _this)
_this.setFullLoading(false)
_this.$msg.success('加载成功！')
}
} else {
_this.setFullLoading(false)
_this.$msg.error('该视频需要您先下载至本地后再使用！')
}
}
xhr.onreadystatechange = function () {
// 若响应完成且请求成功
if (xhr.status === 200) {
} else {
_this.setFullLoading(false)
_this.$msg.error('该视频需要您先下载至本地后再使用！')
return false
}
}
xhr.send(null)
} catch (e) {
_this.setFullLoading(false)
_this.showFullLoading = false
_this.$msg.error('该视频路径不支持编辑，请换一个吧！')
}
},
// 用户点击输入视频URL
async inputFileUrlTemp () {
var url = prompt('请输入视频路径', 'https://')
const match = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[//?/:]?.*$/
// 判断是不是正确的url
if (url === 'https://') {
return
}
if (match.test(url) && url.endsWith('mp4')) {
try {
this.setFullLoading(true, '加载线上数据中...')
const data = await fetchFile(url)
// 将数据转成base64的形式
const dataBase64 = 'data:video/mp4;base64,' + this.arrayBufferToBase64(data)
this.options.sources[0].src = dataBase64
this.initVideo(dataBase64, this)
this.setFullLoading(false)
this.$msg.success('加载成功！')
} catch (e) {
this.setFullLoading(false)
this.showFullLoading = false
this.$msg.error('该视频路径不支持编辑，请换一个吧！')
}
} else {
this.$msg.error('您输入的视频路径有误！')
}
console.info(url)
},
initPlay () {
const vm = this
this.player = this.$video(this.$refs.videoPlayer, this.options, () => {
const player = vm.player
player.on('loadstart', function () {
console.log('开始请求数据 ')
})
player.on('progress', function () {
console.log('正在请求数据 ')
})
player.on('loadedmetadata', function () {
console.log('获取资源长度完成 ')
})
player.on('canplaythrough', function () {
console.log('视频源数据加载完成')
})
player.on('waiting', function () {
console.log('等待数据')
})
player.on('play', function () {
vm.playStatus = true
console.log('视频开始播放')
})
player.on('playing', function () {
console.log('视频播放中')
})
player.on('pause', function () {
vm.playStatus = false
console.log('视频暂停播放')
})
player.on('ended', function () {
vm.playStatus = false
console.log('视频播放结束')
})
player.on('error', function () {
console.log('加载错误')
})
player.on('seeking', function () {
console.log('视频跳转中')
})
player.on('seeked', function () {
console.log('视频跳转结束')
})
player.on('ratechange', function () {
console.log('播放速率改变')
})
player.on('timeupdate', function () {
// console.log('播放时长改变' + player.currentTime())
// 动态改变游标和游标时间的位置
// 1 计算left值
vm.videoInfo.currentTime = Math.floor(player.currentTime() * 1000)
// 判断当前时间游标是否超过结束的游标，需要自动停止
if (vm.videoInfo.currentTime >= vm.videoInfo.controlInfo.end) {
vm.videoInfo.currentTime = vm.videoInfo.controlInfo.end
player.pause()
}
})
player.on('volumechange', function () {
console.log('音量改变')
})
player.on('stalled', function () {
console.log('网速异常')
})
})
},
selectFile () {
const inp = document.getElementById('pop_video')
if (inp) {
inp.click()
}
},
selectPic () {
const inp = document.getElementById('pop_pic')
if (inp) {
inp.click()
}
},
// 上传图片水印
getPic (event) {
if (!event.target.files[0]) {
return
}
const file = event.target.files[0]
if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
this.$msg.error('图片仅支持png和jpeg格式！')
return
}
// 暂存当前图片水印信息
const vm = this
if (window.FileReader) {
var reader = new FileReader()
reader.readAsDataURL(file)
// 监听文件读取结束后事件
reader.onloadend = function (e) {
console.info(e)
// 获得图片的尺寸信息
var img = new Image()
img.src = e.target.result
img.onload = () => {
vm.waterPicWidth = parseInt(50 * img.width / img.height)
vm.waterPicInfo.width = parseInt(50 * img.width / img.height)
vm.waterPicInfo.source = e.target.result
// w = img.width
// h = img.height
}
}
}
this.$refs.filePic.value = ''
},
// 上传视频后解析视频帧
async getVideoFrames () {
this.videoInfo.waterFrames = []
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
}
// 计算10个对应的时间点
const averageDura = parseInt(this.videoInfo.baseInfo.duration * 0.001 / 13)
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
ffmpeg.setProgress(({ ratio }) => {
this.setFullLoading('true', '视频解析中...')
console.log(ratio)
/*
* ratio is a float number between 0 to 1.
*/
if (ratio !== 1) {
this.showFullLoadingText = '视频解析中，请稍后...' + (ratio * 100).toFixed(2) + '%'
} else {
this.showFullLoading = false
this.showFullLoadingText = ''
}
})
try {
await ffmpeg.run('-ss', '00:00', '-i', 'source.mp4', '-f', 'image2', '-r', '1/' + averageDura, '-s', '100*50', 'image-%2d.png')
for (let i = 0; i < 13; i++) {
let temp = i + 1
if (temp < 10) {
temp = '0' + temp
}
// await ffmpeg.run('-i', 'source.mp4', '-r', '1', '-ss', parseInt(averageDura * i) + '', '-vframes', '1', '-f', 'image2', '-s', '100*50', 'image-' + temp + '.png')
this.videoInfo.waterFrames.push(this.arrayBufferToBase64(ffmpeg.FS('readFile', 'image-' + temp + '.png')))
}
} catch (e) {
this.videoInfo.waterFrames = []
// ffmpeg -i 22.mp4 -r 1 -ss 00:00:00 -vframes 10 image-%5d.jpeg
await ffmpeg.run('-ss', '00:00:00', '-i', 'source.mp4', '-f', 'image2', '-r', '1', '-vframes', '14', '-s', '100*50', 'image-%2d.png')
for (let i = 0; i < 13; i++) {
let temp = i + 1
if (temp < 10) {
temp = '0' + temp
}
// await ffmpeg.run('-i', 'source.mp4', '-r', '1', '-ss', parseInt(averageDura * i) + '', '-vframes', '1', '-f', 'image2', '-s', '100*50', 'image-' + temp + '.png')
this.videoInfo.waterFrames.push(this.arrayBufferToBase64(ffmpeg.FS('readFile', 'image-' + temp + '.png')))
}
}
},
arrayBufferToBase64 (array) {
array = new Uint8Array(array)
var length = array.byteLength
var table = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
'w', 'x', 'y', 'z', '0', '1', '2', '3',
'4', '5', '6', '7', '8', '9', '+', '/']
var base64Str = ''
for (var i = 0; length - i >= 3; i += 3) {
var num1 = array[i]
var num2 = array[i + 1]
var num3 = array[i + 2]
base64Str += table[num1 >>> 2] +
table[((num1 & 0b11) << 4) | (num2 >>> 4)] +
table[((num2 & 0b1111) << 2) | (num3 >>> 6)] +
table[num3 & 0b111111]
}
var lastByte = length - i
if (lastByte === 1) {
var lastNum1 = array[i]
base64Str += table[lastNum1 >>> 2] + table[((lastNum1 & 0b11) << 4)] + '=='
} else if (lastByte === 2) {
// eslint-disable-next-line no-redeclare
var lastNum1 = array[i]
var lastNum2 = array[i + 1]
base64Str += table[lastNum1 >>> 2] +
table[((lastNum1 & 0b11) << 4) | (lastNum2 >>> 4)] +
table[(lastNum2 & 0b1111) << 2] +
'='
}
return base64Str
},
// 判断源文件是否已经写入ffmpeg
async existSourceFile () {
try {
if (await ffmpeg.FS('readFile', 'source.mp4')) {
} else {
}
} catch (err) {
console.info(err)
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
}
},
async initVideo (videoBase64, vm) {
vm.fileObj = videoBase64
vm.options.sources[0].src = videoBase64
const video = document.createElement('video')
video.preload = 'metadata'
video.onloadedmetadata = async () => {
// 获得视频时长
window.URL.revokeObjectURL(video.src)
const duration = video.duration
console.info('视频尺寸')
// 通过视频尺寸计算视频部分的画布大小，否则影响水印添加
// 判断视频的宽高是不是为0，为0的话要计算某一帧图片的大小
const tempWidth = video.videoWidth
const tempHeight = video.videoHeight
if (video.videoWidth === 0) {
this.setFullLoading(false)
this.$msg.error('您的视频损坏了，请换一个试试吧！')
} else {
this.calVideo(vm, tempWidth, tempHeight, duration)
}
}
video.src = videoBase64
},
async calVideo (vm, tempWidth, tempHeight, duration) {
// console.info(video.videoWidth)
// console.info(video.videoHeight)
vm.videoInfo.baseInfo.width = 360 * tempWidth / tempHeight
vm.options.width = vm.videoInfo.baseInfo.width
vm.videoInfo.baseInfo.duration = duration * 1000
vm.videoInfo.controlInfo.end = vm.videoInfo.baseInfo.duration
vm.videoInfo.baseInfo.originWidth = tempWidth
vm.videoInfo.baseInfo.originHeight = tempHeight
// 存原始视频的分辨率
// vm.video.baseInfo.= video.videoHeight
// 设置默认输出尺寸的值
if (tempHeight >= 1080) {
vm.videoInfo.controlInfo.resolvingPower = '1080'
} else if (tempHeight >= 720) {
vm.videoInfo.controlInfo.resolvingPower = '720'
} else if (tempHeight >= 480) {
vm.videoInfo.controlInfo.resolvingPower = '480'
} else if (tempHeight >= 360) {
vm.videoInfo.controlInfo.resolvingPower = '360'
} else {
vm.videoInfo.controlInfo.resolvingPower = ''
}
// 放置时间轴的时间显示
var resize = document.getElementsByClassName('resize')
var resize2 = document.getElementsByClassName('resize2')
resize[0].setAttribute('data-before', '00:00:00s')
resize2[0].setAttribute('data-after', vm.transTime(duration * 1000) + 's')
// resize2[0].setAttribute('data-after', duration + 's')
vm.$nextTick(() => {
vm.dragControllerDiv()
vm.initPlay()
console.info(this.extractFramesFromVideo(this.fileObj))
})
// 对视频进行分帧,太慢了，暂时关闭
// vm.getVideoFrames()
vm.getVideoFramesFast(
// this.findvideocover()
// this.initialize()
)
},
getVideoFramesFast () {},
// 上传视频
getVideo (event) {
if (this.player) {
this.player.pause()
// this.player.dispose()
}
if (!event.target.files[0]) {
return
}
const file = event.target.files[0]
if (file.type !== 'video/mp4') {
this.$msg.error('请选择MP4格式视频！')
return
}
if (file.size > this.maxSize) {
this.$msg.error('只能编辑1G以内的视频文件！')
}
// document.getElementById('pop_video').value = null
this.videoInfo.baseInfo.name = file.name
this.options.sources[0].src = ''
const vm = this
if (window.FileReader) {
var reader = new FileReader()
reader.readAsDataURL(file)
// 监听文件读取结束后事件
reader.onloadend = function (e) {
if (vm.player) {
// vm.player.pause()
vm.player.dispose()
vm.player = null
}
vm.initVideo(e.target.result, vm)
}
}
}
},
beforeDestroy () {
if (this.player) {
this.player.dispose()
}
}
}
</script>
<style>
.m-message-container{
z-index: 9999999999 !important;
}
</style>
<style lang="less" scoped>
@import "../assets/css/common";
</style>
Step组件步进器
<template>
<div class='box'>
{{transTime(initval)}}
<div style="display: flex;flex-direction: column">
<div @click="add()" class='bt1'>▲</div>
<div @click="del()" class='bt2'>▼</div>
</div>
</div>
</template>
<script>
export default {
name: 'step',
props: {
type: {
type: String
},
min: {
type: Number,
default: 1
},
max: {
type: Number,
default: 1
},
initval: {
type: Number,
default: 1
}
},
created () {
// 保存一下初始值
this.temp2 = this.initval * 1
},
data () {
return {
num: 1,
temp: 1,
temp2: 1
}
},
methods: {
transTime (secondsT) {
const time = this.$moment.duration(secondsT, 'milliseconds')
const hours = time.hours()
const minutes = time.minutes()
const seconds = time.seconds()
const milliseconds = time.milliseconds()
// return this.$moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.SSS')
return this.$moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.S')
},
add () {
this.$emit('addSecond', this.type)
/* if ((this.num + 0.1) < this.max) {
this.num = this.num + this.temp2
this.temp = this.num + this.temp2
} else {
alert('最多购买5件商品')
} */
},
del () {
this.$emit('delSecond', this.type)
/* if (this.num > 1) {
this.num = this.num - this.temp2
this.temp = this.num - this.temp2
} */
},
tx () {
if (this.num > 5) {
alert('最多购买5件商品')
this.num = 5
this.temp = 5
} else if (typeof this.num !== 'number') {
// 判断数据类型，如果不是数字就赋值为上次输入的值
alert('请输入数字')
this.num = this.temp
}
}
}
}
</script>
<style scoped lang="less">
.input-step{
background: transparent;
color: white;
border: 0px !important;
}
.box{
position: relative;
width: 120px;
justify-content: center;
align-items: center;
height: 50px;
}
input{
text-align: center;
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 45px;
height: 45px;
}
button{
}
.bt1{
position: absolute;
right: 0px;
width: 20px;
height: 20px;
top: 0;
line-height: 25px;
opacity: 0.8;
&:hover{
opacity: 1;
}
}
.bt2{
position: absolute;
right: 0px;
width: 20px;
height: 20px;
line-height: 25px;
bottom: 5px;
opacity: 0.8;
&:hover{
opacity: 1;
}
}
</style>
引入的common.css
/*loading样式*/
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: #FFFFFF;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
/*主背景*/
.video-cut{
min-width: 1024px;
background: linear-gradient(180deg,#003d75,#232b56);
height: 100%;
min-height: 700px;
width: auto;
min-width: 1200px;
/*选择视频部分*/
.select-video-box{
margin-top: 15%;
text-align: center;
.title{
color: #FFFFFF;
font-weight: 700;
font-size: 48px;
margin: 0;
}
.tips{
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
opacity: 0.8;
}
.select-type{
line-height: 60px;
width: 250px;
margin: 30px auto;
.select-drop{
background: #FFFFFF;
margin-top: 5px;
.select-item{
cursor: pointer;
&:hover{
background: #0088ff20;
}
}
}
.select-type-inner{
background: #FFFFFF;
.open-file{
width: 198px;
color: #003d75;
border-right: 1px solid #003d75;
cursor: pointer;
&:hover{
box-shadow: 0px 0px 10px #FFFFFF;
}
}
.arrow{
width: 50px;
text-align: center;
cursor: pointer;
&:hover{
box-shadow: 0px 0px 10px #FFFFFF;
}
i{
color: #003d75;
&:hover{
color: #003d7575;
}
}
}
}
}
}
}
/*主要内容部分*/
.content{
/*头部菜单部分*/
.block-top{
margin-bottom: 15px;
display: flex;
justify-content: space-between;
.toolbar{
display: flex;
.tool-item{
opacity: 0.8;
vertical-align: middle;
background-color: rgba(0,0,0,.1);
color: #FFFFFF;
font-size: 13px;
cursor: pointer;
line-height: 20px;
margin-right: 5px;
padding: 6px 15px;
&:hover{
opacity: 1;
}
&.active {
opacity: 1;
background: #012d56;
}
&:first-child{
border-radius: 10px 0px 0px 10px;
}
&:last-child{
border-radius: 0px 10px 10px 0px;
}
.i-name {
margin-left: 5px;
display: inline-block;
cursor: pointer;
}
i {
height: 20px;
}
}
}
.toolbar-right{
display: flex;
color: #FFFFFF;
font-size: 13px;
line-height: 20px;
.reset{
padding-right: 18px;
}
.tool-item{
opacity: 0.8;
cursor: pointer;
&:hover{
opacity: 1;
}
}
}
}
.video-content{
}
}
/*视频部分*/
.video_box{
.video-name{
font-size: 12px;
text-align: center;
color: hsla(0,0%,100%,.5);
margin-bottom: 15px;
}
.video-js{
margin: 0 auto;
}
}
/*视频播放区域可操作的部分*/
.dragable-area {
height: 360px;
width: 800px;
position: absolute;
top: 0px;
left: calc((100% - 800px)/2);
.clear-water {
position: absolute;
right: 0;
top: 0;
transform: translate(50%,-50%);
color: green;cursor: pointer;
&:hover {
color: darkblue;
}
}
}
/*展示时间部分*/
.show-time-box {
.show-time{
color: #00e0ff;
}
}
/*视轨部分*/
.track-wrap{
box-sizing: border-box;
width: 1020px;
overflow: visible;
margin: 43px auto;
.drag-frames {
width:1000px;
transform: translateX(10px);
position: absolute;
top: 0;
left: 0;
ul,li{
list-style: none;
display: block;
margin:0;
padding:0;
}
.box{
width:1000px;
height:50px;
position: relative;
/*overflow:hidden;*/
overflow: inherit;
}
.left{
width:0px;
height:100%;
background-color: rgba(32,57,109,.5);
float:left;
}
.resize{
transform:translateX(-10px);
width:10px;
height:100%;
cursor: w-resize;
float:left;
background-color: #00e0ff;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 5px auto;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 3 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 15a1.5 1.5 0 100-3 1.5 1.5 0 000 3z' fill='%23fff' clip-rule='evenodd' fill-rule='evenodd'/%3E%3C/svg%3E");
&::before{
content: attr(data-before);
color: #00e0ff;
position: absolute;
bottom: 0;
transform: translate(-50%, 30px);
width: max-content;
}
}
.resize:before {
}
.resize2{
transform:translateX(10px);
position:absolute;
width:10px;
height:100%;
cursor: w-resize;
float:right;
right:0;
background-color: #00e0ff;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background-repeat: no-repeat;
background-position: center;
background-size: 5px auto;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 3 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 15a1.5 1.5 0 100-3 1.5 1.5 0 000 3z' fill='%23fff' clip-rule='evenodd' fill-rule='evenodd'/%3E%3C/svg%3E");
&::after{
content: attr(data-after);
color: #00e0ff;
position: absolute;
bottom: 0;
transform: translate(-50%, 30px);
width: max-content;
}
}
.right{
float:left;
width:0px;
height:100%;
background-color: rgba(32,57,109,.5);
}
.mid{
min-width: 5px;
position:relative;
float:left;
width:100%;
height:100%;
background: transparent;
}
}
.components_video-navigation{
position: relative;
}
.component_storyboard {
padding: 0 10px;
.frames {
display: flex;
width: 100%;
overflow: hidden
}
.frame {
img {
width: 88px;
height: 50px;
}
}
.frame.loaded{
background-image: none
}
}
.component_storyboard .frames .frame{
background-color: rgba(0,0,0,.8);
background-image: url('data:image/svg+xml;utf8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-eclipse" style="animation-play-state: running; animation-delay: 0s; background: none;"><path stroke="none" d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="%2300E0FF" style="animation-play-state: running; animation-delay: 0s;"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 51;360 50 51" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animateTransform></path></svg>');
background-size: 25%;
background-position: 50%;
background-repeat: no-repeat;
flex-shrink: 0;
flex-grow: 0;
pointer-events: none
}
}
// 底部的操作菜单
.bottom-nav {
color: #FFFFFF;
display: flex;
justify-content: space-between;
.bottom-nav-item{
&:hover{
background-color: rgba(0,0,0,.5);
}
padding: 0 15px;
cursor: pointer;
text-align: center;
line-height: 50px;
height: 50px;
border-radius: 15px;
box-sizing: border-box;
border: 1px solid transparent;
position: relative;
margin-right: 20px;
margin-top: 10px;
display: inline-block;
background-color: rgba(0,0,0,.25);
}
.play-btn {
width: 100px;
i{
font-size: 16px;
}
}
.range-slide {
width: 160px;
padding: 8px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
// 游标的样式
.youbiao{
position: absolute;
left: 0px;
}
.youbiao-time{
width: 70px;
position: absolute;
left: 0px;
color:#333333;
transform: translate(-50%,-25px);
font-size: 12px;
background: #FFFFFF;
border-radius: 10px;
padding:3px;
text-align: center;
}
// 设置
.setting-box {
position: absolute;
width:fit-content;
border-radius: 20px;
background-color: #000;
border: none;
padding: 20px;
font-size: 14px;
transform: translate(-50%, -110%);
div{
width: auto;
}
}
// 整页加载中的loading
.full-loading{
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
background: #33333380;
text-align: center;
}
20210812再次优化，视频使用blob地址
<template>
<div class="video-cut" crossorigin=“anonymous”>
<!-- <span v-tip="123">2222</span>
<i class="iconfont icon-lkingboxiaojianzi"></i>-->
<template v-if="!options.sources[0].src">
<input v-show="false" id="pop_video" type="file" accept="video/mp4" @change="getVideo" name="fileTrans" ref="file"
value="">
</template>
<input v-show="false" id="pop_pic" type="file" accept="image/*" @change="getPic" name="filePic" ref="filePic"
value="">
<input v-show="false" id="pop_audio" type="file" accept="audio/mpeg" @change="getAudio" name="fileAudio" ref="fileAudio"
value="">
<div style="padding: 30px 40px;">
<div class="content" >
<!--头部菜单-->
<div v-if="options.sources[0].src" class="block-top">
<div class="toolbar">
<div class="tool-item" @click="changeCurrentType('cut')" :class="{'active': currentType == 'cut'}" v-tip.top.dark.hover="'裁剪视频'"><i class="iconfont icon-cut"></i><span
class="i-name">裁剪</span></div>
<div class="tool-item" @click="changeCurrentType('snapshot')" :class="{'active': currentType == 'snapshot'}" v-tip.top.dark.hover="'屏幕快照'"><i class="iconfont icon-post_pic"></i></div>
<div class="tool-item" @click="changeCurrentType('addimg')" :class="{'active': currentType == 'addimg'}" v-tip.top.dark.hover="'上传水印图片'"><i
class="iconfont icon-ai-up-img"></i></div>
<div class="tool-item" @click="changeCurrentType('audio')" :class="{'active': currentType == 'audio'}" v-tip.top.dark.hover="'音频'"><i
class="iconfont icon-yinpinbofang"></i></div>
</div>
<div class="toolbar-right">
<div class="reset tool-item" v-tip.top.dark.hover="'回到初始状态'" @click="reset">
<i class="iconfont icon-chexiao" style="margin-right: 5px;"></i>重置
</div>
<div class="tool-item" v-tip.top.dark.hover="'关闭项目'" @click="closeProject"><i class="iconfont icon-guanbi111"></i></div>
</div>
</div>
<!--视频部分-->
<div v-if="options.sources[0].src" class="video-content">
<div class="video_box">
<div class="video-name">{{videoInfo.baseInfo.name}}</div>
<div style="position: relative">
<video ref="videoPlayer" class="video-js"></video>
<!--因为视频大小是动态的，所以dragable-area的大小也是不断变化的-->
<div class="dragable-area" :style="{'width': videoInfo.baseInfo.width + 'px', 'left': 'calc((100% - '+videoInfo.baseInfo.width+'px)/2)'}">
<!--判断是不是需要展示可编辑水印部分内容-->
<template>
<vue-draggable-resizable
v-if="waterPicInfo.source"
:draggable="currentType === 'addimg'"
:resizable="currentType === 'addimg'"
style="position: absolute"
:w="waterPicWidth"
:h="50"
:x="10"
:y="10"
:min-width="50"
:min-height="50"
:grid="[10,10]"
:parent="true"
@dragging="onDrag"
@resizing="onResize"
>
<i v-if="currentType === 'addimg'" class="iconfont icon-guanbi111 clear-water"
@click="waterPicInfo={source: null,x: 10,y: 10,width: null,height: 50}"></i>
<img :src="waterPicInfo.source" style="width: 100%;height: 100%" :style="{'opacity':waterPicInfo.opacity?waterPicInfo.opacity/100:1}"/>
</vue-draggable-resizable>
</template>
<div ></div>
</div>
</div>
</div>
</div>
<!--底部变化的菜单-->
<div v-show="options.sources[0].src">
<!--轨道区域-->
<div class="track-wrap">
<div class="components_video-navigation navigation">
<div class="component_storyboard storyboard">
<!--视频的帧数组-->
<div class="frames">
<div class="frame loaded" style="width: 80px; height: 50px;" v-for="(item, index) in 13" :key="index">
<img :src="videoInfo.waterFrames[index]" v-if="videoInfo.waterFrames[index]"
class="loaded"/>
</div>
</div>
</div>
<div class="drag-frames">
<ul class="box" ref="box">
<li class="left" ref="left"></li>
<li class="mid" ref="mid">
<div class="resize" ref="resize"></div>
<div class="youbiao" ref="youbiao" :style="{'left':youbiaoLeft}" style="height: 50px;border-left: 1px solid #FFFFFF"></div>
<div class="youbiao-time" ref="youbiaotime" :style="{'left':youbiaoLeft}" v-if="player">{{ transTimeCom }}</div>
<div class="resize2" ref="resize2"></div>
</li>
<li class="right" ref="right"></li>
</ul>
</div>
</div>
</div>
<!--底部操作菜单-->
<div class="bottom-nav">
<div style="display: flex">
<!--控制视频播放的菜单-->
<div class="play-btn bottom-nav-item" @click="!playStatus?player.play():player.pause()">
<i class="iconfont icon-bofang" v-if="!playStatus"></i>
<i class="iconfont icon-weibiaoti519" v-else></i>
</div>
<!--cut视频的部分-->
<template v-if="currentType === 'cut'">
<div class="bottom-nav-item" style="padding: 0 20px;display: flex">
<step @addSecond="addSecond" :type="'start'" @delSecond="delSecond" :initval="videoInfo.controlInfo.start" style="margin-right: 10px;" :min="0" :max="videoInfo.controlInfo.end"></step>
<step @addSecond="addSecond" :type="'end'" @delSecond="delSecond" :initval="videoInfo.controlInfo.end" :min="videoInfo.controlInfo.start" :max="videoInfo.baseInfo.duration"></step>
</div>
</template>
<!--屏幕快照部分-->
<template v-if="currentType === 'snapshot'">
<div class="bottom-nav-item" @click="makePhoto">
<i class="iconfont icon-post_pic" style="margin-right: 10px"></i> 下载快照
</div>
</template>
<!--添加水印图片部分-->
<template v-if="currentType === 'addimg'">
<div class="bottom-nav-item" @click="selectPic">
<i class="iconfont icon-ai-up-img" style="margin-right: 10px"></i> 添加图片
</div>
<div class="bottom-nav-item">
<label style="display: inline-block">透明度</label>
<div style="position: relative;display: inline-block;min-width: 160px;transform: translateY(-5px)">
<vue-range-slider width="160" class="range-slide" ref="slider" v-model="waterPicInfo.opacity"></vue-range-slider>
</div>
</div>
</template>
<!--视频声音相关-->
<template v-if="currentType === 'audio'">
<div class="bottom-nav-item" @click="downloadAudio" v-tip.top.dark.hover="'下载视频的音频'">
<i class="iconfont icon-xiazai" style="margin-right: 10px"></i> 下载音频
</div>
<div class="bottom-nav-item" @click="selectAudio" v-tip.top.dark.hover="'添加背景音'">
<i class="iconfont icon-yinpinbofang" style="margin-right: 10px"></i> {{videoInfo.audio.name?'替换':'添加'}}背景音
<span style="font-size: 12px" v-if="videoInfo.audio.name">(已添加：{{videoInfo.audio.name}})</span>
</div>
</template>
</div>
<!--靠右的设置、保存输出-->
<template v-if="videoInfo.baseInfo.originHeight">
<div style="float: right">
<!--输出选项进行设置-->
<div class="setting-box" v-if="showSetting" @mouseleave="showSetting=false">
<div v-for="key in Object.keys(resolvingPower)" :key="key">
<template v-if="!key || key <= videoInfo.baseInfo.originHeight">
<label>
<input type="radio" name ="rdSpeed" :value="key" v-model="videoInfo.controlInfo.resolvingPower">
{{resolvingPower[key]}}
</label>
</template>
</div>
</div>
<div class="bottom-nav-item" v-tip.top.dark.hover="'输出设置'" @click="showSetting = !showSetting">
<i class="iconfont icon-shezhi"></i>
</div>
<div class="bottom-nav-item" v-tip.top.dark.hover="'保存'" @click="saveFinally">
保存
</div>
</div>
</template>
</div>
</div>
</div>
<!--选择视频-->
<div class="select-video-box" v-if="!options.sources[0].src">
<div class="title">简易剪辑视频</div>
<div class="tips" @click="initFfmpeg"> Trim or cut video</div>
<div class="select-type" v-if="initFfmpegBool">
<div class="select-type-inner">
<div style="display: inline-block" class="open-file" @click="selectFile">打开文件</div>
<div style="display: inline-block" class="arrow"
@click="showSelectDrop?showSelectDrop=false:showSelectDrop=true"><i class="iconfont icon-xia"></i></div>
</div>
<div class="select-drop" v-if="showSelectDrop" @mouseleave="showSelectDrop=false">
<div class="select-item">本地视频</div>
<div class="select-item">平台视频</div>
<div class="select-item" @click="inputFileUrl">通过视频URL</div>
</div>
</div>
<div v-else style="color: white">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div style="margin-top: 20px;">环境准备中...</div>
</div>
</div>
</div>
<!--加载视频中，请稍等的过程-->
<div class="full-loading" v-show="showFullLoading">
<div style="color: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">
<div class="loading" style="margin-top: 0px;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div style="margin-top: 20px;">{{showFullLoadingText}}</div>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import { mapActions } from 'vuex'
// import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
import step from './Step'
import 'vue-range-component/dist/vue-range-slider.css'
import VueRangeSlider from 'vue-range-component'
// const ffmpeg = createFFmpeg({ log: true })
// eslint-disable-next-line no-undef
const { createFFmpeg, fetchFile } = FFmpeg
const ffmpeg = createFFmpeg({
log: true,
corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js'
})
export default {
name: 'Home',
components: { step, VueRangeSlider },
props: ['videoinfo_parent'],
data () {
return {
maxSize: 1024 * 1024 * 1024,
showFullLoading: false,
showFullLoadingText: '',
showSetting: false,
resolvingPower: {
360: '流畅360P', // '640:-1': '360P'
480: '标清480P', // '720:-1': '480P',
720: '高清720P', // '1280:-1'
1080: '超清1080P', // '1920:-1'
'': '原视频输出'
},
playStatus: false,
currentType: 'cut', // 当前默认操作项，cut 裁剪,addimg 添加水印图片，snapshot 屏幕快照，crop 裁剪划选区,audio视频声音
initFfmpegBool: false, // 是否已经初始化ffmpeg环境
videoInfo: { // 操作视频的基本信息
baseInfo: {
name: '新编辑视频',
resolvingPower: null, // 原始视频的分辨率
width: null,
height: 360,
duration: 0,
originWidth: null, // 原视频的宽
originHeight: null // 原视频的高
},
currentTime: 0,
controlInfo: {
start: 0, // 开始时间
end: null, // 结束时间
resolvingPower: null // 输出的码率
},
audio: {
src: null,
name: null
},
waterFrames: [] // 获得对应帧数的图片数组，保留10张图片
},
waterPicWidth: 50,
waterPicInfo: { // 水印图片的相关信息
source: null,
x: 10,
y: 10,
width: null,
height: 50,
opacity: 100
},
percent: 0,
showSelectDrop: false,
fileObj: null,
player: null,
options: {
controls: false, // 是否显示底部控制栏
preload: 'auto', // 加载<video>标签后是否加载视频
autoplay: true, // 静音播放
// playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
width: '800px',
height: '360px',
controlBar: {
// 自定义按钮的位置
children: []
},
sources: [
{
src: '',
// src: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
type: 'video/mp4'
}
]
}
}
},
mounted () {
this.initFfmpeg()
},
filters: {
},
computed: {
// 动态计算时间游标的值显示
youbiaoLeft () {
if (!this.videoInfo.currentTime) {
return '0px'
}
let left = 0
const percent = (Math.floor(this.videoInfo.currentTime) / this.videoInfo.baseInfo.duration).toFixed(2)
// 计算总长100的百分之几，并减去左边的宽度
left = percent * 1000 - this.$refs.left.offsetWidth
return left + 'px'
},
transTimeCom () {
if (!this.videoInfo.currentTime) {
return '00:00'
}
const secondsT = this.videoInfo.currentTime
const time = moment.duration(secondsT, 'milliseconds')
const hours = time.hours()
const minutes = time.minutes()
const seconds = time.seconds()
const milliseconds = time.milliseconds()
// return moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.SSS')
return moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.S')
}
},
methods: {
...mapActions({
up: 'up'
}),
closeProject () {
this.options.sources[0].src = ''
this.videoInfo.waterFrames = []
this.waterPicInfo.source = null
},
reset () {
try {
// 重置到最初始的状态
// 1 清除水印设置
this.waterPicInfo = {
source: null,
x: 10,
y: 10,
width: null,
height: 50,
opacity: 100
}
// 重置begin、end time
this.videoInfo.controlInfo.start = 0
this.videoInfo.controlInfo.end = this.videoInfo.baseInfo.duration
// 重置视轨左右调节部分
this.calLeftRightYouBiao()
this.$msg.success('重置成功！')
} catch (e) {
this.$msg.error('重置失败！')
}
},
blobToBase64 (blob) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader()
fileReader.onload = (e) => {
resolve(e.target.result)
}
// readAsDataURL
fileReader.readAsDataURL(blob)
fileReader.onerror = () => {
reject(new Error('blobToBase64 error'))
}
})
},
dataURLtoBlob (dataurl) {
var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
},
async loadFileToBase64 (fileObj) {
return new Promise(resolve => {
const files = new window.File([fileObj], 'source.mp4', { type: 'video/mp4' })
var reader = new FileReader()
reader.readAsDataURL(files)
reader.onload = function (e) {
// console.info(this.result)
resolve(this.result)
}
})
},
// 组装命令进行保存输出
async saveFinally () {
this.setFullLoading(true, '处理中...')
try {
/**
* 整体过程
* 1、获得水印，计算水印大小
* 2、获得裁剪视频的时间起始点
* 3、设置分辨率
* 4、设置背景音频输出
* **/
// 添加水印并设置水印透明度的命令
// ffmpeg -y -i input.mp4 -i water1.png -filter_complex "[1]lut=a=val*0.3[a];[0][a]overlay=0:0" -c:v libx264 -an output.mp4
// 获得源
this.showFullLoadingText = '获得视频源...'
// ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(await this.loadFileToBase64(this.fileObj)))
// 判断有无水印，有的话添加水印
let waterArray = []
if (this.waterPicInfo.source) { // 有水印资源
// 1 获得水印原始大小
this.showFullLoadingText = '准备水印配置...'
ffmpeg.FS('writeFile', 'overlay.png', await fetchFile(this.waterPicInfo.source))
console.info(this.waterPicInfo.width)
console.info(this.videoInfo.baseInfo.originWidth)
console.info(this.videoInfo.baseInfo.width)
await ffmpeg.run(
'-i',
'overlay.png',
'-y',
'-v',
'quiet',
'-vf',
'scale=' + parseInt(this.waterPicInfo.width * this.videoInfo.baseInfo.originWidth / this.videoInfo.baseInfo.width) + ':' + parseInt(this.waterPicInfo.height * this.videoInfo.baseInfo.originHeight / this.videoInfo.baseInfo.height),
'scaled.png'
)
// 计算相对于原视频的位置
const x = parseInt(this.waterPicInfo.x * this.videoInfo.baseInfo.originWidth / this.videoInfo.baseInfo.width)
const y = parseInt(this.waterPicInfo.y * this.videoInfo.baseInfo.originHeight / this.videoInfo.baseInfo.height)
// 2、设置一个指定大小的水印
// ffmpeg -i watermark.png -y -v quiet -vf scale=1280*0.15:-1 scaled.png
// -vf "movie=scaled.png, scale=50:50, lut=a=val*0.5[watermark];[in][watermark] overlay=10:10[out]"
const scaleWater = 'scale=' + parseInt(this.waterPicInfo.width * this.videoInfo.baseInfo.originWidth / this.videoInfo.baseInfo.width) + ':' + parseInt(this.waterPicInfo.height * this.videoInfo.baseInfo.originHeight / this.videoInfo.baseInfo.height)
const overlay = x + ':' + y
const waterOpcity = this.waterPicInfo.opacity * 0.01
waterArray = ['-vf', 'movie=overlay.png, ' + scaleWater + ', lut=a=val*' + waterOpcity + '[watermark];[in][watermark] overlay=' + overlay + '[out]']
}
const start = ['-i', 'source.mp4']
// const lineTime = ['-ss', this.videoInfo.controlInfo.start * 0.001, '-to', this.videoInfo.controlInfo.end * 0.001] // 时间线的begin/end
// beigin time 和 end time
const beginTime = this.videoInfo.controlInfo.start * 0.001.toFixed(3) + ''
const endTime = this.videoInfo.controlInfo.end * 0.001.toFixed(3) + ''
const lineTime = ['-ss', beginTime, '-to', endTime] // 时间线的begin/end
// 设置分辨率,保证不变形 ffmpeg -i 1.mp4 -strict -2 -vf scale=-1:480 4.mp4
let resolvingPower = []
// console.info(this.videoInfo.controlInfo.resolvingPower)
// console.info(this.videoInfo.baseInfo.originHeight)
let tempHeight = parseInt(this.videoInfo.controlInfo.resolvingPower)
let tempWidth = parseInt(this.videoInfo.baseInfo.originWidth * tempHeight / this.videoInfo.baseInfo.originHeight)
if (tempWidth % 2 !== 0) {
tempWidth = tempWidth + 1
}
if (tempHeight % 2 !== 0) {
tempHeight = tempHeight + 1
}
console.info(tempWidth)
console.info(tempHeight)
if (this.videoInfo.controlInfo.resolvingPower && (tempHeight !== this.videoInfo.baseInfo.originHeight)) {
// resolvingPower = ['-s', tempWidth + ':' + tempHeight]
if (waterArray.length === 0) {
resolvingPower = ['-vf', 'scale=' + tempWidth + ':' + tempHeight]
} else {
resolvingPower = ['-s', tempWidth + ':' + tempHeight]
}
}
// 动态计算视频的宽
// const resolvingPower = ['-strict', '-2', '-vf', 'scale=' + parseInt(this.videoInfo.baseInfo.width * this.videoInfo.controlInfo.resolvingPower / this.videoInfo.baseInfo.height) + ':' + this.videoInfo.controlInfo.resolvingPower]
// 设置背景音频
let audio = []
if (this.videoInfo.audio.src) {
// ffmpeg -i b.mp4 -i audio.mp3 -c:v copy -c:a aac -strict experimental -map 0:v:0 -map 1:a:0 output.mp4
// ffmpeg -stream_loop 10000 -i 11582.mp3 -ss 00:00:00.0 -t 00:02:00 output.mp3
ffmpeg.FS('writeFile', 'audio.mp3', await fetchFile(this.videoInfo.audio.src))
await ffmpeg.run('-stream_loop', '-1', '-i', 'audio.mp3', '-ss', beginTime, '-t', endTime, 'audioloop.mp3')
audio = ['-i', 'audioloop.mp3', '-c:a', 'aac', '-strict', 'experimental', '-map', '0:v:0', '-map', '1:a:0']
}
const end = ['download.mp4']
this.showFullLoadingText = '视频处理中，请稍后...'
ffmpeg.setProgress(({ ratio }) => {
console.log(ratio)
/*
* ratio is a float number between 0 to 1.
*/
if (ratio !== 1) {
this.showFullLoadingText = '视频处理中，请稍后...' + (ratio * 100).toFixed(2) + '%'
} else {
this.showFullLoading = false
this.showFullLoadingText = ''
}
})
await ffmpeg.run(...start, ...audio, ...lineTime, ...waterArray, ...resolvingPower, ...end)
// 下载到本地
this.fileDownloadLocal('download.mp4')
// 保存至Vod平台
// this.saveFileToVod('download.mp4')
this.setFullLoading(false)
} catch (e) {
this.$msg.error('导出出问题了，请重新试试吧！')
this.setFullLoading(false)
}
this.setFullLoading(false)
},
// 下载视频的背景音频
async downloadAudio () {
this.setFullLoading(true, '视频处理中，请稍后...')
// 参考命令
// ffmpeg -i 人生若只如初见.flv -vn r.mp3
// ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
// ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(await this.loadFileToBase64(this.fileObj)))
await ffmpeg.run(
'-i',
'source.mp4',
'-vn',
'audio.mp4'
)
this.fileDownloadLocal('audio.mp4')
this.setFullLoading(false)
},
// 保存当前帧的快照
async makePhoto () {
this.setFullLoading(true, '视频处理中，请稍后...')
// 参考ffmpeg命令
// ffmpeg -i 2.mp4 -y -f image2 -ss 01.010 -t 0.001 b.jpg
// 执行命令
// ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
// console.info(await this.blobToBase64(this.dataURLtoBlob(this.fileObj)))
// const files = new window.File([this.fileObj], 'a.mp4', { type: 'video/mp4' })
// ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
const timestamp = new Date().getTime()
await ffmpeg.run(
'-i',
'source.mp4',
'-y',
'-f',
'image2',
'-ss',
this.player.currentTime() + '',
'-t',
'0.001',
timestamp + '.png'
)
this.fileDownloadLocal(timestamp + '.png')
this.setFullLoading(false)
},
// 重新计算左右游标的显示位置
calLeftRightYouBiao () {
// 重新计算左右两侧的时间显示和left、right位置
const leftPercent = (this.videoInfo.controlInfo.start / this.videoInfo.baseInfo.duration).toFixed(2)
const rightPercent = 1 - (this.videoInfo.controlInfo.end / this.videoInfo.baseInfo.duration).toFixed(2)
const leftWidth = parseInt(leftPercent * 1000)
const rightWidth = parseInt(rightPercent * 1000)
this.$refs.left.style.width = leftWidth + 'px'
this.$refs.right.style.width = rightWidth + 'px'
const minWidth = 1000 - leftWidth - rightWidth
this.$refs.mid.style.width = minWidth + 'px'
this.$refs.resize.setAttribute('data-before', this.transTime(this.videoInfo.controlInfo.start) + 's')
this.$refs.resize2.setAttribute('data-after', this.transTime(this.videoInfo.controlInfo.end) + 's')
},
// 增加秒数
addSecond (type) {
if (type === 'start') {
if ((this.videoInfo.controlInfo.start + 100) < this.videoInfo.controlInfo.end) {
this.videoInfo.controlInfo.start = this.videoInfo.controlInfo.start + 100
}
// 重新定位播放的游标
this.videoInfo.currentTime = this.videoInfo.controlInfo.start
if (this.player) {
this.player.currentTime(this.videoInfo.currentTime / 1000)
}
} else {
if ((this.videoInfo.controlInfo.end + 100) <= this.videoInfo.baseInfo.duration) {
this.videoInfo.controlInfo.end = this.videoInfo.controlInfo.end + 100
} else {
this.videoInfo.controlInfo.end = this.videoInfo.baseInfo.duration
this.$msg.warning('值已经最大了！')
}
}
this.calLeftRightYouBiao()
},
// 减少秒数
delSecond (type) {
if (type === 'start') {
if ((this.videoInfo.controlInfo.start - 100) >= 0) {
this.videoInfo.controlInfo.start = this.videoInfo.controlInfo.start - 100
// 重新定位播放的游标
this.videoInfo.currentTime = this.videoInfo.controlInfo.start
if (this.player) {
this.player.currentTime(this.videoInfo.currentTime / 1000)
}
} else {
this.videoInfo.controlInfo.start = 0
this.$msg.warning('已经最小值了！')
}
} else {
if ((this.videoInfo.controlInfo.end - 100) > this.videoInfo.controlInfo.start) {
this.videoInfo.controlInfo.end = this.videoInfo.controlInfo.end - 100
}
}
// 重新计算左右两侧的时间显示和left、right位置
this.calLeftRightYouBiao()
/* const leftPercent = (this.videoInfo.controlInfo.start / this.videoInfo.baseInfo.duration).toFixed(2)
const rightPercent = 1 - (this.videoInfo.controlInfo.end / this.videoInfo.baseInfo.duration).toFixed(2)
const leftWidth = parseInt(leftPercent * 1000)
const rightWidth = parseInt(rightPercent * 1000)
this.$refs.left.style.width = leftWidth + 'px'
this.$refs.right.style.width = rightWidth + 'px'
const minWidth = 1000 - leftWidth - rightWidth
this.$refs.mid.style.width = minWidth + 'px' */
},
// 格式化时间
transTime (secondsT) {
const time = moment.duration(secondsT, 'milliseconds')
const hours = time.hours()
const minutes = time.minutes()
const seconds = time.seconds()
const milliseconds = time.milliseconds()
// return moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.SSS')
return moment({ h: hours, m: minutes, s: seconds, ms: milliseconds }).format('HH:mm:ss.S')
},
onResize (x, y, width, height) {
this.waterPicInfo.x = x
this.waterPicInfo.y = y
this.waterPicInfo.width = width
this.waterPicInfo.height = height
},
onDrag (x, y) {
this.waterPicInfo.x = x
this.waterPicInfo.y = y
},
// 点击头部菜单切换操作类型
changeCurrentType (type) {
this.currentType = type
},
// 初始化配置ffmpeg环境
async initFfmpeg () {
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
this.initFfmpegBool = true
this.$msg.success('环境初始化成功！')
// 获得路由传参
console.info(this.$route.query.url)
let tempUrl = ''
if (this.$route.query.url) {
tempUrl = this.$route.query.url + '&sign=' + this.$route.query.sign + '&us=' + this.$route.query.us
}
console.info(tempUrl)
const tempName = this.$route.query.name
if (tempUrl && tempName) { // 有传过来的url参数
this.videoInfo.baseInfo.name = tempName
// 通过url加载视频资源
this.initVideoCutByUrl(tempUrl)
}
}
},
initVideoCutByUrl (url) {
const match = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[//?/:]?.*$/
// 判断是不是正确的url
if (url === 'https://') {
return
}
if (match.test(url)) {
this.setFullLoading(true, '请求视频资源')
this.loadVideoByUrl(this, url)
} else {
this.setFullLoading(false)
this.$msg.error('该视频格式不支持，请换一个吧！')
}
},
// 初始化拖拽视轨
dragControllerDiv () {
var resize = document.getElementsByClassName('resize')
var resize2 = document.getElementsByClassName('resize2')
var left = document.getElementsByClassName('left')
var right = document.getElementsByClassName('right')
var mid = document.getElementsByClassName('mid')
var box = document.getElementsByClassName('box')
const vm = this
for (let i = 0; i < resize.length; i++) {
resize[i].onmousedown = function (e) {
e = e || window.event // 兼容低版本IE 防止时间参数对象失效
var startX = e.clientX
// resize[i].left = resize[i].offsetLeft
var leftTemp = mid[i].offsetLeft
document.onmousemove = function (e) {
var endX = e.clientX
var rightW = right[i].offsetWidth
var moveLen = leftTemp + (endX - startX)
var maxT = box[i].clientWidth
if (moveLen < 0) moveLen = 0
if (moveLen > maxT - rightW - 0) moveLen = maxT - rightW - 0
// resize[i].style.left = moveLen
for (let j = 0; j < left.length; j++) {
if ((box[i].clientWidth - moveLen - rightW) < 10) {
left[j].style.width = (box[i].clientWidth - 10 - rightW) + 'px'
mid[j].style.width = '10px'
} else {
left[j].style.width = moveLen + 'px'
mid[j].style.width = (box[i].clientWidth - moveLen - rightW) + 'px'
}
// 动态计算需要显示的秒数
const temp = left[j].clientWidth / maxT * vm.videoInfo.baseInfo.duration
// resize[i].setAttribute('data-before', Number(temp).toFixed(1) + 's')
resize[i].setAttribute('data-before', vm.transTime(temp) + 's')
// 更新start值，并更新游标位置
vm.videoInfo.controlInfo.start = temp
vm.videoInfo.currentTime = vm.videoInfo.controlInfo.start
// 更新当前播放的时间点
vm.player.currentTime(vm.videoInfo.currentTime / 1000)
}
}
document.onmouseup = function (evt) {
document.onmousemove = null
document.onmouseup = null
resize[i].releaseCapture && resize[i].releaseCapture()
}
resize[i].setCapture && resize[i].setCapture()
return false
}
}
for (let i = 0; i < resize2.length; i++) {
resize2[i].onmousedown = function (e) {
var startX = e.clientX
// resize2[i].left = resize2[i].offsetLeft
var tempLeft = right[i].offsetLeft
document.onmousemove = function (e) {
var endX = e.clientX
var leftW = left[i].offsetWidth
var moveLen = tempLeft + (endX - startX) - leftW
var maxT = box[i].clientWidth
if (moveLen < 0) {
moveLen = 0
return
}
if (moveLen > maxT - leftW - 0) moveLen = maxT - leftW - 0
// resize2[i].style.left = moveLen
for (let j = 0; j < right.length; j++) {
if (moveLen < 10) {
mid[j].style.width = '10px'
right[j].style.width = (box[i].clientWidth - 10 - leftW) + 'px'
} else {
mid[j].style.width = moveLen + 'px'
right[j].style.width = (box[i].clientWidth - moveLen - leftW) + 'px'
}
}
// 动态计算需要显示的秒数
const temp = (left[i].clientWidth + mid[i].clientWidth) / maxT * vm.videoInfo.baseInfo.duration
// resize2[i].setAttribute('data-after', Number(temp).toFixed(1) + 's')
resize2[i].setAttribute('data-after', vm.transTime(temp) + 's')
// 更新end的值并更新游标的位置
vm.videoInfo.controlInfo.end = temp
// 更新起始点游标
vm.videoInfo.currentTime = vm.videoInfo.controlInfo.start
// 更新当前播放的时间点
vm.player.currentTime(vm.videoInfo.currentTime / 1000)
}
document.onmouseup = function (evt) {
document.onmousemove = null
document.onmouseup = null
resize2[i].releaseCapture && resize2[i].releaseCapture()
}
resize2[i].setCapture && resize2[i].setCapture()
return false
}
}
},
async uploadVod (fileObj) {
this.setFullLoading(true, '正在上传至平台')
const vm = this
try {
const result = await this.up({
files: [fileObj],
dirType: 'ClientUsr',
onprogress: (file) => {
// vm.percent = file.percent ? parseInt(file.percent * 100) : 0
this.setFullLoading(true, '正在上传至平台' + parseInt(file.percent * 100) + '%')
}
})
vm.newUrl = result.video.url
console.info(result.video.url)
// alert('上传文件成功！' + result.video.url)
// this.setFullLoading(true,'' + parseInt(file.percent * 100) + '%')
// 调用平台保存文件地址的方法
this.$emit('saveVideoCutFile', { name: this.videoInfo.baseInfo.name, size: fileObj.size, uid: result.fileId })
this.setFullLoading(false)
this.$msg.success({
message: '文件已经上传至平台，请前往列表查看',
showClose: true,
duration: -1
})
} catch (err) {
this.setFullLoading(false)
this.$msg.error('文件上传失败！')
}
},
saveFileToVod (filename) {
const files = new window.File(
[new Blob([ffmpeg.FS('readFile', filename)])],
this.videoInfo.baseInfo.name,
{ type: 'video/mp4' }
)
window.parent.postMessage({ files: files, name: this.videoInfo.baseInfo.name, type: 'upfile' }, '*')
const test = setInterval(() => {
console.info(this.$route.query.uppercent)
if (Number(this.$route.query.uppercent) >= 0 && Number(this.$route.query.uppercent) < 100) {
this.setFullLoading(true, '视频上传中...' + this.$route.query.uppercent + '%')
}
if (Number(this.$route.query.uppercent) === 100) {
this.setFullLoading(false)
clearInterval(test)
}
if (Number(this.$route.query.uppercent) === -1) {
this.setFullLoading(false)
clearInterval(test)
}
}, 100)
process.exit(0)
},
offerFileAsDownload (filename) {
const mime = 'application/octet-stream'
const content = ffmpeg.FS('readFile', 'b.mp4')
console.log(`Offering download of "${filename}", with ${content.length} bytes...`)
var a = document.createElement('a')
a.download = filename
a.href = URL.createObjectURL(new Blob([content], { type: mime }))
a.style.display = 'none'
document.body.appendChild(a)
a.click()
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(a.href)
}, 2000)
},
// 通过文件名将MEMFS文件保存到本地
fileDownloadLocal (filename) {
const mime = 'application/octet-stream'
const content = ffmpeg.FS('readFile', filename)
// console.log(`Offering download of "${filename}", with ${content.length} bytes...`)
var a = document.createElement('a')
a.download = filename
a.href = URL.createObjectURL(new Blob([content], { type: mime }))
a.style.display = 'none'
document.body.appendChild(a)
a.click()
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(a.href)
}, 2000)
ffmpeg.FS('unlink', filename)
},
// 设置满屏loading
setFullLoading (display, msg = '') {
this.showFullLoading = display
this.showFullLoadingText = msg
},
inputFileUrl () {
const _this = this
var url = prompt('请输入视频路径', 'https://')
const match = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[//?/:]?.*$/
// 判断是不是正确的url
if (url === 'https://') {
return
}
if (match.test(url)) {
this.setFullLoading(true, '请求视频资源')
_this.loadVideoByUrl(_this, url)
} else {
_this.setFullLoading(false)
this.$msg.error('您输入的视频格式不支持，请换一个吧！')
}
},
loadVideoByUrl (_this, url) {
try {
const xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.responseType = 'blob'
xhr.onprogress = function (e) {
// _this.updateCircleProgressWrapper(e.loaded, e.total)
if (e.loaded < e.total) {
_this.setFullLoading(true, '加载视频中，请稍等...' + (e.loaded / e.total * 100).toFixed(1) + '%')
} else {
_this.setFullLoading(false)
}
}
xhr.onload = function () {
if (this.status === 200) {
const blob = this.response
// ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(blob))
const url = _this.getObjectURL(blob)
_this.saveToMFS(blob)
_this.options.sources[0].src = url
_this.initVideo(url, _this)
_this.setFullLoading(false)
_this.$msg.success('加载成功！')
} else {
_this.setFullLoading(false)
_this.$msg.error('该视频需要您先下载至本地后再使用！')
}
}
xhr.onreadystatechange = function () {
// 若响应完成且请求成功
if (xhr.status === 200) {
} else {
_this.setFullLoading(false)
_this.$msg.error('该视频需要您先下载至本地后再使用！')
return false
}
}
xhr.send(null)
} catch (e) {
_this.setFullLoading(false)
_this.showFullLoading = false
_this.$msg.error('该视频路径不支持编辑，请换一个吧！')
}
},
async saveToMFS (blob) {
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(blob))
},
// blob对象转本地bloburl
blobToUrl (blobdata) {
return URL.createObjectURL(blobdata)
},
// 用户点击输入视频URL
async inputFileUrlTemp () {
var url = prompt('请输入视频路径', 'https://')
const match = /^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[//?/:]?.*$/
// 判断是不是正确的url
if (url === 'https://') {
return
}
if (match.test(url) && url.endsWith('mp4')) {
try {
this.setFullLoading(true, '加载线上数据中...')
const data = await fetchFile(url)
// 将数据转成base64的形式
const dataBase64 = 'data:video/mp4;base64,' + this.arrayBufferToBase64(data)
this.options.sources[0].src = dataBase64
this.initVideo(dataBase64, this)
this.setFullLoading(false)
this.$msg.success('加载成功！')
} catch (e) {
this.setFullLoading(false)
this.showFullLoading = false
this.$msg.error('该视频路径不支持编辑，请换一个吧！')
}
} else {
this.$msg.error('您输入的视频路径有误！')
}
console.info(url)
},
initPlay () {
const vm = this
this.player = this.$video(this.$refs.videoPlayer, this.options, () => {
const player = vm.player
player.on('loadstart', function () {
console.log('开始请求数据 ')
})
player.on('progress', function () {
console.log('正在请求数据 ')
})
player.on('loadedmetadata', function () {
console.log('获取资源长度完成 ')
})
player.on('canplaythrough', function () {
console.log('视频源数据加载完成')
})
player.on('waiting', function () {
console.log('等待数据')
})
player.on('play', function () {
vm.playStatus = true
console.log('视频开始播放')
})
player.on('playing', function () {
console.log('视频播放中')
})
player.on('pause', function () {
vm.playStatus = false
console.log('视频暂停播放')
})
player.on('ended', function () {
vm.playStatus = false
console.log('视频播放结束')
})
player.on('error', function () {
console.log('加载错误')
})
player.on('seeking', function () {
console.log('视频跳转中')
})
player.on('seeked', function () {
console.log('视频跳转结束')
})
player.on('ratechange', function () {
console.log('播放速率改变')
})
player.on('timeupdate', function () {
// console.log('播放时长改变' + player.currentTime())
// 动态改变游标和游标时间的位置
// 1 计算left值
vm.videoInfo.currentTime = Math.floor(player.currentTime() * 1000)
// 判断当前时间游标是否超过结束的游标，需要自动停止
if (vm.videoInfo.currentTime >= vm.videoInfo.controlInfo.end) {
vm.videoInfo.currentTime = vm.videoInfo.controlInfo.end
player.pause()
}
})
player.on('volumechange', function () {
console.log('音量改变')
})
player.on('stalled', function () {
console.log('网速异常')
})
})
},
selectFile () {
const inp = document.getElementById('pop_video')
if (inp) {
inp.click()
}
},
selectPic () {
const inp = document.getElementById('pop_pic')
if (inp) {
inp.click()
}
},
selectAudio () {
const inp = document.getElementById('pop_audio')
if (inp) {
inp.click()
}
},
// 上传音频
getAudio (event) {
const vm = this
if (!event.target.files[0]) {
return
}
const file = event.target.files[0]
if (file.type !== 'audio/mpeg') {
this.$msg.error('图片仅支持png和jpeg格式！')
return
}
if (window.FileReader) {
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function (e) {
vm.videoInfo.audio.src = e.target.result
vm.videoInfo.audio.name = file.name
vm.$refs.fileAudio.value = ''
}
}
},
// 上传图片水印
getPic (event) {
if (!event.target.files[0]) {
return
}
const file = event.target.files[0]
if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
this.$msg.error('图片仅支持png和jpeg格式！')
return
}
// 暂存当前图片水印信息
const vm = this
if (window.FileReader) {
var reader = new FileReader()
reader.readAsDataURL(file)
// 监听文件读取结束后事件
reader.onloadend = function (e) {
console.info(e)
// 获得图片的尺寸信息
var img = new Image()
img.src = e.target.result
img.onload = () => {
vm.waterPicWidth = parseInt(50 * img.width / img.height)
vm.waterPicInfo.width = parseInt(50 * img.width / img.height)
vm.waterPicInfo.source = e.target.result
// w = img.width
// h = img.height
}
}
}
this.$refs.filePic.value = ''
},
// 上传视频后解析视频帧
async getVideoFrames () {
this.videoInfo.waterFrames = []
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
}
// 计算10个对应的时间点
const averageDura = parseInt(this.videoInfo.baseInfo.duration * 0.001 / 13)
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
ffmpeg.setProgress(({ ratio }) => {
this.setFullLoading('true', '视频解析中...')
console.log(ratio)
/*
* ratio is a float number between 0 to 1.
*/
if (ratio !== 1) {
this.showFullLoadingText = '视频解析中，请稍后...' + (ratio * 100).toFixed(2) + '%'
} else {
this.showFullLoading = false
this.showFullLoadingText = ''
}
})
try {
await ffmpeg.run('-ss', '00:00', '-i', 'source.mp4', '-f', 'image2', '-r', '1/' + averageDura, '-s', '100*50', 'image-%2d.png')
for (let i = 0; i < 13; i++) {
let temp = i + 1
if (temp < 10) {
temp = '0' + temp
}
// await ffmpeg.run('-i', 'source.mp4', '-r', '1', '-ss', parseInt(averageDura * i) + '', '-vframes', '1', '-f', 'image2', '-s', '100*50', 'image-' + temp + '.png')
this.videoInfo.waterFrames.push(this.arrayBufferToBase64(ffmpeg.FS('readFile', 'image-' + temp + '.png')))
}
} catch (e) {
this.videoInfo.waterFrames = []
// ffmpeg -i 22.mp4 -r 1 -ss 00:00:00 -vframes 10 image-%5d.jpeg
await ffmpeg.run('-ss', '00:00:00', '-i', 'source.mp4', '-f', 'image2', '-r', '1', '-vframes', '14', '-s', '100*50', 'image-%2d.png')
for (let i = 0; i < 13; i++) {
let temp = i + 1
if (temp < 10) {
temp = '0' + temp
}
// await ffmpeg.run('-i', 'source.mp4', '-r', '1', '-ss', parseInt(averageDura * i) + '', '-vframes', '1', '-f', 'image2', '-s', '100*50', 'image-' + temp + '.png')
this.videoInfo.waterFrames.push(this.arrayBufferToBase64(ffmpeg.FS('readFile', 'image-' + temp + '.png')))
}
}
},
arrayBufferToBase64 (array) {
array = new Uint8Array(array)
var length = array.byteLength
var table = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
'w', 'x', 'y', 'z', '0', '1', '2', '3',
'4', '5', '6', '7', '8', '9', '+', '/']
var base64Str = ''
for (var i = 0; length - i >= 3; i += 3) {
var num1 = array[i]
var num2 = array[i + 1]
var num3 = array[i + 2]
base64Str += table[num1 >>> 2] +
table[((num1 & 0b11) << 4) | (num2 >>> 4)] +
table[((num2 & 0b1111) << 2) | (num3 >>> 6)] +
table[num3 & 0b111111]
}
var lastByte = length - i
if (lastByte === 1) {
var lastNum1 = array[i]
base64Str += table[lastNum1 >>> 2] + table[((lastNum1 & 0b11) << 4)] + '=='
} else if (lastByte === 2) {
// eslint-disable-next-line no-redeclare
var lastNum1 = array[i]
var lastNum2 = array[i + 1]
base64Str += table[lastNum1 >>> 2] +
table[((lastNum1 & 0b11) << 4) | (lastNum2 >>> 4)] +
table[(lastNum2 & 0b1111) << 2] +
'='
}
return base64Str
},
// 判断源文件是否已经写入ffmpeg
async existSourceFile () {
try {
if (await ffmpeg.FS('readFile', 'source.mp4')) {
} else {
}
} catch (err) {
console.info(err)
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(this.fileObj))
}
},
async initVideo (videoBase64, vm) {
vm.fileObj = videoBase64
vm.options.sources[0].src = videoBase64
vm.$nextTick(() => {
const video = document.createElement('video')
video.preload = 'metadata'
video.onloadedmetadata = async () => {
// 获得视频时长
window.URL.revokeObjectURL(video.src)
const duration = video.duration
console.info('视频尺寸')
// 通过视频尺寸计算视频部分的画布大小，否则影响水印添加
// 判断视频的宽高是不是为0，为0的话要计算某一帧图片的大小
const tempWidth = video.videoWidth
const tempHeight = video.videoHeight
if (video.videoWidth === 0) {
vm.setFullLoading(false)
vm.options.sources[0].src = ''
vm.videoInfo.waterFrames = []
vm.$msg.error('您的视频损坏了，请换一个试试吧！')
} else {
vm.calVideo(vm, tempWidth, tempHeight, duration)
}
}
video.src = videoBase64
})
},
calVideo (vm, tempWidth, tempHeight, duration) {
// console.info(video.videoWidth)
// console.info(video.videoHeight)
vm.videoInfo.baseInfo.width = 360 * tempWidth / tempHeight
vm.options.width = vm.videoInfo.baseInfo.width
vm.videoInfo.baseInfo.duration = duration * 1000
vm.videoInfo.controlInfo.end = vm.videoInfo.baseInfo.duration
vm.videoInfo.baseInfo.originWidth = tempWidth
vm.videoInfo.baseInfo.originHeight = tempHeight
// 存原始视频的分辨率
// vm.video.baseInfo.= video.videoHeight
// 设置默认输出尺寸的值
if (tempHeight >= 1080) {
vm.videoInfo.controlInfo.resolvingPower = '1080'
} else if (tempHeight >= 720) {
vm.videoInfo.controlInfo.resolvingPower = '720'
} else if (tempHeight >= 480) {
vm.videoInfo.controlInfo.resolvingPower = '480'
} else if (tempHeight >= 360) {
vm.videoInfo.controlInfo.resolvingPower = '360'
} else {
vm.videoInfo.controlInfo.resolvingPower = ''
}
// 放置时间轴的时间显示
var resize = document.getElementsByClassName('resize')
var resize2 = document.getElementsByClassName('resize2')
resize[0].setAttribute('data-before', '00:00:00s')
resize2[0].setAttribute('data-after', vm.transTime(duration * 1000) + 's')
// resize2[0].setAttribute('data-after', duration + 's')
vm.$nextTick(() => {
vm.dragControllerDiv()
vm.initPlay()
})
// 对视频进行分帧,太慢了，暂时关闭
// vm.getVideoFrames()
this.extractFramesFromVideo(this.fileObj)
},
async extractFramesFromVideo (videoUrl) {
const vm = this
vm.videoInfo.waterFrames = []
var video = document.createElement('video')
var canvas = document.createElement('canvas')
canvas.width = 88
canvas.height = 50
video.addEventListener('loadeddata', function () {
for (let i = 0; i < 14; i++) {
const temp = parseInt(video.duration / 14)
setTimeout(() => {
if (!isNaN(video.duration)) {
// var rand = Math.round(Math.random() * video.duration * 1000) + 1
video.currentTime = temp * i === 0 ? 0.1 : temp * i
}
}, 500 * i)
}
}, false)
video.addEventListener('seeked', function () {
var context = canvas.getContext('2d')
context.drawImage(video, 0, 0, canvas.width, canvas.height)
// 转换成base64形式
const img = canvas.toDataURL('image/jpeg') // 这个就是图片的base64
vm.videoInfo.waterFrames.push(img)
}, false)
video.src = videoUrl
},
// 上传视频
async getVideo (event) {
if (this.player) {
this.player.pause()
// this.player.dispose()
}
if (!event.target.files[0]) {
return
}
const file = event.target.files[0]
if (file.type !== 'video/mp4') {
this.$msg.error('请选择MP4格式视频！')
return
}
if (file.size > this.maxSize) {
this.$msg.error('只能编辑1G以内的视频文件！')
}
// document.getElementById('pop_video').value = null
this.videoInfo.baseInfo.name = file.name
this.options.sources[0].src = ''
const vm = this
const blobUrl = this.getObjectURL(file)
ffmpeg.FS('writeFile', 'source.mp4', await fetchFile(file))
vm.initVideo(blobUrl, vm)
},
// 将文件转blob地址
getObjectURL (file) {
var url = null
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file)
} else if (window.URL !== undefined) { // mozilla(firefox)兼容火狐
url = window.URL.createObjectURL(file)
} else if (window.webkitURL !== undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file)
}
return url
}
},
beforeDestroy () {
if (this.player) {
this.player.dispose()
}
}
}
</script>
<style>
.m-message-container{
z-index: 9999999999 !important;
}
</style>
<style lang="less" scoped>
@import "../assets/css/common";
</style>
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)