B站播放器处理网页flv直播视频

Git项目地址：https://github.com/Bilibili/flv.js
API文档：https://github.com/bilibili/flv.js/blob/master/docs/api.md
直播流文档：https://github.com/bilibili/flv.js/blob/master/docs/livestream.md
跨域配置文档：https://github.com/bilibili/flv.js/blob/master/docs/cors.md
多段回放文档：https://github.com/bilibili/flv.js/blob/master/docs/multipart.md
在线示例：http://bilibili.github.io/flv.js/demo/

npm安装

$ npm install --save flv.js

js下载：https://github.com/bilibili/flv.js/releases/tag/v1.6.2

示例：

<script src="flv.min.js"></script>
<video id="videoElement"></video>

<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true, // 直播视频
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

封装：

function FLVPlayer(opts) {
  var videoElement = document.createElement("VIDEO");
  videoElement.autoplay = true;
  videoElement.controls = false;
  videoElement.muted = false;
  videoElement.style.width = "100%";
  videoElement.style.height = "100%";
  opts.container.append(videoElement);

  this.container = opts.container;
  this.videoElement = videoElement;
  this.httpFlvURL = opts.url;

  this.mediaInfo = null;
  this.play = null;
  this.onPlayEvtListener = null;
  this.onPauseEvtListener = null;
  this.onStopEvtListener = null;

  this.autoFastForward = opts.autoFastForward;
  this.autoFastForwardInterval = null;

  this.play = function () {
    if (this.player) return;

    var self = this;
    self.player = new flvjs.createPlayer({
      type: "flv",
      url: self.httpFlvURL,
      isLive: true,
      enableWorker: true,
      enableStashBuffer: true,
      autoCleanupSourceBuffer: true,
      autoCleanupMaxBackwardDuration: 5,
      autoCleanupMinBackwardDuration: 1,
    });

    self.player.on("media_info", function () {
      self.mediaInfo = self.player.mediaInfo;
    });

    self.player.on("statistics_info", function () {
      // console.log(arguments);
    });

    var autoPlayTimer = null;
    self.videoElement.addEventListener("player", function (e) {
      if (autoPlayTimer) clearInterval(autoPlayTimer);
      if (self.onPlayEvtListener) self.onPlayEvtListener(self, e);
    });
    self.videoElement.addEventListener("dblclick", function () {
      if (self.videoElement.requestFullscreen)
        self.videoElement.requestFullscreen();
    });
    autoPlayTimer = setInterval(function () {
      try {
        self.player.play();
      } catch (e) {
        clearInterval(autoPlayTimer);
      }
    });

    self.player.attachMediaElement(self.videoElement);
    self.player.load();
    self.player.play();

    if (this.autoFastForward)
      this.autoFastForwardInterval = setInterval(function () {
        if (
          self.videoElement.buffered.length > 0 &&
          self.videoElement.buffered.end(0) - self.videoElement.currentTime > 2
        ) {
          // console.log(`${self.videoElement.buffered.end(0)}-${self.videoElement.currentTime}`);
          self.videoElement.currentTime = self.videoElement.buffered.end(0) - 1;
        }
      }, 1000);
  };

  this.fullscreen = function () {
    if (this.videoElement && this.videoElement.requestFullscreen)
      this.videoElement.requestFullscreen();
  };

  this.onPlay = function (fn) {
    this.onPlayEvtListener = fn;
  };

  this.destroy = function () {
    opts.container.children().remove();
    this.player.destroy();
    clearInterval(this.autoFastForwardInterval);
  };
}

var videoPlayer = new FLVPlayer({
  container : $('#xxoo'),
  url : 'http://192.168.65.20:3333/video/010307074713',
  autoFastForward : false
});
videoPlayer.play();