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的簡單使用，是不是很簡單。

最后：