I offer some video using videotag and videojs to support muliple browsers. It works very well in most browsers but IE9. Some IE9 users can't play the video and they doesn't have the Media Player in common. After installed Media Player, it works.
So, does IE9 use codec from Media Player, and it doesn't embed? If it does, it'd be a big accessibility problem, I think.
Which video formats are you serving up? IE9 supports MP4 natively, and WebM if the correct plugin is installed.
Related
<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!
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
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.
How can I play .mp4 videos using HTML5 using the video tag? Does chrome support HTML5 with .mp4 videos?
Safari can play h264 encoded mp4 videos, Chrome nolonger supports them, Firefox never did. If you pick Google's WebM format, it will work in both Chrome and Firefox.
chrome does support MP4 video with H.264 video codec, But it can only play video with "Baseline profile" of H.264.
The state of media currently with browsers is that you will likely not find a format that works with all browsers, so you will need to encode your video/audio in at least 2 or 3 different formats. There is a nice jQuery plugin called jPlayer that I would heartily recommend if you're going to start out with HTML5 media. The documentation is pretty good and it will really help you work with different browsers. http://jplayer.org/.
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.