Vue用videojs做视频播放组件

相关的插件是Video.js，官网讲解比较详细，我罗列出来，可以根据自己需要去查看。

官网地址：

    1.video.js整合vue的地址：https://docs.videojs.com/tutorial-vue.html

    2.video.js框架API的地址：https://docs.videojs.com/tutorial-options.html

添加依赖

npm install --save-dev video.js

在main.js中引入videojs的样式和库

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video //引入Video播放器

做一个vue视频播放组件

<template>
    <div>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>
<script>
import videojs from 'video.js';
export default {
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        }
    },
    mounted() {
        this.player = this.$video(this.$refs.videoPlayer, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>

其他页面中使用这个视频播放组件

<template>
    <div>
        <video-player :options="videoOptions"/>
    </div>
</template>
<script>
import VideoPlayer from "./VideoPlayer";
export default {
    components: {
        VideoPlayer
    },
    data() {
        return {
            videoOptions: {
                autoplay: 'muted',//自动播放
                controls: true,//用户可以与之交互的控件
                loop:true,//视频一结束就重新开始
                muted:false,//默认情况下将使所有音频静音
                aspectRatio:"16:9",//显示比率
                fullscreen:{
                    options: {navigationUI: 'hide'}
                },
                sources: [
                    {
                        src: require("@/assets/video/index/oceans.mp4"),
                        type: "video/mp4"
                    }
                ]
            }
        };
    }
}
</script>
<style scoped>
</style>