【vue】使用 Video.js 播放视频
阅读原文时间:2023年07月09日阅读:4

目录

环境:

  • 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