Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

"No playable sources found" with certain HTML5/HLS videos

Hi,

I'm having some issues with certain HTML5 videos that are being served over HLS. Here's a simple demo (you can see the bottom video not working on non-flash desktop browsers, like Firefox without Flash extension) -> https://active.socialstudies.com/videotest.html

The test shows the top video being served via HTTP from our own server, while the bottom video is being served over HLS from an external provider. I'm thinking that perhaps the issue might not be related to JW player but either video encoding, but I wanted to check with you guys to see if I'm missing anything in our JW configuration.

Thanks!

1 Community Answers

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, there.

My name is Alex and I am one of the Support Engineers at JW Player. I will be more than happy to assist you with your questions.

As of today, our player can only render HLS streams in browsers that native support that format, which are Safari (for both Mac and iOS), Microsoft Edge and Chrome (for Android). In all other browsers, our player requires Flash to be able to playback HLS streams.

However, I’m excited to say that we are currently introducing functionality to our player that will make it able to render HLS streams without the use of Flash in those browsers that currently would require it. We are beginning with Chrome, which is starting to be able to play HLS stream via HTML5 in our next release, 7.4, which is currently in beta. Further down the line, we will be bringing that ability to other browsers, such as Firefox. However, I do not have any information on a timeframe for those releases.

As per our Using HLS Streaming support article, we recommend supporting those browsers that cannot natively handle HLS, but don’t have the Flash plugin installed/enabled by supplying a MP4 as a secondary source. Using the files on your test page as an example, the configuration would look something like this:

var videoparams_help = {
  playlist: [{
    sources: [{
      file: "http://media3.scctv.net/ssss/_definst_/EFT15-ACT1_M.mp4/playlist.m3u8"
    },{
      file: "https://active.socialstudies.com/videos/AC_help_adding_students.mp4"
    }]
  }]
};

(Please also note that you no longer need the androidhls: true statement in your configuration. Yay! Less typing!)

Please let me know if you need any more help or have any other questions.

Thank you!

This question has received the maximum number of answers.