安装
npm install vue-video-player --save
引入
可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)
1. 全局引用, 在main.js里面导入并引用
import VideoPlayer
from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue
.use(VideoPlayer
)
2. 局部引用, 在组件内引用
import { videoPlayer
} from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
export default {
components
: {
videoPlayer
}
}
使用
1. HTML部分
<template>
<div class='demo'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
</template>
2. js部分
export default {
data() {
return {
playerOptions
: {
playbackRates
: [0.5, 1.0, 1.5, 2.0],
autoplay
: false,
muted
: false,
loop
: false,
preload
: 'auto',
language
: 'zh-CN',
aspectRatio
: '16:9',
fluid
: true,
sources
: [{
type
: "video/mp4",
src
: ''
}],
poster
: '',
notSupportedMessage
: '此视频暂无法播放,请稍后再试',
controlBar
: {
timeDivider
: true,
durationDisplay
: true,
remainingTimeDisplay
: false,
fullscreenToggle
: true
}
}
}
}
}
控制播放和暂停
this.$refs
.videoPlayer
.player
.play()
this.$refs
.videoPlayer
.player
.pause()
this.$refs
.videoPlayer
.player
.src(src
)
回调函数
<template
>
<div
class='demo'>
<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
>
export default {
methods
: {
onPlayerPlay(player
) {
console
.log('player play!', player
)
},
onPlayerPause(player
) {
console
.log('player pause!', player
)
},
onPlayerEnded($event
) {
console
.log(player
)
},
onPlayerWaiting($event
) {
console
.log(player
)
},
onPlayerPlaying($event
) {
console
.log(player
)
},
onPlayerLoadeddata($event
) {
console
.log(player
)
},
onPlayerTimeupdate($event
) {
console
.log(player
)
},
onPlayerCanplay(player
) {
},
onPlayerCanplaythrough(player
) {
},
playerStateChanged(playerCurrentState
) {
console
.log('player current update state', playerCurrentState
)
},
playerReadied(player
) {
console
.log('example player 1 readied', player
);
}
},
}
</script
>
注意点
vue-video-player 其实就是 video.js 集成到 vue 中,所以千万不要再安装 video.js,可能会出错 播放 HLS 流,需要 videojs-contrib-hls 插件,(!直接引用,因为在安装vue-video-player插件时,hls插件是一并下载下来的),如果需要 RTMP 流,需要 videojs-flash 插件,也是直接引用就可以了( 组件引用中已经做了示例)
扩展
bilibili开源的播放器也是很不错的:flv.js
vue-video-player github地址: https://github.com/surmon-china/vue-video-player vue-video-player 官网: https://github.surmon.me/vue-video-player/