一、使用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">
<audio
class="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>
