【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