So, I'm building a website on which users can upload an watch videos.
I'm using the standard HTML5 video player (<video...> <src>...)
Currently, I use multiple sources: MP4, OGG and WEBM, for cross-browser compatibility
Due to the fact that maintaining three formats is both CPU intensive (converting) as well as eating away precious disk space, I started searching the need to find out whether it's really needed to support this three formats
According to the chart I found on Wikipedia (http://en.wikipedia.org/wiki/HTML5_video),
OGG and MP4 should be sufficient, as all browsers seem to be supporting at least one of these formats
... or am I missing something?
For a comprehensive answer see: http://diveintohtml5.info/video.html There's a compatibility matrix toward the bottom that is beginning to be outdated, but was authoritative at the time the article was written.
Firefox 3.5+ supports Theora video and Vorbis audio in an Ogg container. Firefox 4+ also supports WebM.
Opera 10.5+ supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 (and later) also supports WebM.
Chrome 3.0+ supports H.264, Theora video and Vorbis audio in an Ogg container. Chrome 6.0+ also supports WebM.
Safari on Macs and Windows PCs 3.0+ will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.
Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.
Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
Internet Explorer 9+ supports all profiles of H.264 video and either AAC or MP3 audio in an MP4 container. It will also play WebM video if you install a third-party codec, which is not installed by default on any version of Windows. IE does not support other third-party codecs (unlike Safari, which will play anything QuickTime can play).
Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin. Later in this chapter, I’ll show you how you can use HTML5 video but gracefully fall back to Flash.
Related
I have a WordPress site, I am using the Gutenberg editor, and an Audio block. This adds a little audio player to the page, which works on desktop and Android. It is not set to auto play.
<audio controls="" src="audio.mp3" preload="none"></audio>
On iOS (I've tested on iPhone and iPad), when I press play, it loads for a second, then changes to say "ERROR".
Does <audio> not work on iOS?
Make sure the audio format is supported by IOS
Supported Media
Safari on the desktop supports any media the installed version of QuickTime can play. This includes media encoded using codecs QuickTime does not natively support, provided the codecs are installed on the user’s computer as QuickTime codec components.
Safari on iOS (including iPad) currently supports uncompressed WAV and AIF audio, MP3 audio, and AAC-LC or HE-AAC audio. HE-AAC is the preferred format.
Safari on iOS (including iPad) currently supports MPEG-4 video (Baseline profile) and QuickTime movies encoded with H.264 video (Baseline profile) and one of the supported audio types.
iPad and iPhone 3G and later support H.264 Baseline profile 3.1. Earlier versions of iPhone support H.264 Baseline profile 3.0.
Source: https://developer.apple.com/...
I tried the following code below:
<audio src="http://XXX.XXX.XXX.XXX:XXXX/;" controls autoplay></audio>
I'm using Mac and this code worked fine with Safari but not with Chrome or Firefox.
Is there any solution using only HTML5? If not, can I make a fallback with some Flash open source library? How?
There might be some third party audio player for aac but I will share some links on my vast search I did
1 - HE AAC support
As per this post and also wiki pedia HEAAC
It says chrome supports HE-AAC
and here is a stack overflow post that will I guess help you to move formward.
SO AAC support
And here is another link saying chrome supports
**The MP4 container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is natively supported by Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. Firefox will soon support the format, but only when a third-party decoder is available.
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 anwyay, and Google never fulfilled their promise to remove support for it in Chrome.**
LINK : AAC Support
Please let me know if any of the link is help ful
No AAC is only supported by Safari and Internet Explorer. Here is a list for audio file support.
IE - MP3, AAC
Chrome - OGG, MP3, WAV
Firefox - OGG, WAV
Safari - MP3, AAC, WAV
Opera - OGG, WAV
I assume that listeners are using the latest versions of each browser.
You can create a WAV and a AAC stream and provide the AAC if listener is using IE with html if-else hacks. But this solution is costly.
I've had the same issue. With Chrome, try using a video tag instead of an audio one:
<video controls="controls" width="100%" height="60px">
<source src="xxxxxxxxxxx"/>
Your browser does not support video.
</video>
The only issue is that the Play/Stop controls hides automatically.
<video id="live" autoplay controls>
<source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>
I am trying to play h264 encoded live stream using html5 video tag. Live stream is broadcasted by wowza media server and when visiting src link I get a valid playlist file. When trying to play the stream on android chrome browser, player does nothing and shows black screen.
Is this html5 video tag related issue or maybe broadcaster?
These are the formats you can play using html5 source tags.
Think of a video format as a zip file which contains the encoded video stream and audio stream. The three formats you should care about for the web are (webm, mp4 and ogv):
.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
There is actually a good range of solutions for this. One solution would be to detect if HLS can be played:
document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== ''
However, this would not allow you to play HLS content on devices which do not support playback. At this moment, playback is only supported on Microsoft Edge, iOS Safari, OS X Safari and Android (however, I strongly advise against using HLS on Android due to limitations)
An other solution to play HLS across all platforms in HTML5 is to use an HTML5 HLS player such as THEOplayer. They managed to allow HLS to be played on all popular platforms and devices, including those without Media Source Extension support. Currently, the list of supported browsers and platforms includes: Internet Explorer, Edge, Firefox, Chrome, Opera and Safari on Windows, Linux, Mac OS X, Android, iOS and Windows Phone.
On Browsers supporting Media Source Extension you can use https://github.com/dailymotion/hls.js
For workarounds using flash, you can use FlasHLS chromeless player.
Try FlowPlayer. It provides a full HLS support with the least effort in server side!
What formats Google TV browser(Google Chrome) html5 "audio" tag supports? I have an issue with playback of streaming links. I have already seen this link(http://code.google.com/p/googletv-issues/issues/detail?id=5) but is there official approving and more deeply problem explanation?
Checked Chrome/11.0.696.77 on my Google TV using html5test.com and here is the result for audio/video:
Video: MPEG-4 and H.264 supported but not Ogg Theora and WebM
Audio: ACC and MP3 supported but not PCM, Ogg Vorbis, WebM
Interestingly my Mac Chrome 18.0.1025.165 supports H.264, Ogg Theora and WebM but not MPEG-4 for video and all five for audio.
You could try out http://html5test.com/ to check for all HTML5 supported features in GoogleTV browser including supported audio formats.
This is the list of supported audio formats for Google Tv Browser:
If you find any issues, please report it at:
http://code.google.com/p/googletv-issues/
How can I read a Red5 (RTMFP) stream using HTML5?
Red5 supports different kinds of streaming*, so I don't know which kind of streaming you mean:
Streaming Video (FLV, F4V, MP4)
Streaming Audio (MP3, F4A, M4A)
Recording Client Streams (FLV only)
*source: Red5 on Google Code.
You probably want to use the HTML5 Video Tag and/or the HTML5 Audio Tag to 'play' the stream. Therefor you will need to do some conversion.
Audio streaming
New technique, lot's of browsers and no universal codec support yet.
See browsers + codec's it supports*:
FireFox 3.6+
Ogg Vorbis
Wav
Safari 5+
MP3
WAV
Chrome 6
Ogg Vorbis
MP3
Opera 10.5+
Ogg Vorbis
WAV
Internet Explorer 9 (beta)
MP3
WAV
*source: Native Audio in the browser.
Video streaming
Currently there's a discussion going on about the HTML5 Video Codec, between Ogg Theora and H.264. So make a conversion to one of those formats. I would recommend H.264 because it looks like Red5 will implement H.264 support in the future.
As with audio as with video.. New technique, lot's of browsers and no universal codec support yet. See for list: HTML5 Video on Wikipedia.
After conversion
The easiest way to check for support of the video and audio tags is to dynamically create one or both with scripting and check for the existence of a function:
var hasVideo = !!(document.createElement('video').canPlayType);
This simple code line will dynamically create a video element and check for the existence of the canPlayType() function. By using the !! operator, the result is converted to a Boolean value, which indicates whether or not a video object could be created.
Alternatively
You can serve 2 streams with a Flash Fallback:
<video src="video.ogg">
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf"/>
</object>
</video>
The video tag is used by default, if not supported the browser will use the flashplayer.
Edit:
I now see that Red5 supports H.264 (Live Stream Publishing). Read here how to use the HTML5 video tag with the H.264 codec
You also might wanna have a look at: Adobe's Video Player Widget.
A short answer: you can't. The browsers will not support streams over RTMP (RTMFP), RTP or UDP. Your stream must be sent over HTTP to be accessible (in fact you have to emulate a static file on the server).
Also WebM deserves a few words. In May 2010 Google announced a royalty-free codec for HTML5 viceo purposes. As of now, the latest versions of alternative browsers (Mozilla, Opera, Chrome) has the ability to play it. Only the big ones who have invested good bucks to H.264 resist.
Now days a couple of media servers support WebM. I guess the first was Flumotion to implement it. I also have my own GPL software for live-streaming WebM called stream.m. It is a very early release but if you want to give it a try I'm not stopping anyone. :)
RTMFP and HTML5(WebRTC or Websocket) protocols are supported in WCS4
So you can publish RTMFP stream to the server and play this stream using Chrome(WebRTC), Firefox(WebRTC) or iOS Safari browser(Websocket).
Red5 does not support RTMFP.
RTMFP is a peer-to-peer designed protocol, however server can be used like RTMFP peer, therefore it would be simple client-server connection Flash-Server like RTMP.