视频监控hls.js用法

加载错误解决方法

<div class="x-flex-item">
	<div class="video-item success">
		<video id="live" rtmpPath="http://spjk.xrwhcm.cn/live/44020000001320000093.m3u8?auth_key=1645764049-0-0-107386e412fb4467aed32ef4b779b556yes" type="application/x-mpegURL" muted></video>
		<!-- 监控名称 -->
		<div class="x-video-title">隧道出口洞口</div>
		<!-- 提示信息 -->
		<div class="video-tips"></div>
	</div>
</div>

var hls = null;
function fnCameraPlayer(id){  
  var video = document.getElementById(id);
  var videoSrc = video.getAttribute('rtmpPath');
  // First check for native browser HLS support
  if (video.canPlayType('application/vnd.apple.mpegurl') || video.canPlayType('application/x-mpegURL')) {
    video.src = videoSrc;
    video.addEventListener('loadedmetadata', function() {
      console.log("manifest loaded, found " + data.levels.length + " quality level",videoSrc);
      $('#'+ id).closest('.video-item').addClass('success');
      video.play();
    });
  // If no native HLS support, check if hls.js is supported
  } else if (Hls.isSupported()) {
    hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
      console.log("manifest loaded, found " + data.levels.length + " quality level",videoSrc);
      $('#'+ id).closest('.video-item').addClass('success');
      video.play();
    });
    hls.on(Hls.Events.ERROR, function (event, data) {
      if (data.fatal) {  
        $('#'+ id).siblings('.video-tips').text('设备离线');
        $('#'+ id).closest('.video-item').addClass('error').removeClass('success');      
        switch(data.type) {
        case Hls.ErrorTypes.NETWORK_ERROR:
        // try to recover network error        
          console.log("fatal network error encountered, try to recover",videoSrc);  
          if (data.details === Hls.ErrorDetails.MANIFEST_LOAD_ERROR || data.details === Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT || data.details === Hls.ErrorDetails.MANIFEST_PARSING_ERROR) {
            hls.loadSource(videoSrc)
          }
          else {
            hls.startLoad()
          }
          break;
        case Hls.ErrorTypes.MEDIA_ERROR: 
          console.log("fatal media error encountered, try to recover",videoSrc);    
          hls.recoverMediaError();
          break;
        default:
        // cannot recover
          hls.destroy();
          break;
        }
      }      
    });
  }
}