vue组件-视频播放之video.js

最近在练手一个小项目，想给首页增加一个视频介绍（如下图）。涉及到了vue视频播放的功能，所以在网上了解了一下。

相关的插件是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中引入Video.js及样式

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>

根据需要创建具体播放器（具体参数可以查看官网API）

<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>