vue中引入videojs

1.安装

npm install --save-dev video.js

或者

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

2.创建公共组件(src/components/VideoPlayer.vue)

<template>
    <div>
        <video ref="videoRef"></video>
    </div>
</template>
<script>
import videojs from 'video.js';

export default {
    name: "videoRef",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        }
    },
    mounted() {
        this.player = videojs(this.$refs.videoRef, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>

常用事件

1. 播放 this.play() 。
2. 停止 – video没有stop方法，可以用pause 暂停获得同样的效果 。
3. 暂停 this.pause()。
4. 销毁 this.dispose() 。
5. 监听 this.on(‘click’,fn) 。
6. 触发事件this.trigger(‘dispose’)。

3.引用公共组件

<template>
    <div>
        <video-player :options="videoOptions"/>
    </div>
</template>
<script>
import VideoPlayer from "@/components/VideoPlayer.vue";

export default {
    name: "video",
    components: {
		VideoPlayer
	},
    data() {
        return {
             videoOptions: {
                autoplay: 'false',//自动播放
                controls: true,//用户可以与之交互的控件
                loop:true,//视频一结束就重新开始
                muted: false,//默认情况下将使所有音频静音
                aspectRatio:"16:9",//显示比率
                fullscreen:{
                    options: {navigationUI: 'hide'}
                },
                sources: [
                    {
                        src: require("@/assets/video/movie.mp4"),
                        type: "video/mp4"
                    }
                ]
            }

        }
    },
}
</script>

常用选项
1.autoplay : true/false 播放器准备好之后，是否自动播放 【默认false】。
2.controls : true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮。
3.height: 视频容器的高度，字符串或数字 单位像素 比如： height:300 or height:‘300px’。
4.width: 视频容器的宽度, 字符串或数字 单位像素。
5.loop : true/false 视频播放结束后，是否循环播放。
6.muted : true/false 是否静音。
7.poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL。
8.preload: 预加载。
9.auto 自动。
10.metadata 元数据信息 ，比如视频长度，尺寸等。
11.none 不预加载任何数据，直到用户开始播放才开始下载。
12.children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序哦。

更详细的内容，请参考官方网站