video.js播放m3u8格式视频

<link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet">
<script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"></script>
//video.js须配合第三方的videojs库videojs-contrib-hls.js来播放.m3u8视频
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

//加入vjs-big-play-centered类可使播放按钮居中显示
<video id="video" class="video-js vjs-big-play-centered" data-setup="{}"  controls width="100%" height="100%">
       <source src="https://tx1.yunchuanglive.com/live/SSAA-066184-BAACB.m3u8"/>
</video>

export default {
    name: 'VideoDetail',
    data() {
        return {  
            video:null
        }
    },
    mounted() {     
        this.getVideo();
    },
    methods:{
        getVideo(url){
            let video=videojs("video");
            video.ready(()=>{
                video.play();
            })
            this.video = video;
        },
        //退出页面时销毁video实例
        handleGoToBack(){
            //销毁，防止一直不间断接受数据
            this.video.dispose();
        }
    }
}

常用配置项：

1. autoplay：是否自动播放，属性值为true或false，默认false；
2. controls：是否显示底部控制栏，属性值为true或false，默认为true；
3. preload：是否预加载，属性值为metadata、auto或none，默认值为metadata。 metadata表示浏览器在加载<video>元素时开始下载视频数据，medadata表示只加载视频的元数据。
4. width：视频播放器显示的宽度。
5. height：视频播放器显示的高度。
6. muted：是否静音播放视频，属性为true或false，默认false。
7. fluid：是否自适应布局，它将缩放以适应容器。
8. poster：视频开始播放前显示的图像的url。
9. src：要嵌入的视频的url。