视频流媒体播放器EasyPlayer.JS播放RTMP视频流在IE浏览器无法正常播放的解决方法

原创于 2020-08-13 16:32:39 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#EasyPlayer.JS #RTMP视频流 #IE浏览器 #流媒体服务器

EasyPlayer 专栏收录该内容

104 篇文章

订阅专栏

本文解决了一个在使用EasyPlayer播放RTMP视频流时出现的问题，特别是在IE浏览器中无法正常播放的情况。通过调整地址处理逻辑，避免了XMLHttpRequest对象对RTMP流的不必要处理，从而解决了跨浏览器兼容性问题。

流媒体服务器是实现视频分发功能的服务器，而要将视频流展现出来，则需要的是视频播放器。EasyPlayer就是TSINGSEE青犀视频团队研发并使用的视频流媒体播放器，大家熟悉的EasyNVR、EasyDSS里面，集成的都是EasyPlayer播放器。

EasyPlayer分很多版本，EasyPlayer.JS就是集成进网页的网页播放器。我们用该播放器在谷歌浏览器播放RTMP视频流，出现了报错，但视频流仍然可以播放，然而换IE浏览器后，不能正常播放RTMP视频流了。

首先我们看谷歌这边报的错误，显示为XMLHttpRequest网络请求错误，说明地址写入播放器前存在问题，定位到传入地址的代码位置：

src() {
  if (!this.videoUrl) {
     return "";
  }
  var xhr = new XMLHttpRequest();
  xhr.open('GET', this.videoUrl);
  xhr.onreadystatechange = () => {
  if (/\.flv.*$/.test(xhr.responseURL || "" ) && this.typeFlv) {
    this.videoUrl = xhr.responseURL
    this.typeFlv = false
  }else if (/\.m3u8.*$/.test(xhr.responseURL || "")){
    this.videoUrl = xhr.responseURL
   }
  };
  xhr.send(null);
  if (this.videoUrl.indexOf("/") === 0) {
    return location.protocol + "//" + location.host + this.videoUrl;
  }
   return this.videoUrl;
},

发现确实有一个XMLHttpRequest对象处理地址，从代码看发现RTMP不用XMLHttpRequest对象处理。

这时我们可以给地址做一层判断处理。

src() {
  if (!this.videoUrl) {
    return "";
  }
  if (this.videoUrl.indexOf("rtmp://") === 0) {
    if (this.videoUrl.indexOf("/") === 0) {
      return location.protocol + "//" + location.host + this.videoUrl;
    }
    return this.videoUrl;
  } else {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', this.videoUrl);
    xhr.onreadystatechange = () => {
  if (/\.flv.*$/.test(xhr.responseURL || "" ) && this.typeFlv) {
    this.videoUrl = xhr.responseURL
    this.typeFlv = false
  }else if (/\.m3u8.*$/.test(xhr.responseURL || "")){
    this.videoUrl = xhr.responseURL
  }
 };
  xhr.send(null);
  return this.videoUrl;
 }
},

判断该视频不需要处理XMLHttpRequest对象时，视频播放就会正常不会报错。