本文转载https://blog.csdn.net/RosaChampagne/article/details/128020428?spm=1001.2014.3001.5502的文章
安装插件
npm install vue-konva@2 konva --save
在main.js中使用
import Vue from 'vue'; import VueKonva from 'vue-konva'; Vue.use(VueKonva);
相关实现代码
html
<template> <div class="video-preview-wrapper"> <div ref="videoPreviewBox" class="video-preview-box"> <div class="video-box"> <v-stage ref="stage" :config="stageConfig" @click="onControl"> <v-layer ref="layer"> <v-image ref="frame" :config="imageConfig" /> </v-layer> <v-layer> <v-image v-for="(cover, index) in videoCovers" :key="index" :config="cover" /> </v-layer> </v-stage> </div> <div class="control-play"> <div class="control-play-btn" @click="onControl"> <i :class="[{ 'el-icon-video-pause': isPlay }, { 'el-icon-video-play': !isPlay }]" /> </div> <div class="control-progress common-progress"> <div> <el-slider v-model="videoProgress" :show-tooltip="false" :max="canvas.duration" input-size="small" @change="onProgressChange" /> </div> </div> <div class="current-time">{{ currentTime }}</div> / <div class="duration">{{ duration }}</div> <div class="video-speed-box"> <el-dropdown placement="bottom" @command="onCommand"> <div class="video-speed-show">{{ playbackRate }}x</div> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="1">0.5x</el-dropdown-item> <el-dropdown-item command="2">1x</el-dropdown-item> <el-dropdown-item command="3">1.5x</el-dropdown-item> <el-dropdown-item command="4">2x</el-dropdown-item> <el-dropdown-item command="5">3x</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> <div class="control-voice common-progress"> <span class="voice-icon" /> <div class="voice-slider"> <el-slider v-model="voiceProgress" input-size="small" @change="onVoiceChange" /> </div> </div> <div class="fullscreen" title="全屏" @click="onFullScreen"> <i class="el-icon-full-screen" /> </div> </div> </div> </div> </template>
相关方法
export default { name: 'VideoPreview', data() { return { stageConfig: { width: window.innerWidth, height: (window.innerHeight - 64), }, imageConfig: { image: null, width: window.innerWidth, height: (window.innerHeight - 64), }, canvas: { duration: 10, volume: 1, playbackRate: 1, frames: [ { imageUrl: require('./bg1.jpg'), duration: 3, videos: [ { x: 20, y: 100, width: 200, height: 200, cover: require('./VfE_html5.jpg'), url: require('./VfE_html5.mp4'), volume: 1, playbackRate: 1, }, { x: 420, y: 100, width: 200, height: 200, cover: require('./video_thumb.jpg'), url: require('./video.mp4'), volume: 1, playbackRate: 1, }, ], audios: [ { url: require('./dengnixiake.flac'), volume: 1, }, ], }, { imageUrl: require('./bg2.jpg'), duration: 3, videos: [ { x: 100, y: 100, width: 200, height: 200, cover: require('./VfE_html5.jpg'), url: require('./flower.mp4'), volume: 1, playbackRate: 1, }, ], audios: [], }, { imageUrl: require('./bg3.jpg'), duration: 2, videos: [], audios: [ { url: require('./shuohaobuku.flac'), volume: 1, }, ], }, { imageUrl: require('./bg4.jpg'), duration: 2, videos: [], audios: [], }, ], }, videoCovers: [], videos: [], audios: [], isPlay: false, duration: 0, currentTime: '00:00:00', videoProgress: 0, playbackRate: 1, voiceProgress: 100, videoTimeTimer: null, videoSceneTimer: null, videoTimers: [], audioTimers: [], }; }, watch: { videoProgress(value) { // 如果播放完成,则暂停播放,清除视频时间定时器 if (value === this.canvas.duration) { this.isPlay = false; clearInterval(this.videoTimeTimer); } // 更换视频背景图 this.canvas.frames.forEach(({ imageUrl, startAt, endAt }) => { if (value >= startAt && value < endAt) { const img = new Image(); img.src = imageUrl; img.onload = () => { if (`http://localhost:8080${imageUrl}` !== this.imageConfig.image.src) { this.imageConfig.image = img; } }; } }); // 暂停不在播放时间范围内的窗口视频 this.videos .filter(({ startAt, endAt }) => (this.videoProgress < startAt || this.videoProgress > endAt)) .forEach(({ videoObj }) => { videoObj.pause(); videoObj.currentTime = 0; }); // 暂停不在播放时间范围内的音频 this.audios .filter(({ startAt, endAt }) => (this.videoProgress < startAt || this.videoProgress > endAt)) .forEach(({ audioObj }) => { audioObj.pause(); audioObj.currentTime = 0; }); }, }, created() { this.duration = this.formatVideoTime(this.canvas.duration); // 计算出每一个场景的开始时间、结束时间 const durationList = this.canvas.frames.map(({ duration }) => duration); durationList.reduce((prev, current, idx) => { if (idx <= 1) { this.canvas.frames[0].startAt = 0; this.canvas.frames[0].endAt = prev; } this.canvas.frames[idx].startAt = prev; this.canvas.frames[idx].endAt = prev + current; return prev + current; }); // 将所有场景的窗口视频、音频初始化 this.canvas.frames.forEach(({ videos, audios, startAt, endAt }) => { videos.forEach((video) => { const videoObj = document.createElement('video'); videoObj.src = video.url; videoObj.muted = true; videoObj.addEventListener('play', () => { this.videoCovers = []; this.timerCallback(); }); this.videos.push({ videoObj, x: video.x, y: video.y, width: video.width, height: video.height, startAt, endAt, }); }); audios.forEach((audio) => { const audioObj = document.createElement('audio'); audioObj.src = audio.url; audioObj.volume = audio.volume; this.audios.push({ audioObj, startAt, endAt }); }); }); if (this.canvas.frames?.[0]) { // 第一个场景的视频封面 this.videoCovers = this.canvas.frames[0].videos?.map(({ cover, x, y, width, height }) => { const image = new Image(); image.src = cover; return { x, y, width, height, image }; }); // 第一个场景的背景图 const img = new Image(); img.src = this.canvas.frames[0].imageUrl; img.onload = () => { this.imageConfig.image = img; }; } }, mounted() { this.ctx = this.$refs.frame.getNode().getContext('2d'); // 在没有cover的情况下,可设置视频首帧为封面 this.videos .filter(({ startAt, endAt }) => (this.videoProgress >= startAt && this.videoProgress < endAt)) .forEach(({ videoObj, x, y, width, height }) => { videoObj.addEventListener('loadeddata', () => { videoObj.play(); this.ctx.drawImage(videoObj, x, y, width, height); setTimeout(() => { videoObj.pause(); }, 100); }); }); }, methods: { timerCallback() { this.videos .filter(({ startAt, endAt }) => (this.videoProgress >= startAt && this.videoProgress < endAt)) .forEach(({ videoObj, x, y, width, height }) => { if (videoObj.paused || videoObj.ended) { return; } this.ctx.drawImage(videoObj, x, y, width, height); clearTimeout(this.videoSceneTimer); this.videoSceneTimer = setTimeout(() => { this.timerCallback(); }, 0); }); }, onControl() { this.isPlay = !this.isPlay; if (this.canvas.duration <= this.videoProgress) { this.videoProgress = 0; } this.controlPlay(); }, onProgressChange(val) { // 设置窗口小视频的播放进度 this.videos .filter(({ startAt, endAt }) => (this.videoProgress >= startAt && this.videoProgress < endAt)) .forEach(({ videoObj, startAt }) => { videoObj.currentTime = val - startAt; }); // 设置音频的播放进度 this.audios .filter(({ startAt, endAt }) => (this.videoProgress >= startAt && this.videoProgress < endAt)) .forEach(({ audioObj, startAt }) => { audioObj.currentTime = val - startAt; }); this.updateVideoProgress(); this.controlPlay(); // 显示在播放时间范围内的窗口视频 this.videos .filter(({ startAt, endAt }) => (this.videoProgress > startAt && this.videoProgress < endAt)) .forEach(({ videoObj, x, y, width, height }) => { videoObj.play(); this.ctx.drawImage(videoObj, x, y, width, height); setTimeout(() => { videoObj.pause(); }, 100); }); }, controlPlay() { clearInterval(this.videoTimeTimer); if (this.isPlay) { // 定时器定时更新视频时间 this.videoTimeTimer = setInterval(() => { this.updateVideoProgress(); }, 1000 / this.playbackRate); } this.videoTimers = []; this.audioTimers = []; this.videos.forEach(({ videoObj, startAt, endAt }) => { // 控制视频的播放、暂停 if (this.videoProgress >= startAt && this.videoProgress < endAt) { if (this.isPlay) { videoObj.play(); } else { videoObj.pause(); } } // 控制即将播放的视频的播放、暂停 if (this.videoProgress < startAt) { const videoTimer = setTimeout(() => { if (this.isPlay) { videoObj.play(); } else { videoObj.pause(); } }, (startAt - this.videoProgress + 1) * 1000); this.videoTimers.push(videoTimer); } }); this.audios.forEach(({ audioObj, startAt, endAt }) => { // 控制音频的播放、暂停 if (this.videoProgress >= startAt && this.videoProgress < endAt) { if (this.isPlay) { audioObj.play(); } else { audioObj.pause(); } } // 控制即将播放的音频的播放、暂停 if (this.videoProgress < startAt) { const audioTimer = setTimeout(() => { if (this.isPlay) { audioObj.play(); } else { audioObj.pause(); } }, (startAt - this.videoProgress + 1) * 1000); this.audioTimers.push(audioTimer); } }); }, updateVideoProgress() { if (this.videoProgress >= this.canvas.duration) { this.videoProgress = this.canvas.duration; } else { this.videoProgress += 1; } this.currentTime = this.formatVideoTime(this.videoProgress); }, formatVideoTime(time) { const currentTime = time; let hour = parseInt(currentTime / 3600, 10); let minute = parseInt((currentTime % 3600) / 60, 10); let seconds = parseInt(currentTime % 60, 10); hour = hour < 10 ? `0${hour}` : hour; minute = minute < 10 ? `0${minute}` : minute; seconds = seconds < 10 ? `0${seconds}` : seconds; return `${hour}:${minute}:${seconds}`; }, onCommand(val) { let playbackRate = 0; switch (val) { case '1': playbackRate = 0.5; break; case '2': playbackRate = 1; break; case '3': playbackRate = 1.5; break; case '4': playbackRate = 2; break; case '5': playbackRate = 3; break; default: playbackRate = 1; break; } this.playbackRate = playbackRate; this.videos .filter(({ startAt, endAt }) => (this.videoProgress >= startAt && this.videoProgress < endAt)) .forEach(({ videoObj }) => { videoObj.playbackRate = playbackRate; }); this.audios .filter(({ startAt, endAt }) => (this.videoProgress >= startAt && this.videoProgress < endAt)) .forEach(({ audioObj }) => { audioObj.playbackRate = playbackRate; }); }, onVoiceChange(val) { const newVolume = val / 100; this.audios .filter(({ startAt, endAt }) => (this.videoProgress >= startAt && this.videoProgress < endAt)) .forEach(({ audioObj }) => { audioObj.volume = newVolume; }); }, onFullScreen() { const element = this.$refs.videoPreviewBox; const isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.webkitFullScreen || document.msFullScreen; if (isFullScreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } return; } if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); } }, }, };
css样式
.video-preview-wrapper { position: relative; height: 100%; .video-preview-box { .video-box { position: absolute; } .control-play { width: 100%; position: absolute; left: 0; bottom: 5%; display: flex; align-items: center; padding: 0 10px; color: #fff; .control-play-btn { margin-right: 20px; font-size: 24px; cursor: pointer; } .control-progress { width: 60%; } .current-time { margin: 0 10px 0 20px; } .duration { margin-left: 10px; } .video-speed-box { width: 40px; display: flex; justify-content: center; margin: 0 20px; background-color: aliceblue; cursor: pointer; .el-dropdown { width: 100%; text-align: center; } } .control-voice { width: 10%; } .fullscreen { margin-left: 20px; cursor: pointer; } } } }