当前位置：首页 > news >正文

vue中使用vue-video-player插件播放视频以及 audio播放音频

news 来源：原创 2024/9/20 22:56:20

一、使用vue-video-player插件播放视频

安装

npm install vue-video-player --save

在main.js中引用

//引入视频播放插件
// main.js
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'Vue.use(VueVideoPlayer)

在组件中使用

<template><div class="playerBOx"><video-player ref="videoPlayer" class="player-video vjs-custom-skin" :playsinline="false" :options="playOptions"@play="onPlayerPlay($event)"  @ended="onPlayerEnd($event)"@waiting="onPlayerWaiting($event)" @timeupdate="onPlayerTimeupdate($event)"@statechanged="playerStateChanged($event)" /></div>
</template><script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'export default {components: {videoPlayer},props: {path: {  // 传入的地址type: String,default: "",},lastTime: {  // 传入的上次播放位置type: Number,default: 0,},videoType: {type: String,default: "",}},data() {return {playedTime: this.lastTime,currentTime: 0,maxTime: 0,playOptions: {playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度autoplay: false, // 如果为true,浏览器准备好时开始回放muted: false, // 默认情况下静音播放loop: false, // 是否视频一结束就重新开始preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据，auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: "zh-CN",aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小，换句话说，它将按比例缩放以适应其容器sources: [{type: `video/${this.videoType}`, // 类型src: this.path, // url地址，在使用本地的资源时，需要用require()引入，否则控制台会报错},],poster: '', // 设置封面地址notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信width: 1900,controlBar: {currentTimeDisplay: true,progressControl: true,  // 是否显示进度条playbackRateMenuButton: true, // 是否显示调整播放倍速按钮timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: true, // 是否显示剩余时间功能fullscreenToggle: true, // 是否显示全屏按钮// volumeControl:true,},},}},computed: {},mounted() {},methods: {// 视频暂停的onPlayerPause(player) {// this.$refs.videoPlayer.player.pause() // 暂停},// 视频播放回调onPlayerPlay(player) {// this.$refs.videoPlayer.player.play() // 播放},// 视频播放完onPlayerEnd(player) {// this.$refs.videoPlayer.player.src(this.path) // 重置进度条复制代码console.log(player);},// DOM元素上的readyState更改导致播放停止onPlayerWaiting(player) {console.log("播放停止中");},// 视频已开始播放onPlayerPlaying(player) {// console.log("开始播放了");// console.log(player);},// 当播放器在当前播放位置下载数据时触发onPlayerLoadeddata(player) {console.log("开始下载数据");},// 当前播放位置发生变化时触发onPlayerTimeupdate(player) {this.currentTime = player.currentTime();this.maxTime = this.currentTime > this.maxTime ? this.currentTime : this.maxTime;},//播放状态改变playerStateChanged(playerCurrentState) {console.log("播放状态变化了");},},mounted() {},
};
</script><style lang="scss">
.playerBOx {width: 100%;height: 100%;margin: 0 auto;position: relative;
}.vjs-custom-skin>.video-js {width: 100% !important;height: 100% !important;
}.video-player {width: 100% !important;height: 100% !important;
}.vjs-fluid {padding-top: 0 !important;background-color: rgba(0, 0, 0, 0.45);
}.video-js {position: static !important;
}/*播放按钮设置成宽高一致，圆形，居中*/
.vjs-custom-skin>.video-js .vjs-big-play-button {background-color: rgba(0, 0, 0, 0.45);font-size: 3.5em;border-radius: 50%;height: 2em !important;line-height: 2em !important;margin-top: -1em !important;margin-left: -1em !important;width: 2em !important;outline: none;
}.video-js .vjs-big-play-button .vjs-icon-placeholder:before {position: absolute;left: 0;width: 100%;height: 100%;
}/*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
.vjs-custom-skin>.video-js .vjs-control-bar .vjs-remaining-time {order: 3 !important;
}/*进度条背景轨道*/
.video-js .vjs-slider {border-radius: 1em;
}/*进度条进度*/
.vjs-custom-skin>.video-js .vjs-play-progress,
.vjs-custom-skin>.video-js .vjs-volume-level {border-radius: 1em;
}/*鼠标进入播放器后，播放按钮颜色会变*/
.video-js:hover .vjs-big-play-button,
.vjs-custom-skin>.video-js .vjs-big-play-button:active,
.vjs-custom-skin>.video-js .vjs-big-play-button:focus {background-color: rgba(0, 0, 0, 0.4) !important;
}/*control bar*/
.video-js .vjs-control-bar {background-color: rgba(0, 0, 0, 0.2) !important;
}/*点击按钮时不显示蓝色边框*/
.video-js .vjs-control-bar button {outline: none;
}
</style>

注意：使用vue-video-player组件播放视频，视频进度条不能点击不能拖动。点击或者拖动就会重新从头开始播放。

产生原因：

其实就是没有转成字节流，导致不能选择某个视频点

解决方案：让后端响应头添加如下

二、audio播放音频

<template><div><div class="containeraudioBox"><div class="topAudioBox"><img src="../assets/close.png" alt="" @click="close"></div><div class="audioBox"><audioclass="audio":src="autioPath"autoplay="autoplay"controls="controls"ref="audio">音频</audio></div></div></div>
</template><script>export default {props: {autioPath: {  // 传入的地址type: String,default: "",},},data() {return {}},methods: {//点击关闭弹窗close(){//   this.playOptions.sources[0].src=''this.$refs.audio.pause()// 重置进度条复制代码this.$emit('closeVideo',false)}, //  //播放组件// 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;// }},mounted () {console.log(this.autioPath);;},    }
</script><style lang="scss">
.containeraudioBox{width: 100%;height:100vh;
}
.containeraudioBox .topAudioBox{height: 120px;width: 100%;position: relative;}.containeraudioBox .topAudioBox img{width: 30px;height: 30px;position: absolute;z-index: 9999;top: 60px;right: 180px;cursor: pointer;}
.audioBox{width: 100%;height:calc(100% - 90px);position: relative;
}
.audio{width: 60%;// height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
</style>