flowplayer: chrome won't load mp4 if webm specified first

Question

flowplayer html5 5.4.6
chome 35+

in flowplayer html5, on chrome i kept getting html5: video encoding not supported or html5: video not found.

I load flowplayer via javascript and have a playlist defined like so:

$(function () {
    $('#fp').flowplayer({
        playlist:[ [
            { webm: "/usermedia/update_sets/140704/videos/02-480p.webm"},
            { mp4: "/usermedia/update_sets/140704/videos/02-480p.mp4"} ] ],                     
        splash: true
    });
});

i checked the video format of the mp4 and all was well. I can even drag and drop the mp4 into chrome and it plays np.

in chrome dev tools i opened the network tab and can see that it tries to open the webm file, get partial content, then cancels the get get. it never tries to load the mp4 file.

So i tried reversing the order so that mp4 was the first in the playlist. voila. video plays no problem. I also tested in firefox and it works without issue.

The question is, why does flowplayer html5 on chrome fail if webm source is specified first in the playlist?

='(

Jeroen Jeroen · Accepted Answer · 2014-09-04T14:04:05

take a look here

i hope this helps you

the browser checks what works but it looks from top to bottom so if the first works for him he wil use it so change the order and it suppose to work

to give an example to you

<div class="flowplayer">
<video>
  <source type="video/webm" src="http://example.com/intro.webm">
  <source type="video/mp4" src="http://example.com/intro.mp4">
  <source type="video/ogg" src="http://example.com/intro.ogv">
  </video>
</div>

now webm will go first, if you change it to:

<div class="flowplayer">
<video>
  <source type="video/mp4" src="http://example.com/intro.mp4">
  <source type="video/webm" src="http://example/intro.webm">
  <source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>

.mp4 go first.

flowplayer: chrome won't load mp4 if webm specified first

1 Answers