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

Dunno如果有帮助，因为这篇文章很老了。

  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();

使用videojs重新触发准备好的事件

1 个答案: