I`m using mediaelement.js library to display videos. The issue is that for Firefox 3.6.13 on MAC the library loads the .mp4 version of the video and not the .ogv version (wich when loaded is displayed properly).My video sources are in the standard order : ".mp4", ".webm", ".ogv". Is it possible to make the browser load the .ogv version ?
Under MAC video acts differently whenever you have QuickTime installed. The MAC would default to playing the QuickTime supported video instead of the HTML 5 format that it supports in this case OGG. My suggestion would be to detect platform and to remove the .mp4 source using Modernizr.
if (Modernizr.video.ogg) {
// Remove mp4 source
}
Here is documentation on Modernizr.
Related
I've embedded webm and mp4 format video on html page using video tag, It's working well on all devices on all browsers except ipad and Mac Pro. What video formats are supported by ipad and Mac Pro?
If you talk about the video support of the HTML5 video tag, it depends of your browser and your device (Desktop/Mobile).
See the table of video support
I found this mp4 from the site Giphy. To my surprise it plays in Firefox. Does anyone know how that can be? Normally I have to generate two versions of every video file, mp4 and webm. It would be nice to not have to do that.
Here's the file:
http://media2.giphy.com/media/yoJC2NG0MLnSoEPjIA/giphy.mp4
Firefox will use an mp4 library is a suitable one is on the system that Firefox is running on:
Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.
source
If you can use HTML5 I'd suggest the video tag like the following. I figured you'd want controls so I added the controls attribute to the video tag; you could also add autoplay if you want that. I tested it on IE11 and the current versions of Firefox and Chrome. works for all of those. Having alternate versions isn't a bad idea, but mp4 is pretty universal on modern browsers.
<video controls>
<source src="http://media2.giphy.com/media/yoJC2NG0MLnSoEPjIA/giphy.mp4" type="video/mp4">
<source src="http://media2.giphy.com/media/yoJC2NG0MLnSoEPjIA/giphy.webm" type="video/ogg">
Your browser does not support the video tag.
</video>
As to why:
MP4 H.264 (AAC or MP3) The MP4 container format with the H.264 video
codec and the AAC audio codec is natively supported by desktop/mobile
Internet Explorer, Safari and Chrome, but Chromium and Opera do not
support the format. IE and Chrome also support the MP3 audio codec in
the MP4 container, but Safari does not. Firefox/Firefox for
Android/Firefox OS supports the format in some cases, but only when a
third-party decoder is available, and the device hardware can handle
the profile used to encode the MP4.
Note: MP4s encoded with a high profile will not run on lower end
hardware, such as low end Firefox OS phones. The MPEG media formats
are covered by patents, which are not freely licensed. All the
necessary licenses can be bought from MPEG LA. Since H.264 is
currently not a royalty free format, it is unfit for the open web
platform, according to Mozilla [1, 2], Google [1, 2] and Opera.
However, since royalty free formats are not supported by Internet
Explorer and Safari, Mozilla has decided to support the format anyway,
and Google never fulfilled their promise to remove support for it in
Chrome.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
So in our application, a video preview is displayed after it is uploaded. On my computer, however I'm getting a thumbnail that says 'plugin missing' and upon further inspection it says to install the quicktime plugin.
However, the link provided by Chrome to install the plugin leads to a page on apple's website which says 'quicktime plugins don't need to be installed anymore.'
Some details:
Video Extension: .mov
Codec: H.264, AAC (which may be what is in question here)
Chrome Version: Version 39.0.2171.71 (64-bit)
OSX Mavericks
How do I go about making videos play on my machine, as well as making sure that they show up in the production environment?
Google Chrome has removed support for plugins like Quicktime. Most likely you are also using Chrome 64bit. The Quicktime Plugin was only for 32bit.
HTML5 supports videos out of the box so the browser developers of IE, Firefox and Chrome do not see any more use for such plugins.
I tried searching for a solution to this and within three days of browsing the forum I could't find any help.
This is the link where I have my video:
http://www.aguacatesjbr.com/English/Company/company.html
I believe the code is correct because I replaced my source video with the Oceans-Clip video provided by the site. The Oceas-Clip video CAN PLAY on FireFox and IE but not my original video. However, if I type in directly the address of my video it DOES render on FF and IE.
I don´t think it is size problem because I was testing it with a video that weights 4.20MB.
I am having this problem with IE and FireFox in both PC and MAC. Android and Apple devices work perfectly as well with Chrome and Safari.
First of all, you need to serve the videos with the correct mime type, which is video/mp4 for H.264 in mp4, and video/webm for WEBM. See MSDN, MDN.
Right now you serve the .mp4video as video/mpeg.
Then, I your page has a source for video/webm pointing to http://www.aguacatesjbr.com/Videos/JBR_video.webm, which does not exist at the time of writing. Fix that.
Firefox can play back H.264/mp4 on certain platforms only. For a list of currently supported platforms and video support in Firefox in general see "Supported media formats".
Lastly, there will be warning messages regarding video load failures in newer Firefox versions. E.g.:
[20:35:11.515] HTTP "Content-Type" of "video/mpeg" is not supported. Load of media resource http://www.aguacatesjbr.com/Videos/JBR_video.mp4 failed. # http://www.aguacatesjbr.com/English/Company/company.html
[20:35:11.515] All candidate resources failed to load. Media load paused. # http://www.aguacatesjbr.com/English/Company/company.html
Seems like Firefox displays a plugin with an "X" in older versions of Firefox (i.e. - any version below Firefox 4) and refuses to default to the flashplayer.
I understand that Firefox 4 is supported by mediaelement.js in that it can play ogg video. What is the intended 'handling' of video by mediaelement in older versions that don't support ogg video or html 5?
HTML5 is not an standard for old browsers like FF3.X. The options are:
Update to FF5 (released a few days ago as stable).
Put a flash fallback. This is a flash solution for old browser which not accept HTML5 format, but can play videos throught flash, like YouTube.
For more information about the second option, you can enter to VideoJS. This is a good plugin based on javascript to play videos with HTML5+CSS with a flash fallback.
Good luck.