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>

以上就是，Video.js的简单使用，是不是很简单。

最后：