Right now we are using HTML5 players for our mobile sites, so we have list of all handsets in our database with supporting video format. So for each request we query database to find what format that phone will play ,example (Samsung J500 : mp4)
We need to remove this dependency and want the player/browser to detect the format and play, we have mov,mp4,3gp,asf video formats with us.
What is the best way of doing this , given we only knew about the browser ? Our target is to cover maximum handsets to play best quality video that a handset supports .
If you need to support old devices, what you currently do seems like a good idea. However, if the device is old enough that it requires a "special" video format, I doubt it supports HTML5?
Since your question specifically mentions HTML5, you can list multiple sources in your Video element. The browser will go down the list until it finds a source it can play.
<video controls>
<source src="Cat.ogv" type="video/ogv">
<source src="Cat.mp4" type="video/mp4">
</video>
See Using HTML5 Audio and Video and HTML5 Video Fallback
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
Every tutorial/explanation I see out there that discusses HTML5 video format fallbacks use this type of markup as an example:
<video autoplay>
<source src="/myvideo.mp4" type="video/mp4">
<source src="/myvideo.webm" type="video/webm">
Sorry, your browser doesn't support HTML5 video.
</video>
So my question, why does everyone suggest to put the MP4 before the Webm format? If your browser supports Webm, it almost definitely supports MP4... The above markup essentially ensures that the more efficient Webm video will never be used, even though it has arguably better compression and will reduce bandwidth. Why is this?
Am I missing something about the way video fallbacks work?
It has to do with backwards compatibility with iOS 3 devices. iPads running iOS 3 had a bug that prevented them from noticing anything but the first video source listed.
MP4 video type was the only supported video format, so if the mp4 version of the video is not the first source, it is ignored.
So, if you want to deliver video to iPad owners who haven’t yet upgraded iOS, you will need to list your MP4 file first, followed by the rest of the video formats.
Read more
For some reason, my video on wordpress wont show up when I use iframe to view it. In I.E., it automatically loads the video into the windows media player versus playing through the iframe.
I am using a local mp4 for the video's. From what I can tell, there's no issues with my I-Frame code. Anyone got any idea's? I cant get it to play in the iframe!
You should not be using <iframe>'s like that. In the past it was a relatively more popular method, but extremely unreliable even back than.
What you should do instead is either encode your video's as .flv's and use flash to play them, or encode them for the 'new' html5 <video>-tag for which no additional plugins are required. To get the best results with the new tag you should convert for 3 different codecs, but H.264 gets you quite far. This is how it ends up looking if you have converted multiple formats:
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
And you can read more about it here.
I have no idea why this isnt working.
<video src="American.avi" controls="controls">
<object data="American.avi" type="video/avi" />
<embed src="American.avi" />
All of the above tags return either "Missing Plugin" or have video controls that dont load a video. There is no link to install the missing plugin on chrome, there is on Firefox but it says no suitable plugins were found.
Any suggestions?
If you are trying to ensure a wide range of compatibility across browsers, then I believe the suggested method of embedding video using HTML5 tags is as follows;
<video width="480" height="320" controls="controls">
<source src="American.ogg" type="video/ogg" />
<source src="American.mp4" type="video/mp4" />
<p>I'm afraid that your browser does not support the video tag.</p>
</video>
AVI is a video container, and could contain video in one of a wide variety of formats. As such, I believe it's preferable if you can convert your video to .ogg and .mp4 formats to ensure compatibility across a wide range of browsers.
To clarify, the above code will show a single video player which will use any one of the provided source methods (but only one). So you can provide multiple formats for a given video window and the browser will pick which of the source elements that it can display and it will display that. So, with the above code, if the browser can play the .ogg version of the file it will, otherwise it will try to play the .mp4 file instead.
Browsers generally don't support AVI. The choice of containers and codecs you have is limited, partly deliberately (because lots of formats means lots of potential security holes) and partly due to unfortunate limitations like software patents.
To get cross-browser-compatible <video> you will need to provide MP4 and one of WebM or OGG Theora. You can also use the MP4 video in a Flash player as a fallback for browsers that don't support <video>.
See this table for which browsers support which formats.
I am trying to develop a simple webpage with all the newly added basic elements of html5. While working with the video tag, I see that some formats like .avi are not supported.
So is there a list of video formats supported by html5?
Even if a particular format like WebM/ogg is supported by html5, is it safe enough to presume that the browser used will be capable to display the video?
There is no universally supported format (yet) unfortunately. Technically, HTML5 doesn't support any video formats, it's the browsers themselves that support specific video formats. This has led to a giant mess.
You can find a list of format compatibility on Wikipedia. From that, VP8/WebM is likely your best bet if you only want to support a single format. Luckily the <video> tag does support fallbacks if providing more than one encoding is feasible for your uses, in which case a VP8/WebM version combined with a H.264 version covers every major browser.
For multiple versions of the same video, you can use the following code:
<video width="320" height="240">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogv" type="video/ogg" />
<source src="myvideo.webm" type="video/webm" />
<p>Other backup content, eg. a flash version, should go here.</p>
</video>
There doesn't seem to be a single video format that is supported on all HTML5 capable browsers today. There's basically two formats that compete over being the one:
WebM - Supported by Firefox, Opera, Chrome, IE9 (with plugin)
H.264 - Supported by Safari and IE 9
So at the time, I think you'll basically has to provide the video in two formats and guess the browser to feed it the correct one.