下载video.js
npm install --save-dev video.js
main.js引入video
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video //引入Video播放器
创建视频播放组件
<template>
<div class="VideoPlayer">
<video ref="videoPlayer" class="video-js"></video>
</div>
</template>
<script>
import videojs from 'video.js'
//不要忘记包括视频.js CSS,位于 .<code>video.js/dist/video-js.css</code>
export default {
name: 'VideoPlayer',
props: {
options: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
player: null
}
},
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
console.log('onPlayerReady', this)
})
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
}
}
</script>
<style lang="less" scoped>
.VideoPlayer {
width: 100%;
height: 100%;
}
.video-js {
width: 100%;
height: 100%;
background: #faf6fa;
}
</style>
引用
<template>
<div class="Index">
<!-- <iframe-->
<!-- width="500"-->
<!-- height="100"-->
<!-- src="http://t.zoukankan.com/520BigBear-p-14291680.html"-->
<!-- ></iframe>-->
<video-player :options="videoOptions" />
</div>
</template>
<script>
import VideoPlayer from '@/components/module/Video/VideoPlayer'//引入组件
export default {
name: 'Index',
components: {
VideoPlayer
},
data() {
return {
videoOptions: {
autoplay: true,
controls: true,
sources: [
{
src: '/image/video.mp4',
type: 'video/mp4'
}
]
}
}
},
props: {},
watch: {},
methods: {},
computed: {},
created() {},
mounted() {},
destroyed() {}
}
</script>
<style lang="less" scoped>
.Index {
width: 100%;
height: 100%;
}
</style>