javascript - 使用 videojs 重新触发就绪事件

Question

我正在使用 videojs 和 videojs-hls 插件来流式传输 m3u8 文件。在托管 m3u8 文件的后端，存在一些过期逻辑。 x 分钟后，它将抛出错误并传播到 videojs 播放器。

在调用初始错误处理程序后，如何在单击时重新加载 videojs 播放器/事件监听器？

  var player;

  function handleErrorEvent() {
    console.log('the session expired, show a button to reload videojs');
    $('.reload-video-btn').on('click', function() {
      // how do I completely reload the videojs player with the same source m3u8 file?
      // and ensure that the "ready" and "error" event listener gets called 
    });
  }

  function handleVideoReadyEvent() {
    player.on('error', handleErrorEvent);
  }

  function init() {
    player = videojs('my-video', {});
    player.src({
      // this m3u8 file expires after a certain amount of time
      src: 'http://localhost:3000/api/stream/stream.m3u8',
      type: 'application/x-mpegURL'
    });
    player.on('ready', handleVideoReadyEvent);
  }

  init();

Answer 1

不知道它是否有帮助，因为这篇文章已经很旧了。

  var player;

  function handleErrorEvent() {
    // you should add some error type condition here to
    // make sure that error you are handling is expiration
    console.log('the session expired, show a button to reload videojs');
    $('.reload-video-btn').on('click', function() {
      // this is how you reinitialize player
      player.reset();
      player.src(...)
    });
  }

  function init() {
    // options is vjs version dependent
    player = videojs('my-video', {
      sources: [{
        // this m3u8 file expires after a certain amount of time
        src: 'http://localhost:3000/api/stream/stream.m3u8',
        type: 'application/x-mpegURL'
      }]
    });
    // its safe to add listener without ready
    player.on('error', handleErrorEvent);
  }

  init();