I've been using flash video for embedded videos on my site. My old 2.2.x android plays them fine but I'm noticing a lot of new android devices as well as apple devices will not play my videos because flashplayer is fading, so I'm investigating the solution - and HTML5 video seems to be the new thing.
I've just spent 2 hours searching google and read a lot of stuff but most of it is from 1, 2, or 3 years ago -- and judging from what I've read it looks like using the html5 video tag still requires each video to be converted to multiple formats, and full screen is some sort of vendor specific extension -- different on each browser which happens to support it.
So my question is whether HTML5 video tag is a full replacement for the flash player now, or is it still a kludgiferous scheme requiring browser specific hacks for half a dozen most popular browsers -- in 2013?
Does it work on PC's, Macs, Androids, and iPhones?
caniuse.com is a great resource for pretty good data to answer this question.
As of now...
~92% of web users' browsers support the HTML video tag. The main one that doesn't is Opera Mini (about 4.5%). For those users, you can use a Flash fallback, which is actually not too much work. There are a handful of very simple solutions that will handle this for you, like videoJS, jPlayer and JWPlayer.
For now, you do need to encode in two, possibly three formats. About 92% of users support MPEG-4/h.264. Opera Mini and IE8 do not support it.
Only about 71% of users can support full-screen HTML video, so for Android and iOS (mainly), all versions, the best you can do is set the video to fill 100% of the browser window. If full-screen is that important, then you'll want to use Flash.
So, in short, yes, HTML5 video does require a little extra work, but at this point, it's not that hard to get right, and it's a standard that's moving in the direction of better stability and uniformity. YouTube, for example, uses it (with fallbacks), if that's any indication that it's ready for prime time.
Related
My company's website embeds videos, currently hosted on youtube. But due to the fact that as of recently, youtube inserts a channel icon into the embed, I will be moving the videos to either another platform, or will use HTML5 video.
I'm not crazy about one aspect or another of various platforms, except a very expensive one (Wistia).
So I'm looking into HTML5, and have a couple of questions. First, in almost 2019, would I still need multiple formats? The audience is non-technical, largely upscale, and would likely be using Chrome, IE, Firefox, Sarafi or Edge.
This has been asked before, but nowadays do you think I'm safe using only MP4? And if so, any thoughts about ongoing browser support for H.264?
Thanks! Steve
Use HTML5.
<video> tag is supported in all major browsers and it looks like MP4 is supported as well. (check it out here)
Safari (version 5.1.7) on Windows 10 does not support html video and audio, but works well with same version on Windows 7, so you have to use flash to play html media in this case. This seems like quite a drawback or I am missing something. Is there a way around it?
http://jsfiddle.net/jxajbo6f/2/
var testEl = document.createElement( "video" ),
if ( testEl.canPlayType )
The number of users using safari on Windows 10 is going to be fairly small - Safari version less than 6 have less than 0.5% of total market share across all OS's according to this market share site for example:
https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpct=3&qpcustomb=
It could still be important for you, however, if you have a target audience or organisation that do need to use it for some reason.
The problem is that the HTML5 video standards and extensions keep evolving so a browser not being developed, as Alexander points out above, simply cannot maintain compatibility.
In addition to this the OS itself has been updated and may provide new or different mechanisms to playback videos, for example leveraging HW acceleration and allowing for DRM, and only limited support may be offered for older interfaces. Falling back to Flash looks like your best alternative if you really have to support this use case.
I'm a little confused by this one. A similar question was posted here:
How to deal with poor HTML5 video performance in Chrome?
but no satisfactory resolution seems to have come of it.
The long and short of it is that the HTML5 video element has a very poor performance in Chrome. Every other browser I've tried (IE9/10, Opera, Firefox, Safari, Safari iOS) runs absolutely fine but Chrome (for Windows) buffers very slowly and occasionally stops buffering altogether. It seems to ignore the preload attribute, although according to this article:
http://oddlystudios.com/blog/html5-video-problems-in-chrome/
it DOES preload, just limits itself at a couple of MB. This is definitely a recent thing, probably only affecting recent versions (I'm on 26.0.1410.64 m) and it's not only affecting my projects but also other sites including YouTube. It seems to be irrespective of file format, and only seems to affect longer videos (those of 5 minutes and above).
I guess my question is, has anybody else come across this phenomenon? If so, how do you combat it? In the other thread disabling the hardware acceleration for H.264 was suggested, but not only does this not work for me, but it's impractical from a development standpoint.
Yes Chrome itself preload just few of MB's among its entire video. The only approach taken by me was, to show loading progress bar while we load the entire video at background. once fully loaded the video, remove the loading layer and show the video to play ahead.
I never thought, I'd have to ask THIS question:
Is there a cross-browser way to play background MIDI files in a website without the need for a plugin?
(Now, please don't answer with "don't do it! it's annoying as hell!". It's for a kids-page and they love this stuff... And I will give the option to turn it on or off...)
I've found several approaches, each with their own problems:
<bgsound ...>-tag: IE only; must be careful not to use with other tag that IE might interpret also
<embed ...>-tag: Doesn't work in Chrome. Firefox requires a plugin, which it can't even install automatically...
<object ...>-tag: Chrome and Firefox require a plugin. Both suggest QuickTime, but neither installs it correctly...
<audio ...>-tag: Requires HTML 5; also not sure if it supports MIDI across browsers...
use a Java applet: Not available everywhere, and seems like overkill
Is there some way to make this work across browsers (minimum: current Firefox, Chrome, Safari, Opera, IE6+, Android, iOS) without requiring any plugins? Probably some clever mix of all the tags listed above?
I am really surprised that this seems to be so difficult. Is MIDI deprecated? Or background-audio in websites in general?
Why not HTML 5 Audio. After all it is supported in all latest browsers. ( Firefox/Opera can have problem with H.264 files ). And in case of Mobile browsers it should more better choice.
One option you may want to pursue is SoundManager2. An audio project based on JavaScript. I use it in many of my web projects and so far it seems goood. Requires a little bit of a learning curve, but the API is very rich and clear and how to install it and use it for various situations.
http://www.schillmania.com/projects/soundmanager2/
By building a JavaScript package for audio within your web site, you won't have to worry about additional plug-ins that front-end users may need to have for their machines. It works with old and new browsers, MIDI files, MP3's and more.
I have a HTML5 video, working fine, and i'm happily smiling whenever i start my browser... However!
I know the Video tag isnt supported by some browsers, but i noticed there is a difference in support for video attributes/methods/whatever too. Is there a summary of this somewhere?
For example:
The poster attribute doesnt work in every browser, even if the vide DOES work!
I think its pretty worthless to just use an entire javascript library to take care of one attribute like poster, so how to take care of this?
Or am i completely wrong, and is IF video is supported, also every attribute supported the same way?
Please help me! :)
Thanks for all your advice,
WK
ps: I am using the video for everybody variant of the video. So thats working fine.
Is this the kind of thing your after?? click me.
Basically there is the following support for the HTML5 video tag:
Every modern browser that has support for HTML 5 supports <video>
meaning: IE9+, FF3.6+, Chrome, Opera, Safari
Internet Explorer 9 does not support the poster attribute. I believe
there is even a bug about this on Microsoft connect.
Firefox does not support the loop attribute. (replaying a video after it has finished)
Different browsers support different video formats, IE9 supports
H.264, Firefox supports ogg (Theora) and WebM etc, which means that you would need to provide all formats in order to be compatible with all browsers.
The rest is pretty much supported everywhere.
well, HTML 5 is not yet standardized. Due to this, every browser that support html5 works differently. As far video tag is concerned then you have to provide with different formats so as to get support on various browser list. You can test browser support on this site. Here you can get all the details about the extent your browser support to HTML5
I find this page a good resource (although it is starting to get old as it was earlier this year): http://www.longtailvideo.com/html5
On a separate note, I find if you go to mobile devices such as Android the browser support varies greatly per device. Even though they are "supported" I always get strange behavior.
As for poster, there is no good solution if you want to have support across all browsers.