前端在浏览器端播放直播流协议的2种方式讲解

npm i hls.js

<video id="video" ref="videoRef" autoplay width="800" height="400" controls></video>

import Hls from 'hls.js'

// 获取视频元素
var video = document.getElementById('video');

if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
	//
	// If no native HLS support, check if HLS.js is supported
	//
} else if (Hls.isSupported()) {
    let config = {
	    xhrSetup: function (xhr, url) {
	    	xhr.withCredentials = true; // 会携带cookie
		    // xhr.setRequestHeader('token',"my-token")
	    },
	}

    // 创建一个新的HLS实例
    var hls = new Hls(config);

 
    // 绑定 canplay 事件，当能够播放时开始播放
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
 
    // 绑定错误事件
    hls.on(Hls.Events.ERROR, function(event, data) {
      var errorType = data.type;
      var errorDetails = data.details;
      var errorFatal = data.fatal;

      if (data.fatal) {
        switch(data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            // 网络错误处理
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            // 媒体错误处理
            break;
          default:
            // 其他错误处理
            break;
        }
      }
    });
 
    // 在video元素上附加MSE
    hls.attachMedia(video);
 
    // 开始加载HLS流
    hls.loadSource('xxx.m3u8');
}

hls.destroy() 

hls.on(Hls.Events.ERROR, function (event, data) {
  if (data.fatal) {
    switch (data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR:
        // try to recover network error
        console.log('fatal network error encountered, try to recover');
        hls.startLoad();
        break;
      case Hls.ErrorTypes.MEDIA_ERROR:
        console.log('fatal media error encountered, try to recover');
        hls.recoverMediaError();
        break;
      default:
        // cannot recover
        hls.destroy();
        break;
    }
  }
});

if (typeof hls !== 'undefined') {
  // 停止当前的播放器实例
  hls.destroy();
}
 
// 新的播放源URL
var newVideoUrl = 'new_source_url.m3u8';
 
// 创建新的HLS播放器实例
var hls = new Hls();
 
// 绑定到video元素
var video = document.getElementById('video');
hls.attachMedia(video);
 
// 监听加载事件
hls.on(Hls.Events.MANIFEST_PARSED, function () {
  video.play();
});
 
// 错误处理
hls.on(Hls.Events.ERROR, function (event, data) {
  if (data.fatal) {
    switch (data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR:
        // 网络错误处理
        break;
      case Hls.ErrorTypes.MEDIA_ERROR:
        // 媒体错误处理
        break;
      default:
        // 其他错误处理
        break;
    }
  }
});
 
// 加载新的播放源
hls.loadSource(newVideoUrl);

npm i flv.js

import flvjs from 'flv.js'

let videoElement = document.getElementById('my-player');

if (flvjs.isSupported()) {
    flvPlayer = flvjs.createPlayer({
        type: 'flv',					//媒体类型
        url: 'XXXX'						//flv格式媒体URL
        isLive: true,					//数据源是否为直播流
        hasAudio: false,				//数据源是否包含有音频
	    hasVideo: true,					//数据源是否包含有视频
	    enableStashBuffer: false		//是否启用缓存区
    },{
        enableWorker: false, 			//不启用分离线程
        enableStashBuffer: false, 		//关闭IO隐藏缓冲区
        autoCleanupSourceBuffer: true 	//自动清除缓存
    });

    flvPlayer.attachMediaElement(videoElement);	//将播放实例注册到节点
    flvPlayer.load(); 					//加载数据流
    flvPlayer.play();					//播放数据流
}

flvPlayer.pause();						//暂停播放数据流							
flvPlayer.unload();						//取消数据流加载
flvPlayer.detachMediaElement();			//将播放实例从节点中取出
flvPlayer.destroy();					//销毁播放实例

1：flvjs.isSupported()：判断当前浏览器是否支持播放

2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例

3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点

4：flvPlayer.load()：加载数据流

5：flvPlayer.play()：播放数据流

6：flvPlayer.pause()：暂停播放数据流

7：flvPlayer.unload()：取消数据流加载

8：flvPlayer.detachMediaElement()：将播放实例从节点中取出

9：flvPlayer.destroy()：销毁播放实例