HTML5 - specify various video formats for compatibility
I have a code that will allow a video play in Firefox without using Divx player:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> function changevid() { document.getElementById('vid').innerHTML = '<source src="Filename.mp4" type="video/mp4" />'; document.getElementById('vid').load(); } </script> </head> <body> <body onload="changevid()"> <video id="vid" width="800" height="450" <video ... autoplay="autoplay" loop="loop" controls="controls" poster="Poster-image-test.jpg"> </video> </body> </body> </html>
It works very well. But I got the code from an old post on the forum and can not honestly say that I understand what he's doing. What I have to do now is to specify a second version of the video - as a WEBM - so that everything that can not read a format will use the other. Any ideas how I could go about adding this second video for the code?
I got it to work! This causes IE to play the MP4, Chrome to play the WEBM and FF to also play WEBM - without going through the Divx player. A loop does not work in FF, but games vid thru to the end before she stops - I can live with that. The link to the new page is:http://www.mickposch.com/low_poly/test_b.html
Here is the code: