I have checked the Sitepoint book JUMP START HTML5: MULTIMEDIA BY TIFFANY B. BROWN for solution and I have checked internet with no luck so I am turning to this forum.
I placed a video “.mp4” file along with a “.webm” file on a web page. The video plays for me on Internet Explorer, Safari, Chrome, and Firefox but NOT on Opera. In Opera the player comes up along with the poster image, but it does not play. In attempt to solve this issue, then added a “.ogv” file to the others, but nothing changed.
On devices, I checked ipad and it runs there, but not on the android phone – I used firefox browser and I got a grey box with an X on it and I get the message that Your browser does not support the video tag
I can run the specific “webm” video and the “ogv” video locally using the Opera browser, but once I uploaded to the server they don’t work. I am thinking it has something to do with the way the file is being served by the server- can anyone share with me how to check?
When I go directly to the folder on the server (Windows Platform) via the browser – the “.mp4” file runs if I double click it but, not for the other 2 – I get “page cannot be found” message. I have deleted and uploaded several times with no change. Interestingly, the “.mp4” file runs for me when I double click it from within the Opera browser.
To Wrap Up – I need a cross-browser that works across browsers and devices.
Please help me understand where I am going wrong.
This is the code I am using –
<video controls loop width="800" height="450" poster="img/commercial_poster.jpg" >
<source src="video/GNCS2014.mp4" codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/GNCS2014.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/GNCS2014.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support the video tag.