vedio 视频组件（MP4，m3u8）

先引入vediojs插件

m3u8 类型   设置  type="application/x-mpegURL"

<template>
  <div
    class="box"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <video :id="videoPlayer" class="video-js vjs-default-skin" controls :ref="videoPlayer">
      <source :src="videoUrl" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
  props: {
    videoUrl: {},
    videoPlayer: {}
  },
  data() {
    return {
      loading: false,
      player: null
    }
  },
  methods: {
    videoLoad() {
      this.loading = true
      var video = document.getElementById(this.videoPlayer)
      var that = this
      video.addEventListener('canplay', function() {
        that.loading = false
      })
    }
  },
  watch: {
    videoUrl(val) {
      if (val) {
        this.videoLoad()
      }
    }
  },
  mounted() {
    // 视频初始化
    this.player = videojs(this.$refs[this.videoPlayer], {
      autoplay: false,
      bigPlayButton: false,
      textTrackDisplay: false,
      posterImage: false,
      errorDisplay: false,
      controlBar: false
    })
    this.player.play()
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;

  .video-js {
    width: 100%;
    height: 100%;
    // background-color: #fff;
  }
}
</style>

mp4 正常引入

<template>
  <div
    class="wraps video-js"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <video
      :src="url"
      :id="id"
      width="100%"
      height="100%"
      muted
      autoplay
      controlslist="nodownload"
      disablePictureInPicture
    ></video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
  props: {
    url: {},
    id: {}
  },
  data() {
    return {
      tableData: [{}, {}],
      loading: false
    }
  },
  watch: {
    url(val) {
      if (val) {
        this.videoLoad()
      }
    }
  },
  methods: {
    videoLoad() {
      this.loading = true
      var video = document.getElementById(this.id)
      var that = this
      video.addEventListener('canplay', function() {
        that.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wraps {
  width: 100%;
  height: 100%;
}

// video::-webkit-media-controls {
//     display: none !important;
// }
// //播放按钮
// video::-webkit-media-controls-play-button {
//     display: none;
// }

//进度条
video::-webkit-media-controls-timeline {
  display: none;
}

//观看的当前时间
video::-webkit-media-controls-current-time-display {
  display: none;
}

//剩余时间
video::-webkit-media-controls-time-remaining-display {
  display: none;
}

//音量按钮
video::-webkit-media-controls-mute-button {
  display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}

//音量的控制条
video::-webkit-media-controls-volume-slider {
  display: none;
}
</style>