vue+video.js播放m3u8 hls流视频

一、背景

常规的视频地址存到服务器中，url给到前端视频过大将会加载过慢，影响用户体验，后端通过视频分片上传到服务器，给到前端一个m3u8格式的视频减轻加载压力（同样适用于直播）

二、流媒体的3种协议

分类：	HTTP	HLS	RTMP
定义：		基于HTTP的流媒体传输协议	基于TCP是一个协议组，是实时消息传输协议。
推荐用法：	没有特定的流	有：m3u8直播流	RTMP一般传输的是flv、f4v格式流；RTSP一般传输的是ts、mp4格式流。

三、使用

yarn

yarn add video.js -S

yarn add videojs-contrib-hls -S

npm 

npm install video.js -S

npm install videojs-contrib-hls -S

1.在播放器页面引入

import videojs from 'video.js';
import 'video.js/dist/video-js.css';

 2.模版中

<video id="my-video" controls class="video-js vjs-default-skin" preload="auto" data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 3, 5] }'>
  <source :src="playVideo.videoUrl" type="application/x-mpegURL" >
</video>

3.js代码

（1）数据

myPlayer:'',//实例初始值
playVideo:{
    videoUrl: 'http://video.m3u8',// 视频地址
},

（2）挂载实例

created(){
    this.initVideoSource()//调用方法生成实例挂载
},

（3）创建实例的方法

      initVideoSource() {
            this.myPlayer = videojs('my-video', {
            controls: true, // 是否显示控制条
            preload: 'auto',
            // fluid: true, // 自适应宽高
            width:'750',
            height:'350',
            language: 'zh-CN', // 设置语言
            muted: false, // 是否静音
            inactivityTimeout: false,
            autoplay:true,
            loop:false,
            // 设置控制条组件
            controlBar: { // 设置控制条组件
                //  设置控制条里面组件的相关属性及显示与否
                currentTimeDisplay: true,
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                volumePanel: {
                inline: false,
                },
                pictureInPictureToggle: false,
            },
            sources: [
                {
                src: this.playVideo.videoUrl,
                type: 'application/x-mpegURL',//主要数据类型必须是这种格式
                },
            ],
            userActions: {
                seek: false,
            },
            })
        },

4.遇到的问题

Uncaught (in promise) TypeError: The element or ID supplied is not valid. 

 因为我的是在弹框中使用的关闭弹窗后，播放器会销毁从而找不到

我的解决办法是打开和关闭弹窗的时候传一个状态到播放器组件中，div包裹住播放器v-if判断传过来的状态

5.根据自己需求调整自己的样式

效果