vue使用video.js
安装 $ npm install video.js
main.js
import Video from 'video.js'
import 'video.js/dist/video-js.css'
import video_zhCN from 'video.js/dist/lang/zh-CN.json' //引入汉化 中文提示
import video_en from 'video.js/dist/lang/en.json'
Video.addLanguage('zh-CN', video_zhCN)
Video.addLanguage('en', video_en)
Vue.prototype.$video = Video
vjs-big-play-centered样式为播放按钮居中
<template>
<div>
<video ref="videoPlayer" class="video-js vjs-big-play-centered"></video>
</div>
</template>
<script>
export default {
name: "VideoPlayer",
props: {
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
player: null
}
},
mounted() {
//如果使用js方法初始化,对于样式的操作会有限制,vue使用下面方法初始化
this.player = this.$video(this.$refs.videoPlayer, this.options, function onPlayerReady() {
console.log('onPlayerReady', this);
//播放中
this.on("play", function() {
});
})
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
}
}
</script>
静音的时候能够实现自动播放
autoplay : “muted”
常用事件和配置可参考: https://blog.csdn.net/little__SuperMan/article/details/89203270