vue 使用 video.js 播放m3u8（一）

vue 使用 video.js 切换播放m3u8（二）

第一步: 直接安装 兼容7.0 video.js

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

第二步: main.js 引入video-js.css

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

第三步：组件页面

<template>
  <div style="padding-top: 30px; width: 100%; height: 360px; position: relative;">
    <video
      id="video"
      preload="auto"
      muted
      class="video-js vjs-default-skin"
      style="width: 100%; height: 100%; object-fit: fill"
    >
     <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" />
    </video>
  </div>
</template>
<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
  mounted () {
    this.$nextTick(() => {
      this.getVideo()
    })
  },
  methods: {
    getVideo () {
      videojs('video', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        controls: true,
        hls: {
          withCredentials: true
        }
      }, function () {
        this.play()
      })
    }
  }
}
</script>

最终效果

参考链接

1、验证m3u8视频地址是否可用的工具
2、主要参考链接：vue组件播放m3u8格式视频
3、其他参考链接：Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
4、video.js官网链接