I'm trying to figure out which audio files are compatible with the <audio> tags across all the browsers. I've seen sites that state that some use .mp3, and some use .ogg, but somewhere else I saw that all supported .wav. But those sites were outdated.
Is there any up-to-date information on the current support for <audio> for all browsers across all platforms?
#animusion is wrong, Internet Explorer 9 does support the audio tag!
You only need two formats to cover all browsers today:
Ogg Vorbis (often .ogg): covers all browsers except IE and Safari, presumably because they hate the internet and don't want to support free formats.
AAC (often .m4a): covers Internet Explorer and Safari.
You should not use MP3.
This resource is pretty up to date : http://www.scirra.com/blog/44/on-html5-audio-formats-aac-and-ogg. Even MS has a new article on media tags, http://msdn.microsoft.com/en-us/magazine/hh781023.aspx
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)
There are a lot of discussion to explicitly indicate html 5 audio element is not supported by Internet Explorer 11 (strangely, it can be supported by both its ancestors or successors) on some Windows versions. I don't know what the reason behind is.
The discussions can be easily found by Googling "html5 audio ie11".
For example:
<audio> tag is not working in IE11
html5 <audio> tag don't work in IE11
However, I am facing a situation many of my users are exactly using IE 11 and I cannot push all of them to change it. This means they cannot use one of my music list website.
I know there is a solution to install a media pack. However, again, I cannot push each of my user to do that. Some suggests I go back to Flash, which is definitely NOT what I want. Is there anyway to achieve this by some script, e.g. javascript?
So, is there any alternative for html 5 audio element that can work in IE 11 in this situation?
IE11 does support HTML5 audio. Microsoft's knowledge base indicates that the specific Windows N and KN variants have all multimedia support removed (as well as a bunch of other features that won't work) and indicates the solution is to install the Media Feature Pack for N and KN editions of Windows 8.1.
Barring that, you're probably looking at needing a Flash fallback.
As I mentioned, <audio> fallback content can include HTML. And that means it can include a Flash <object> for browsers that don’t support <audio>.
I'm having a problem playing audio in Safari or Opera. The following code does not work in either:
<audio controls>
<source src="http://fallowproduction.com/music/Paradigm%20E%20-%20Once%20upon%20a%20Dubstep2.mp3" type="audio/mpeg">
</audio>
Here's the jsFiddle for easy access to the code: http://jsfiddle.net/panq7/1/
Considering it's really simple, I'm mystified as to why. Is this a normal problem? Or is there something else going on? I looked up playing mp3 problems with Safari and while I found no solution, I found a bunch of complaints.
Edit: I fixed the Safari problem by adding an option for an embed tag. Still, it's not the ideal fix, as Safari is supposed to support the <audio> tag, which it does not, apparently (someone let me know if it works in their version of Safari). However, Opera apparently does not support the <audio> tag, or the <embed> tag. This is contrary to the browser specifications, as mentioned later by another member of StackOverflow.
Opera does support <audio> however, when using MP3, there seems to be limited support for different sampling rates. To solve this problem, I detect support for OGG and detect the Opera browser and fall back to OGG. It's not perfect because I would prefer to simply detect if there is MP3 support and go with that, however Opera reports that it does support MP3, so it's not enough to just check that.
You could also simply use supported MP3 formats for Opera. I believe the following is supported:
32kHz/44.1kHz/48kHz frequencies,
16kbps-10Mbps bitrate
The reason may be the missing closed tag /> in source line.
Wolfgang
I had a solution to show both .MP4 and .WMV embedded in the browser. It worked fine in both IE and Chrome, but for some time ago it stopped working in Chrome. Chrome will not show any files (mp4 or wmv), but it works fine in IE. I googled it, and found several reasons to why Chromes newer version couldn't deal with this, but no solution to my problem.
The solution that worked was <object><embed>, but this only works in IE now. Then I tried to add the <video> tag and got it to work with mp4 in Chrome, but not with wmv.
So, is it anyone that have a solution to embed a wmv file that will run without problems in Chrome?
The requirements is that it should be able to play both MP4 and WMV files in Chrome and IE.
The long and short of it is that there is no solution. The <video> tag is supported by almost all browsers now, but there are different levels of support for different formats:
MP4 - Good support (noone uses Opera anyway). Works with both the browsers you mentioned.
WebM - Patchy support, definitely none on IE for the time being
WMV - I can't even find anyone giving a hard answer on this one, but I think the general concensus is that <video> is the way to go, and that to use one of the two above formats is the way to go. MP4 seems the better choice for the time being. If there are requirements to say that you must achieve the impossible/pointless, I'd suggest that your requirements-setters familiarise themselves with ffmpeg :)
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.