flowplayer / flowplayer-hlsjs

Flowplayer HLS.js plugin
MIT License
81 stars 35 forks source link

Video object not updated when playlist advances to an HLS item #28

Closed jmdx closed 8 years ago

jmdx commented 8 years ago

I am getting stale video objects from the API when I have an HLS item in the second or later position of a playlist. This can be observed at http://codepen.io/anon/pen/wGpYjG or with the following code (I'm using Chrome 49):

<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
<link rel="stylesheet" href="//releases.flowplayer.org/6.0.5/skin/minimalist.css">
<!-- unminified hls.js library -->
<script src="//releases.flowplayer.org/hlsjs/hls.js"></script>
<!-- separate hlsjs plugin component -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.js"></script>

<script>
// turn on hlsjs debugging
flowplayer.conf.hlsjs = {
  debug: true
};
</script>
<div id="videourl"></div>
<div id="video"></div>
flowplayer('#video', {
  playlist: [{
    sources: [{
      type: 'application/x-mpegurl',
      src: '//stream.flowplayer.org/bauhaus.m3u8'
    }]
  }, {
    sources: [{
      type: 'application/x-mpegurl',
      src: '//content.jwplatform.com/manifests/vM7nH0Kl.m3u8'
    }]
  }]
}).on('progress', function(e, api) {
  videourl.innerText = api.video.time + ", " + api.video.src;
});

After finishing the first item in the playlist, the second item plays, but api.video.src still returns '//stream.flowplayer.org/bauhaus.m3u8', which in the above example is displayed above the video on every progress event for convenience. This is specific to HLS, since the following configuration (with an mp4 as the second clip instead) exhibits the expected behavior of showing the currently playing URL:

flowplayer('#video', {
  playlist: [{
    sources: [{
      type: 'application/x-mpegurl',
      src: '//stream.flowplayer.org/bauhaus.m3u8'
    }]
  }, {
    sources: [{
      type: 'video/mp4',
      src: '//ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4'
    }]
  }]
}).on('progress', function(e, api) {
  videourl.innerText = api.video.time + ", " + api.video.src;
});

Thanks!

phloxic commented 8 years ago

Thanks. Will take care of this. The cause is some - probably misguided - attempt of having the MediaSource blob src in the API available somewhere. It's probably better to leave this (almost) entirely inside the hls.js API (which is available as api.engine.hlsjs anyway).

It's probably enough to communicate the blob src on error when it matters, and handle api.video.src and api.video.url like the html5 engine does: it simply assigns the same value to both properties. - @nnarhinen - thoughts on this?

phloxic commented 8 years ago

@jmdx - this should be fixed now.

jmdx commented 8 years ago

Yep, looks good. Thanks for resolving this so quickly!