- 安装vue-video-player依赖
npm install vue-video-player --save
- main.js引入
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
Vue.use(VueVideoPlayer)
- 页面使用
<template>
<div style="width: 800px;height: 600px;" align="center">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied"></video-player>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
},
data(){
return{
playerOptions: {
height: 500,
playbackRates: [0.7, 1.0, 1.5, 2.0, 4.0],
autoplay: false,
muted: false,
loop: false,
preload: "auto",
language: "zh-CN",
aspectRatio: "16:9",
fluid: true,
sources: [
{
type: "video/mp4",
src: 'http://10.60.1.180:8081/file/video.mp4'
},{
type:'application/x-mpegURL',
src: 'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8'
}
],
poster: 'http://10.60.1.180:8081/file/yanhua.jpg',
notSupportedMessage: "此视频暂无法播放,请稍后再试",
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true
}
},
}
},
mounted() {
console.log('this is current player instance object', this.player)
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
methods:{
onPlayerPlay(val){
console.log('onPlayerPlay',val)
},
onPlayerPause(val){
console.log('onPlayerPause',val)
},
onPlayerEnded(val){
console.log('onPlayerEnded',val)
},
onPlayerWaiting(val){
console.log('onPlayerWaiting',val)
},
onPlayerPlaying(val){
console.log('onPlayerPlaying',val)
},
onPlayerLoadeddata(val){
console.log('onPlayerLoadeddata',val)
},
onPlayerTimeupdate(val){
console.log('onPlayerTimeupdate',val)
},
onPlayerCanplay(val){
console.log('onPlayerCanplay',val)
},
onPlayerCanplaythrough(val){
console.log('onPlayerCanplaythrough',val)
},
playerStateChanged(val){
console.log('playerStateChanged',val)
},
playerReadied(val){
console.log('playerReadied',val)
},
}
}
</script>
- Git项目地址:https://github.com/surmon-china/vue-video-player