现在的视频格式很多，有传统的、有新颖的，而m3u8格式的视频越来越受欢迎，因为它不占空间，而且播放速度很快。而且现在很多监控播放地址也是m3u8,video标签无法直接在浏览器中播放m3u8格式的视频。这时候我们需要借助video.js来播放。

第一步安装video.js

npm install vue-video-player videojs-contrib-hls --save

第二步在main.js中引入

import 'video.js/dist/video-js.css'

第三步新建视频播放组件

<template>
    <div style="width: 100%; height: 100%">
        <video id="video" preload="auto" muted class="video-js vjs-default-skin" style="width: 100%; object-fit: fill">
            <source :src="video" />
        </video>
    </div>
</template>
<script>
    import videojs from 'video.js'
    import 'videojs-contrib-hls'
    export default {
        props: {
            video: {
                value: null
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.playVideo()
            })
        },
        methods: {
            playVideo() {
                videojs('video', {
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: false,
                    errorDisplay: false,
                    controls: true,
                    hls: {
                        withCredentials: true
                    }
                }, function() {
                    this.play()
                })
            }
        }
    }
</script>

第四部引用组件

<Video src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"></Video>