video原始标签，播放m3u8后缀地址

video原始标签，播放m3u8后缀地址，播放直播

此处借用第三方依赖video.js实现的，代码如下

<template>
 <video id="videoPlayer" class="video" muted width="100%" height="580px" />
</template>

<script>
import "video.js/dist/video-js.css"; // 引入video.js的css
import Videojs from 'video.js'

export default {
 data() {
  return {
   player: null
  }
 },
 beforeDestroy() {
  if (this.player) {
   this.player.dispose() // Removing Players,该方法会重置videojs的内部状态并移除dom
  }
 },
 activated() {
  if (this.player) {
   this.player.play()
  }
 },
 deactivated() {
  if (this.player) {
   this.player.pause()
  }
 },
 mounted() {
 this.initVideo('xxx.m3u8')
 },
 methods: {
  initVideo(url) {
   if (!this.player) {
    this.player = Videojs('videoPlayer', {
     autoplay: true, // 设置自动播放
     muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
     preload: 'auto', // 预加载
     controls: false // 显示播放的控件
    })
   }
   this.player.src([{
    src: url,
    type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
   }])
  }
 }
}
</script>

<style lang="less" scoped>
.video, video {
 width: 100%;
 height: 580px;
}
/deep/ .vjs-loading-spinner {
 position: relative;
 .vjs-control-text {
 opacity: 0;
 }
}
</style>