Vue加载m3u8视频流

1、简介

m3u8是UTF-8编码格式。M3U8是指UTF-8编码的M3U文件，而M3U文件是记录了一个索引纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。M3U8是一种常见的流媒体格式，主要以文件列表的形式存在，既支持直播又支持点播，尤其在Android、iOS等平台最为常用。

注意：网页播放m3u8需使用编码格式为 h264 的视频流

2、安装

npm install video.js@7.5.5 --save
npm install videojs-contrib-hls@5.15.0 --save

3、引入

创建一个video.js文件

import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);

main.js引入

import "@/common/video.js"; 

使用

//节点  muted：自动播放时静音
<video id="videoPlayer" class="video-js" muted></video>

//引入js
import "@/common/video.js"; 

//定义变量
data () {
  return {
    url: "http://devimages.apple.com/iphone/samples/bipbop/gear3/prog_index.m3u8",
    options: {
      autoplay: true, // 设置自动播放
      controls: false, // 显示播放的控件
    },
    player: null
  }
},

mounted () {
  this.player = Videojs("videoPlayer", this.options)  // 初始化Videojs
},

methods: {
//调用此方法可实现换台功能
  changVideo (url) {
    this.player.src([
      {
        src: url,
        type: "application/x-mpegURL"
      }
    ])
  }
}

可使用的m3u8地址：http://devimages.apple.com/iphone/samples/bipbop/gear3/prog_index.m3u8

4、效果图