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

HTML5 not working with Magento


My Magento site is not passing HTML playback, any idea why?
There is a video that plays in flash but not html5. Please see the video under the drop down menu called " video hardware" at http://on2dvd.com.au

Here is the embed player , you can see it is flash primary with rtmp, then fallback html5 mp4 file, but on ipad it does not play, the video does play in browser url http://cdn.on2dvd.com.au/fallback/connect_converters_288p_fallback.mp4
<div id='player1'></div>
<script type='text/javascript'>
jwplayer('player1').setup({
playlist: [{
image: 'http://cdn.on2dvd.com.au/posters/connect_converters_thumbnail.png',
sources: [{
file: "rtmp://rtmp.on2dvd.com.au/cfx/st/connect_converters_288p.mp4",
},{
file: "http://cdn.on2dvd.com.au/fallback/connect_converters_288p_fallback.mp4"
}]
}],
width: '512',
height: '288',
skin: 'stormtrooper',
primary: 'flash'
});
</script>

11 Community Answers

JW Player

User  
0 rated :

No issues seen.

what is the format of the mp4 that you are using? Is it mp4 h.264 isoV2?

perhaps even get rid of the line containing ' primary:'flash '. Doing so and with mp4 h.264 isoV2 you'll cover both the desktop and mobiles.

To ensure that you are *ONLY* HTML5 then do not have
the jwplayer.flash.swf present and only have the jwplayer.js and jwplayer.html5.js present.

IMHO, the most important aspect of a page is to have the correct doctype declared and that it validates as HTML5 thus conforming to known standards.

Analyzing the link you have given results in *6 Parsing, 78 HTML, 6 Link* errors present...I would fix this.


Be also aware that HTML5.1 standard is evolving which will validate pages as both 5.1 and 5 BUT a page written in HTML5 will not validate as 5.1 only 5.

JW Player

User  
0 rated :

Why bother with RTMP at all? You could just provide the MP4 in the normal way (as an http), without specifying a primary. Assuming it's coded properly, it should then play on any device, in any browser.

When in doubt, simplify.

JW Player

User  
0 rated :

Hi Willie
Thanks.
I don't understand why you say no issue found. Did you try on an iOS?
Just to confirm. I have no problem in desktop browser, the flash player loads and plays fine. It is just when there is a non flash player like iPad that the HTML5 player does not play the MP4

Interestingly, when I embed the same player in the body of a page on my website it does work properly in HTML5 fallback - it seems it is simply the matter that when embedded in the drop down menu it is not working in HTML5

MisterNeutron.
I also tried mp4 as the only source, in flash mode and also html5 mode. In flash mode it worked, in html5 mode it failed.

Ethan Feldman

JW Player Support Agent  
0 rated :

How did you encode this file?

http://cdn.on2dvd.com.au/fallback/connect_converters_288p_fallback.mp4

JW Player

User  
1 rated :

@shueardm - The video file / encoding / mime-type is fine. The issue to do with the numerous other event handlers you have attached to the document in order to get the navigation to work + the fact you are inserting the video into this navigation system.

You can prove this by switching to HTML5 mode and trying to click on the video - nothing happens. However you can get it to play programmatically using *jwplayer().play(true)* in the console. I suspect one of the other libraries/elements is capturing your click event and not then bubbling up the DOM to jwplayer...

JW Player

User  
0 rated :

@ Ethan--- Sorenson Squeeze 9 , all good there, done heaps with this preset

@ James. Thanks for your input, I just don;t quite have the same depth of understanding you clearly have, so can't say much to it in return.

I know it is inside a drop down menu, however the menu is simple html, at least that is how I manage it, there may well be javascript or jquery's involved but I do not know if this can affect it. all I know is that it works in flash player and I would have thought that would break before html5 player.

Ethan Feldman

JW Player Support Agent  
0 rated :

Can you try to do a test encode using – http://handbrake.fr/

JW Player

User  
0 rated :

@Ethan - the encoding is fine.

@shueardm - Try adding the following to your styles:
bc.. .jwplayer .jwcontrols{z-index:999999 !important;}

Ethan Feldman

JW Player Support Agent  
0 rated :

Okay.

JW Player

User  
0 rated :

@ James Herrienven - What a legend , where do I send the cheque my friend?

Ethan Feldman

JW Player Support Agent  
0 rated :

:)

This question has received the maximum number of answers.