一、下载vue-video-player
npm install vue-video-player --save
npm install videojs-contrib-hls --save
二、在main.js文件引入
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
const hls = require('videojs-contrib-hls')
Vue.use(hls)
三、在页面中使用
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
style="object-fit:fill;margin-top: 8%"
:options="playerOptions"
:x5-video-player-fullscreen="true"
@pause="onPlayerPause($event)"
@play="onPlayerPlay($event)"
@fullscreenchange="onFullscreenChange($event)"
@click="fullScreen"
/>
四、在data中配置参数
playerOptions: {
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: '16:9',
fluid: true,
sources: [
{
type: 'application/x-mpegURL',
src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8'
}
],
hls: true,
poster: '',
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true
}
},
五、一些回调方法
methods: {
fullScreen() {
const player = this.$refs.videoPlayer.player
player.requestFullscreen()
player.isFullscreen(true)
player.play()
},
onPlayerPlay(player) {
player.play()
},
onPlayerPause(player) {
player.pause()
}}