安装
npm install vue-video-player --save
main.js配置
import VideoPlayer from 'vue-video-player'
//引入样式
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
//使用组件
Vue.use(VideoPlayer)
组件书写
<template>
<div class="video-play-box" style="width: 100%; height: 100%">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
@ready="onPlayerReady"
@play="onPlayerPlay"
@timeupdate="onPlayerTimeupdate"
@pause="onPlayerPause"
@ended="onPlayerEnded"
>
</video-player>
</div>
</template>
<script>
export default {
name: 'videoboPlayer',
components: {},
data() {
return {
playerOptions: {
//视频url设置,两种类型,MP4和m3u8
sources: [
{
src: 'https://ewe.weewe.mp4',
type: 'video/mp4', // mp4视频类型
// src: 'https://ewe.weewe.m3u8',
// type: 'application/x-mpegURL' //m3u8 视频类型,这里可以不写,如果写一定要写对,否则会无法播放
}
],
playbackRates: [0.5, 1.0, 1.5, 2.0], // 开启倍速,不开启倍速可以写个空数组
fluid: true, // 当 fluid 设置为 true 时,Video.js 播放器将拥有流体大小,即它会根据容器的尺寸动态地调整自身的大小
autoplay: false, // 是否自动播放
muted: false, // 是否静音播放
controls: true, // 是否展示控制栏
},
}
},
methods: {
onPlayerReady(player) {
let _self = this
console.log('Player is ready!', player)
},
onPlayerPlay(player) {
console.log('开始播放')
// 设置初始播放位置
player.currentTime(this.currentTime)
},
onPlayerTimeupdate(player) {
// console.log('播放中', this.nowCurrentTime)
},
onPlayerPause(player) {
console.log('暂停播放')
},
onPlayerEnded(player) {
// 播放完毕
},
}
}
</script>
注意:class="video-player vjs-custom-skin" 这个必须写
playerOptions常用配置项
-
playbackRates: 这是一个数组,用于设置可选的播放速度。例如,
[0.7, 1.0, 1.5, 2.0]
表示播放器可以支持 0.7 倍速、正常速度、1.5 倍速和 2.0 倍速播放1。 -
autoplay: 这是一个布尔值,用于设置视频是否在页面加载完成后自动播放。如果为
true
,则浏览器准备好时会开始播放视频12。 -
muted: 这也是一个布尔值,用于控制视频是否默认静音。如果为
true
,则视频默认无声音12。 -
loop: 当这个选项为
true
时,视频会在播放结束后自动重新开始12。 -
preload: 这是一个字符串,用于设置浏览器在页面加载元素后是否应该开始下载视频数据。例如,
'auto'
表示浏览器将选择最佳行为,可能立即开始加载视频12。 -
language: 这是一个字符串,用于设置播放器的语言。例如,
'zh-CN'
表示简体中文12。 -
aspectRatio: 这是一个字符串,表示播放器的宽高比,例如
'16:9'
或'4:3'
。它用于确保播放器在调整大小时保持正确的比例12。 -
fluid: 这是一个布尔值,用于控制播放器是否应该按比例缩放以适应其容器。当设置为
true
时,播放器将具有流体大小,能够根据容器尺寸动态调整自身大小。 -
poster:这是一个字符串,用于设置播放器的封面。