JW Player 7 loads HLS file only once in a tabbed container, with FLV all goes well

Question

I have multiple JwPlayer instances on one page, switched with a tabbed div. One of those tabs has a HLS file assigned to the JwPlayer, the other ones have FLV files assigned. When viewing the HLS tab for the first time and playing it, it works like a charm, but when i switch tabs (display:none <> display:block) it returns the no playable source error.

This exact same behaviour does not result in an error for FLV files, switching back and forth tabs and viewing FLV does not propose a problem.

  <script type="text/javascript">
    $(document).ready(function() {
      var player_container0 = jwplayer('container0');
      player_container0.setup({
        file: 'http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest(format=m3u8-aapl-v3)',
        type: 'hls',
        width: '100%',
        aspectratio: '16:9'
      });

      var player_container1 = jwplayer('container1');
      player_container1.setup({
        file: 'http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv',
        type: 'flv',
        width: '100%',
        aspectratio: '16:9'
      });
    });
  </script>

I have a Plunker setup to review this behaviour.

Thanks in advance !

Answer 1

File an issue in http://github.com/jwplayer/jwplayer

When you set display:none on the player and it's using Flash to render the video (it is for both HLS and FLV in this case), the Flash app is unloaded from memory and then reloaded again once it's visible again in the DOM. You could work around this by setting visible:hidden and using the api to pause and resume playback. I think you'll find this to be a lot faster than loading and unloading the swf from memory each time. Let me know.

If you file an issue in gihtub we can see when the flv player in Flash is able to recover while the hls player is not. The code is very different and was not designed to handle the kind of resets caused by removing the plugin from the DOM or setting display to none.