【vue】使用 Video.js 播放視頻

目錄

• 安裝
• 引入
• 使用
• 參考文檔

環境：

• vue 2.0+

• element ui （這里的代碼用了elmentui的按鈕樣式，可以不用elment ui的樣式）

安裝

在項目中安裝 video.js。

npm  install video.js

引入

在 main.js 中引入以下內容：

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

使用

實現的效果是：初始時，視頻播放不會顯示。點擊按鈕后，視頻顯示出來，跨域進行播放。

<template>
    <el-button @click="videoShow = !videoShow">觀看視頻<i class="el-icon-right"></i></el-button>
    <div class="player" v-if="videoShow === true">
        <video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered"
               controls preload="auto" v-if="videoShow === true"
               @ended="onPlayerEnded($event)">
            <source src="../assets/video/video.mp4 type="video/mp4" >
        </video>
    </div>
</template>

<script>
    export default {
        name: "Videojs",
        data() {
            return {
                videoShow: false,
            }
        },
        methods: {
            // 監聽視頻播放結束事件
            onPlayerEnded() {
                console.log("視頻結束啦------")
                this.videoShow = !this.videoShow;
            },
        },
    }
</script>

不知道為什么，按鈕綁定事件不會生效（ @click='getVideo'），就是，初始時看不見視頻，點擊按鈕后，視頻依然出不來，我也不知道這是為啥。我寫的按鈕綁定事件時下面的樣子

<script>
    methods: {
        getVideo() {
            this.videoShow = !this.videoShow;
        },
    },
</script>

參考文檔

Github 參考文檔：vue-video-player