一 . 使用 实现在vue 2 中进行视频播放
## 1.本地视频资源路径的引入 需要播放的视频是项目中的静态资源，由于弹窗组件需要支持可复用，所以视频路径不可写死，下面示例为视频名称自定义； //
如果视频不在src目录下，而是public目录下则写法略有不同；
computed: { src() { // 需要在js部分用计算属性定义 return process.env.BASE_URL + "videos/" + this.videoName + ".mp4"; } },
2.父子之间传值
// 父组件中引用子组件
<video-modal :visible.sync="showVideoModal">
// 子组件中
<el-dialog :visible="visible" @close="closeModal">
// 子组件中关闭弹窗方法
closeModal() { this.$emit("updata:visible", false); }
不过这样使用会导致每次重新打开视频弹窗进度条都会留在上一次打开的位置，所以需要在引用子组件外再嵌套一个div，利用v-if使其每次打开都重新渲染，从而解决进度条缓存的问题；
<div v-if="showVideoModal">
<video-modal :visible.sync="showVideoModal">
</div>
视频播放完毕自动关闭弹窗
监听video标签的ended事件并关闭弹窗即可，vue生命周期中定义需要增加this.$nextTick，否则无法获取对应的dom元素；
mounted() {
this.$nextTick(() => {
// 播放完毕自动关闭弹窗
const eleVideo = document.querySelector(".play-video");
eleVideo.addEventListener("ended", () => {
this.closeVideoModal();
}, false);
});
},
视频在弹窗中自适应大小
给video标签设置合适的宽高，在利用object-fit: contain;属性即可。
最后附上完整代码
<template>
<el-dialog
class="video-dialog"
:visible="visible"
:title="title"
width="75%"
append-to-body
@close="closeVideoModal"
>
<video ref="video"
class="play-video"
controls="controls"
autoplay="autoplay"
>
<source :src="src" type="video/mp4" /> </video>
</el-dialog>
</template>
<script>
export default {
name: "VideoModal",
props: {
visible: {
type: Boolean,
default: false
},
// 父组件传参弹窗标题
title: {
type: String,
default: ""
},
// 父组件传参要播放的视频名称
videoName: {
type: String,
default: ""
}
},
computed: {
src() {
return process.env.BASE_URL + "videos/" + this.videoName + ".mp4"; }
},
mounted() {
this.$nextTick(() => {
// 播放完毕自动关闭弹窗
const eleVideo = document.querySelector(".play-video");
eleVideo.addEventListener("ended", () => {
this.closeVideoModal();
}, false);
});
},
methods: {
closeVideoModal() {
this.$emit("update:visible", false);
}
}
};
</script>
<style lang="scss" scoped>
.play-video {
object-fit:
contain;
width: 100%;
height: 99.5%;
}
</style>
二 .使用Vue组件 vue-video-player
1.安装
npm install vue-video-player --save
2. 在组件中引用
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
components: {
videoPlayer
}
}
3. HTML代码
<template>
<div class="container">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
</template>
4. JS代码
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
name: "DriveVideo",
components: {
videoPlayer
},
data() {
return {
playerOptions: {
playbackRates: [0, 5, 1.0, 1.5, 2.0],
// 如果为true,浏览器准备好时开始回放。
autoplay: false,
// 默认情况下将会消除任何音频。
muted: false,
// 是否视频一结束就重新开始。
loop: false,
// 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
preload: 'auto',
language: 'zh-CN',
// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
aspectRatio: '16:9',
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
fluid: true,
sources: [{
// type: "video/mp4", // 类型
src: 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4' // url地址
}],
// 封面地址
poster: '',
// 允许覆盖Video.js无法播放媒体源时显示的默认信息。
notSupportedMessage: '此视频暂无法播放，请稍后再试',
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
}
}
}
}
}
</script>
更具体的可以去 Github 去查看
三 . vue 播放 音频
1.定义播放按钮
<el-button type="text" @click="handlePlay(scope.row)">播放</el-button>
2. 定义弹出层组件
<el-dialog title="录音播放" :visible.sync="dialogVisible" width="20%" :before-close="stop">
<template>
<center>
<audio
:src="src"
autoplay="autoplay"
controls="controls"
ref="audio"
>Your browser does not support the audio element.</audio>
</center>
</template>
<el-dialog>
3.JavaScript代码
<script>
data() {
return {
src: "",
dialogVisible: false,
}
methods: {
//播放组件
handlePlay(row) {
this.src = row.filePath;
this.play();
});
},
//播放
play() {
this.dialogVisible = true;
this.$refs.audio.play();
},
//音频暂停
stop() {
this.dialogVisible = false;
this.$refs.audio.pause();
this.$refs.audio.currentTime = 0;
}
}
</script>
