下载vue-video-player及videojs-contrib-hls
// 记住下载这两个包就够了,千万不要下载video.js,因为vue-video-player会自动下载video.js,不然会冲突
// videojs-contrib-hls该组件是要兼容m3u8格式视频才需要的,若是一般的mp4文件,则不需要
npm install vue-video-player@5.0.1 -save
npm install videojs-contrib-hls@5.15.0 -save
在main.js里面导入
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
Vue.use(VideoPlayer)
封装组件
<template>
<div class="vueVideoPlayer">
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions">
</video-player>
</div>
</template>
<script>
export default {
name: 'vueVideoPlayer',
props: {
src: {
type: String
},
cover_url: {
type: String
},
autoplay: {
type: Boolean,
default: false
}
},
data () {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0],
autoplay: this.autoplay,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: '16:10',
fluid: true,
sources: [{
withCredentials: true,
type: "application/x-mpegURL",
src: this.src
}],
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true
}
}
}
},
methods: {},
mounted () {
console.log(this.src);
}
}
</script>
<style lang="less">
.vueVideoPlayer {
& .video-js {
& .vjs-big-play-button {
top: 49%;
left: 46%;
}
}
}
</style>