I don't find solutions in other threads/discussions.
I'm facing a problem while playing wav files with mediaelement.js in IE9. The player appears completely black without any control button.
I tried the normal way unsuccessfully
<audio id="player2" src="myFile.wav" type="audio/wav" controls="controls"></audio>
I tried HTML5shiv unsuccessfully
<!--[if IE]>
<script src="html5shiv.js"></script>
<![endif]-->
I tried to force flash fallback unsuccessfully.
<audio id="player2"
controls="controls">
<source src="myFile.wav" type="audio/wav" />
<!-- Flash Fallback -->
<object width="640" height="360" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="audio" value="videos/build/flashmediaelement.swf" />
<param id="flashvars-param" name="flashvars" value="controls=falseg&file=myFile.wav" />
</object>
</audio>
Plus mode: 'shim' in the javascript.
This works fine in FF and Google Chrome.
It doesn't looks like IE9 will play .WMA or .WAV files using the audio tag in HTML5. I found this on Garret Wilson's blog.
IE9 HTML5 Doesn't Support WAV Files
HTML5 is turning out to be useful. Well, in theory. If it worked. See, HTML5 comes with all sorts of capabilities, like an element that plays sound. And this time around, the browsers are setting aside their instincts to be proprietary and, in the spirit of interoperability, they are implementing the same API! Microsoft even loves the element! So now can we write pages that work the same across browsers? Of course not! While they support the same API, the browsers decided they would only support certain audio codecs—meaning that there is no one audio format that will work on all browsers. As usual, Microsoft's actions here can only be considered malicious and in the spirit of preventing interoperability, not encouraging it.
Let's take MP3 as an example. IE9 supports it. Yay. What about Firefox 9? No. Mozilla claims this is because of patent risks. Well, OK, if you say so. So what does Firefox support instead? Ogg. That's an open audio standard supposedly unencumbered by patent restrictions.
So whether or not Microsoft buys Mozilla's story about MP3, in the spirit of interoperability, why doesn't IE go ahead and implement Ogg just so there will be some audio format that works on both browsers? You tell me. Maybe Microsoft would say, "MP3 is ubiquitous—why should we cater to Mozilla's issues?" That's a cop-out, but I'll let it slide. There are more devious problems afoot.
Let's skip lossy formats altogether and look at LPCM-encoded WAV files. Sure, they are bigger, but let's say I don't care and I simply want something to work across browsers. Who supports it? Firefox 4? Yes. Chrome 4? Yes. Safari 5? Yes. Opera 10.6? Yes. IE9? No!!!!
If IE9 supported WAV, then there would be at least one audio format that was supported across all the major modern browsers.
Guess who created the WAV format to begin with? Microsoft. Why don't they support it? Maybe you should start looking for the answer in the paragraph above this one.
Related
I'm creating my own audio, without controls of the browser.
<audio src="http://50.7.98.194:8081/~dl3/cgi-bin/dl.cgi/bqmu5mltxcqy43mxecgo4gnw743qr7fd7io22q5xj4/gl1mwvp6b326.mp3" id="audio">
</audio>
I have these functions, called when clicked some buttons:
function play()
{
audio.play();
}
function play()
{
audio.pause
}
function stop()
{
audio.pause();
audio.src = audio.src;
}
But for now, I only can reproduce mp3 or ogg files, but not a live stream radio.
I read about some plugins, but I need do it with pure html5.
Could you help me, please?
Thanks very much,
Playing audio from a "live source" seems to be supported by modern browsers. Basically just use the normal HTML 5 audio tags, and input the "live stream" URL as the source, ex:
<audio controls>
<source src="http://audio-mp3.ibiblio.org:8000/wcpe.mp3" type="audio/mpeg">
<source src="http://audio-ogg.ibiblio.org:8000/wcpe.ogg" type="audio/ogg">
</audio>
And the stream "just works" as it were, though attempting to seek with the default controls does nothing. So eventually you may want to replace the controls with "custom" ones, in normal HTML 5 media style. For backward compatibility to non HTML 5 browsers, this project may be useful: https://github.com/etianen/html5media/wiki/Embedding-audio (haven't tested it with live streaming but could/should work). Mp3 codec seems to be supported in major browsers (barring possibly firefox on Linux [?]). Opus might be another nicely cross platform option, I'm not sure codec wise what is the "best" choice as it were.
With some streams (shoutcast I presume) I have had to add a closing ';' to the URL, see https://stackoverflow.com/a/3182814/32453 for notes there, but that's basically just to get the "right" url.
Unfortunately, there is still no single video and audio codec, which is supported by all browsers! The programmers have to ensure that there is fallback provided for use-cases where browser A doesn't support codec B and vice versa.
You can take a look at this compatibility table, for both desktop and mobile browsers.
Desktop:
Internet Explorer (9.0+) support MP3 and AAC codecs
Chrome (6.0+) support Ogg Vorbis, MP3, WAV+
Firefox (3.6+) support Ogg Vorbis, WAV
Safari (5.0+) support MP3, AAC, WAV
Opera (10.0+) support Ogg Vorbis, WAV
Mobile:
Opera Mobile (11.0+) supported codecs are device-dependent
Android (2.3+) supported codecs are device-dependent
Mobile Safari (iDevices with iOS 3.0+) support MP3, AAC
Blackberry (6.0+) support MP3, AAC
Since flash is still widespread enough, it's probably the safest fallback.
Also, I want to note that there's nothing worse to use some library, some of them (e.g. jPlayer) provides very powerful interface and this only can help you to produce better code!
I think you can find everything you want to know in the following article: HTML5 Audio Radio Player by Opera Devs
See how it links to a .ogg and a .mp3? Why is that? All the examples and applications I've seen do the same thing. Is it necessary to have two sources?
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
No, it's not necessary. The different sources are just possibilities to be tried in order; not all browsers are guaranteed to support all formats, and so you provide fallbacks.
(If you only want to provide one, the src and type can go directly on the <audio> tag, too.)
Not all browsers support the MP3 or OGG format, so both are usually included to insure cross-browser compatibility.
The Wav format can also be included, and unlike MP3 and Ogg, it supports every browser (minus Internet Explorer).
MP3 works with Internet Explorer 9+, Chrome 6+, and Safari 5+. Ogg works with every browser, minus Internet Explorer and Safari.
So the combination of MP3 and Wav, or MP3 and Ogg, would play the HTML5 Audio on virtually every major browser. Of course, it's a bad idea to include Wav and Ogg as a combo, due to the fact that Internet Explorer requires MP3 as a format.
So the multiple tags are included as a fallback.
Hopefully in the future, all the major browsers will support all the formats. Currently only Chrome does.
(Hope my answer doesn't sound like a tongue-twister.)
To make it simpler lol.
Firefox doesnt support mp3 (idk if they still dont)
So to make your player function in firefox you need the ogg as a backup.
Firefox will skip the mp3 and try to find the ogg.
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.
We filmed a spokesperson on a green screen and have the video files ready in multiple formats.
With Flash we could use the wmode transparent within the param and embed tags, but is there something similar to this with the video and source tags in HTML5? Is it even possible to properly save .m4v or .ogv videos so that we can play these files with transparent backgrounds on our browsers?
Thanks
Yes, this sort of thing is possible without Flash:
http://hacks.mozilla.org/2009/06/tristan-washing-machine/
http://jakearchibald.com/scratch/alphavid/
However, only very modern browsers supports HTML5 videos, and this should be your consideration when deploying in HTML 5, and you should provide a fallback (probably Flash or just omit the transparency).
Chrome 30> supports video alpha transparency.
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
Update: Webm with an alpha channel is now supported in Chrome and Firefox.
For other browers, there are workarounds, but they involve re-rendering the video using Canvas and it is kind of a hack. seeThru is one example. It works pretty well on HTML5 desktop browsers (even IE9) but it doesn't seem to work very well on mobile. I couldn't get it to work at all on Chrome for Android. It did work on Firefox for Android but with a pretty lousy framerate. I think you might be out of luck for mobile, although I'd love to be proven wrong.
These days, if you use two different video formats (WebM and HEVC), you can have a transparent video that works in all of the major browsers except Internet Explorer with a simple <video> tag:
<video>
<source src="video.mov" type="video/quicktime">
<source src="video.webm" type="video/webm">
</video>
Note: It's important that the WebM version come second since Safari currently supports WebM, but not WebM transparency.
Here's a demo you can test with
I struggled with this, too. Here's what I found. Expanding on Adam's answer, here's a bit more detail, including how to encode VP9 with alpha in a WebM container.
First, here's a CodePen playground you can play with. Feel free to use my videos for testing.
<video width="600" height="100%" autoplay loop muted playsinline>
<source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4'; codecs="hvc1">
<source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">
</video>
And here's a full demo page using z-index to layer the transparent video on top and below certain elements. (You can clone the Webflow template.)
So, we'll need a WebM movie for Chrome, and an HEVC with Alpha (supported by Safari on all platforms since 2019).
Which browsers are supported?
For Chrome, I've tested successfully on version 30 from 2013. (Caniuse WebM doesn't seem to say which WebM codec is supported, so I had to try my way.) Earlier versions of Chrome seem to render a black area.
For Safari, it's simpler: Catalina (2019) or iOS 11 (2019).
Encoding
Depending on which editing app you're using, I recommend exporting the HEVC with Alpha directly.
But many apps don't support the WebM format, especially on Mac, since it's not a part of AVFoundation.
I recommend exporting an intermediate format like ProRes4444 with an alpha channel to not lose too much quality at this step. Once you have that file, making your WebM is as simple as:
ffmpeg -i "your-movie-in-prores.mov" -c:v libvpx-vp9 movie-webm.webm
See more approaches in this blog post.
At this time, the only video codec that truly supports an alpha channel is VP8, which Flash uses. MP4 would probably support it if the video was exported as an image sequence, but I'm fairly certain Ogg video files have no support whatsoever for an alpha channel. This might be one of those rare instances where sticking with Flash would serve you better.
While this isn't possible with the video itself, you could use a canvas to draw the frames of the video except for pixels in a color range or whatever. It would take some javascript and such of course. See Video Puzzle (apparently broken at the moment), Exploding Video, and Realtime Video -> ASCII
Mp4 files can be playable with transparent background using seeThrou Js library. All you need to combine actual video and alpha channel in the single video. Also make sure to keep video height dimension below 1400 px as some of the old iphone devices wont play videos with dimension more than 2000. This is pretty useful in safari desktop and mobile devices which doesnt support webm at this time.
more details can be found in the below link
https://github.com/m90/seeThru
webm format is the best solution for Chrome > 29, but it is not supported in Firefox IE and Safari, the best solution is using Flash (wmode="transparent"). but you have to forget "ios".
Quicktime movs exported as animation work but in safari only. I wish there was a complete solution (or format) that covered all major browsers.
I've got a set of videos that are going to be posted on a new site I'm developing, using our new html5 player. I know Firefox only supports .ogg format, whereas most others (including eventually IE9) support h264.
I'm looking to tap into the experience of the crowd here: has anyone had any luck with a single video format across browsers? Or am I doomed to double-encode everything? It just seems a shame to waste space on having two copies of each video because we can't standardize our codecs.
Thanks in advance!
PS (Flash player isn't really an option as a fallback, partly on principle and partly because of a rather large mobile userbase.)
From my personal experience with HTML5 Video, I create mp4, ogg, and flv file formats, and use the following implementation:
<video id="movie" width="" height="" preload controls>
<source id="srcMp4" src="video.mp4" />
<source id="srcOgg" src="video.ogg" />
<object id="flowplayer" name="flowplayer" width="480" height="352" data="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf"
type="application/x-shockwave-flash">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":"http://domain.com/video.flv"}' />
</object>
</video>
The MP4 format is provided first, due to a previous bug in iPad which only sees the first source listed.
If the browser can't play the MP4 version, it tries to load the Ogg version. If that fails, it uses Flowplayer (flash) as a fallback.
I know you're looking for a solution without flash as a fallback, but in my opinion, we're just not there yet. People are still using IE6 for crying out loud!
HTML5 Video is still in the making, and until it's completely stable across all browsers and platforms, you'll need to provide a "workaround" for different scenarios.
For mobile, perhaps you can detect the User-Agent and go from there...
Hope this helps
Probably WebM if not Ogg. WebM's patents are owned by Google but have been released from that. Ogg is probably OK but there are concerns. H.264 is a patent trap waiting to happen.
We have a somewhat similar problem.
<video id="movie" width="320" height="240" preload controls src="demo.mp4" />
We use the h.264 format, which I suggest you should do as well since you have a large mobile userbase (lots of iPhones I suppose).
However, WebM is the open format for people with principles ;) I can only hope MS and Apple will support it in the near future.