HTML5 Video Won't Play In Firefox - firefox

I have converted my video to .mp4 and .webm formats for use on the web. As from my understanding Firefox doesn't support .mp4 but its does support .webm
This means having both should support all browsers.
I have the following HTML to display my video,
<video width="100%" height="auto" controls>
<source src="6-steps-to-becoming-an-elite-internet-marketer\_\video\mp4\part-0-t4ej1dbeuk.mp4" type="video/mp4">
<source src="6-steps-to-becoming-an-elite-internet-marketer\_\video\webm\part-0-t4ej1dbeuk.webm" type="video/webm">
Oppps! Your browser appears to not be able to play this video. Please update it!
</video>
It works in Chrome, IE and Safari however not in Firefox.
I get the error message "No Video with supported format and MME type found"
I've added the following into my .htaccess to support all types.
# HTML5 video to work in all browsers
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
I've spent hours on this very issue but just having no luck.

I fixed it!
Firefox are very specific on the type of slashes you can use. I was using backwards slashes copied from a windows file path.
Soon as I changed the slashes to forward such as the following,
<source src="6-steps-to-becoming-an-elite-internet-marketer/_/video/mp4/part-0-t4ej1dbeuk.mp4" type="video/mp4">
It worked! .mp4 video works too, like perfect!
So it was never anything to do with the file or MME types. Hope this helps someone out there who finds themselves in the same shoes.

Related

Changing useragent in request headers for HTML5/FLASH HLS player?

I have a site where I host live streams, and now our programmers restricted m3u8 files to be played only with specific user-agent otherwise it return 403 error.
We tried using GrindPlayer, but their support told us they do not support custom user agent.
Do you guys know any HLS HTML5 or FLASH player which support useragent to be set while requesting m3u8 file.
We are forced to use VLC webapp, and Chrome users can't watch videos.
This is major issue to us.
EDIT:
I just figured out this code
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>
Works great in Android, Egde, IE etc, but not in Chrome.
Why Google Chrome makes everything so difficult?

MP4 file not playing in firefox - whats a good video alternative?

I cannot get my mp4 video to play in Firefox - it simply says " No video with supported format and MIME type found". Here's my HTML...
<video poster="images/video.png" width="100%" controls autoplay>
<source src="images/polutionbbc.mp4" class="videoplayer" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
The video plays well in other browsers. I have read other similar questions here on Stackoverflow and some people are saying that FF just will not play mp4 video at all due to licensing...
Playing MP4 files in Firefox using HTML5 video
That assumed therefore, could anybody please suggest either a fix or an alternative video format that plays universally across browsers and how I would convert it?
I am hosting with hostgator and I have checked the list of mime types and mp4 is listed there so I dont think it is that.
You should use .ogg for firefox and opera, according to w3schools you can include both formats to make it work on all modern browsers
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Link: http://www.w3schools.com/html/html5_video.asp
Here you have some info about compatibility between video/audio formats :
https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats?redirectlocale=en-US&redirectslug=Media_formats_supported_by_the_audio_and_video_elements
I solved this - the commenter was correct I need to run both mp4 and ogg videos. To do this step-by-step including converting mp4 to ogg for free using VLC media player see this video http://www.youtube.com/watch?v=vNxb6bnTpP0
<video controls>
<source src="https://videocdn.whipclip.com/video/55eby.mp4?v=2" type="video/mp4">
<object type="video/mp4" data="https://videocdn.whipclip.com/video/55eby.mp4?v=2" width="568" height="320"/>
I'm sorry; your browser doesn't support HTML5 video in MP4 with H.264.
</video>

Audio in html5 not working in FF4/Safari

I got this audio link in my html5 document:
<audio
src="http://sverigesradio.se/topsy/ljudfil/3017771.m4a"
type="audio/mp4"
controls="true"
preload="metadata"
title="Senaste sändningen från Radiosporten">
Senaste sändningen från Radiosporten</audio>
It renders properly in chrome, but in FF4 it first flashes the controls normally and then I get a big "X". In safari, it seems to hang while reading metadata.
Is there a problem with my audio-tag or with the audio-file? Is the redirect a problem?
Firefox doesn't support MP4 audio, it supports OGG audio only.
See this page for Audio support:
http://html5doctor.com/native-audio-in-the-browser/
UPDATE: concerning m4a format (which is AAC as far as I know), Safari and Chrome should support it, maybe even IE9, but no others.
You might find some useful info here (talks about video, but video also needs audio codecs): http://diveintohtml5.ep.io/video.html
UPDATE 2: And a more up-to-date table posted by Tom Gullen.
Firefox doesn't support mp4, but you can use PCM audio standard like .WAV that supports firefox, safari & chrome.

video will play in firefox but not when in html5 video tag?

so we're building a video site with a html5 player (and backup flash for windows).
But what's really stumping me is when i view this file in firefox it plays;
http://www.roguefilms.com.local/media/uploads/2010/07/1495/8_lg-poke.mov (stored locally) but when its in the html video tag is does nothing. It shows the poster but doesn't play the video. It doesn't even show the 'Sorry - your browser is not supported!'
I know ff prefers ogg and we can use the flash backup player but if it can play it as a ht64 .mov without the player why can't it with? Seems a bit daft?
If anyone knows anything it would be great...
<video controls="controls"
id="myVideo"
src="/media/uploads/2010/07/1495/8_lg-poke.mov"
poster="/media/uploads/2010/07/1495/still.jpg"
height="360"
width="640">
Sorry - your browser is not supported!
</video>
best, Dan.
When you just load the .mov file, the content-type your server provides causes Firefox to check and see and see if any plugins handle the content. In this case, QuickTime handles it, which is why it plays.
The video tag doesn't launch plugins to play content, however.
Firefox doesn't support h264, as you mentioned, although am surprised it plays the video in its own, unless its forcing it into a Flash player automatically, which is possible.
To get the "sorry" message to display you'll need to use the source element:
<video controls="controls" id="myVideo" poster="/media/uploads/2010/07/1495/still.jpg" height="360" width="640">
<source src="/media/uploads/2010/07/1495/8_lg-poke.mov">
Sorry - your browser is not supported!
</video>
I wrote this back in April of last year, but it might help: html5laboratory - using the video element.
We once had a similar issue with the web server (Apache, in our case) not sending the proper MIME-type for the video file and Firefox first downloaded it completely before starting to play it. Is it possible that the player would work if you just waited long enough? You could use Firebug to see if your browser transfers anything.

Firefox To Play Ogg

I have an ogg/audio file converted from mp3 using Alt WAV MP3 Ogg Converter.
When I drag and drop the file in Firefox or in Google Chrome, the audio plays nicely.
But when a use the following code to place the file inside a page it only works on Chrome.
My code is simple as that:
<audio controls>
<source src="foo.ogg" type="audio/ogg">
</audio>
Someone can tell me why?
Thanks
I think you can find your answer here.
In my case I had to add MIME types to our nginx server.
Because this works on IE:
<source src="foo.ogg" type="audio/mp3">`
And this works on Chrome, Mozilla, Safari, Opera
<source src="foo.ogg" type="audio/ogg">

Resources