I'm in the process of making some animated UI videos for my portfolio (which is going bad as hell, since there is no transparency support & colors in the export are wrong..), but I'm unsure which format I should export to.
I can do mp4, mov, etc. But what is the best one with support for IE9+ and Chrome for the past years, i.e. the modern versions ever since Windows 7? I assume support with Safari & Mac is already very up to date..
All major browsers support H.264 video. IE 9+ supports MP4, but not WebM unfortunately.
There is more information in this SO thread that includes some workarounds.
HTML5 - mp4 video does not play in IE9
Related
I am trying to use mediaRecorder API and make it run on maximum of browsers
video/webm;codecs=vp8,opus : that works fine on chrome and Firefox.. but not on Safari
video/mp4;codecs:h264 : works on Safari and Chrome.. but not on Firefox
It looks like Safari is now able to play webm.
What would be the mime type to use to make it run on both 3 browsers ?
I've been attempting the same thing and it is painful to say the least.
I'm able to use MediaRecorder to record video across Chrome, Firefox, Edge, and Safari. BUT the resulting videos do not playback on all browsers.
Safari - records in mp4 and mp4 will playback on all browsers
Chrome & Edge - I'm recording with mimeType: "video/webm;codecs=vp9", which will playback on Chrome, Firefox, and Edge, but not Safari.
Firefox - I'm using the default. It will playback on Chrome, Firefox, and Edge, but not Safari.
Supposedly Safari will playback webm with macOS Big Sur 11.3. I need to upgrade to test this.
Unfortunately webm is still not supported by iOS, so I'm looking into the Cloudconvert API to convert webm videos to mp4 before storing in S3.
Other suggestions welcome.
You'll need to use the MediaRecorder.isMediaTypeSupported API to find out what the browser you are using supports. See this open PR for details.
That does not help with playback however.
You've stumbled into an electropolitical food fight.
Sad to say, there's no commonality of codecs between browsers. You won't be able to find a common codec. Apple (Safari) is firmly in the H.264 / AAC world, the world of MP4.
Chrome, but not open-source Chromium, supports H.264 (which carries a patent burden). The fully open source Chromium browser does not. Firefox, via an automatically installed plugin from OpenH264.org, does, but it only supports H.264's constrained baseline version, not the fancier versions. Use MIME type video/webm; codecs="avc1.42E01F" and you'll be fine in Firefox and Chrome.
Microsoft new Edge supports the same stuff as Chrome.
WebRTC is rigged to allow endpoints to negotiate codecs with each other. In my opinion this is a kludgey way to patch this electropolitical squabble.
This is not a good situation. But it's Q1CY2021 reality.
as a simple answer that I found since it's not simply out there. Use a library like below to record in mp3. It's not supported by browser MediaRecorder natively, but libraries make it easy to encode to mp3
and then you have a blob or file that can be played in any browser and even mobile devices like ios
https://github.com/closeio/mic-recorder-to-mp3
I'm trying to serve some video content from a webserver, with the intention of supporting a reasonably wide set of browsers.
For iOS, as far as I can tell the way to go is to use HLS (HTTP Live Streaming) whereas on the desktop (and I guess Android?) MPEG-DASH is the state of the art. As a fallback I can provide a few static videos.
I've got this working on iOS with HLS and Chrome, Firefox, Opera, and Edge on desktop, but Safari on Mac just shows an activity spinner when I press play. As far as I can tell, this is because Safari tries and fails to use DASH as the playback method despite lack of Webm support and HLS being listed first.
For MPEG-DASH I have used Webm with VP9 and Opus, and my <video> tag looks something like this:
<video controls style="display:inline-block;max-width:174.22vh;max-height:98vh;width:98vw;height:55.125vw;background-color:#ccc;" preload="auto" poster="my-preview-image.jpg" data-dashjs-player>
<source src="myvideo/hls/playlist.m3u8" type="application/x-mpegURL">
<source src="myvideo/dash/manifest.mpd" type="application/dash+xml">
<source src="myvideo/myvideo-vp9.webm" type="video/webm; codecs=vp9,opus">
<source src="myvideo/myvideo-vp8.webm" type="video/webm; codecs=vp8,vorbis">
<source src="myvideo/myvideo-h264.m4v" type="video/mp4; codecs=h264,aac">
</video>
And I'm just importing the reference DASH implementation using
<script src="dash.all.min.js"></script>
I'm generating the HLS and DASH streams using ffmpeg from a high-quality master video exported from Final Cut Pro. The static Webm fallback files are also generated using ffmpeg while the H264 static fallback file is a lower-bitrate export from Final Cut Pro.
Is there a way I can either:
Tell DASH to respect the order of the sources and not jump ahead of the HLS stream
Or, not kick in if video/webm; codecs=vp9,opus is not supported by the browser.
Finally, if neither of those are possible, can I support multiple different codecs simultaneously with DASH? i.e. can I provide both VP9 and H264 DASH streams and have it pick VP9 over H264 where supported and otherwise fall back to H264 (higher bitrate or lower quality)? How would I go about producing that stream data?
From what you have shared, your browser will use the dashjs player when it encounters the video tag with the 'data-dashjs-player' attribute and the DASH player will focus on the formats it supports which do not include HLS.
As a crude solution you could check whether the browser can play HLS and use the native video tag if it can and your DASH player if it does not. Checking for HLS playback is a little undefined but the below approach appears to work at this time:
document.createElement('video').canPlayType('application/vnd.apple.mpegURL')
This should return 'maybe' on a browser which can play HLS (only Safari at this time AFAIK) and nothing if it can't - I just tested it on Safari and Chrome and it seems to behave like this.
Its worth noting that dash.js should be able to play MPEG DASH files on safari so it may be worth looking into the console or logs to try to find why it will not play your DASH video.
I am trying to make an online examination portal. When students start the exam, their webcam will start automatically and record the stream live and store in the server. Invigilators will either watch the students live or they can watch the saved live streams later.
I researched about this and found WebRTC as a possible solution along with a gateway server like Kurento. But later found out that WebRTC is not supported in Safari, which is a setback! My application should run successfully in web portal in any modern browsers which includes safari and also in android or iphone.
So can anyone suggest a possible solution to my problem? Which technology should I use that can support all browsers and OS?
Also, it would be helpful if you can provide links to good documentation or tutorials.
Note from the future (2020): This answer really isn't accurate anymore.
WebRTC is one problem... capture from the camera with getUserMedia is another. Safari doesn't support either.
There is no video capture API in Safari currently. The only thing you can do is make a native app for iOS.
Worse yet, because of Apple's restrictive policies, alternative browsers, such as Chrome, are crippled on iOS as they aren't allowed to use their own browser engines.
Use standards based technologies like getUserMedia and WebRTC for your primary web-based application. If you decide that the economics of your situation enable it, you can make an iOS app to work alongside until Apple decides to participate in modern browser standards like everyone else.
You can use Mediadevices.getUserMedia (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) to capture webcam stream on browser (chrome and firefox).
To play with webcam stream on safari, you would have to use a pollyfill - https://github.com/Temasys/AdapterJS
To record the video/audio stream, you can make use of Media recorder api https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder (Note : recording stream is still a challenge in Safari as there is no support/pollyfill. However, it works perfectly on Chrome and Firefox latest versions).
Helpful demonstrations :
https://webrtc.github.io/samples/
https://mozdevs.github.io/MediaRecorder-examples/index.html
https://codepen.io/collection/XjkNbN/
https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/
Does HTML5 supports IIS Smooth Streaming with all the HTML5 supported browwsers.
Based on Microsoft's own readme (http://learn.iis.net/page.aspx/1046/iis-media-services-readme#issues) it would appear that Smooth Streaming is a server-side technology to deliver H.264 video.
Another quick Google query yields this:
http://en.wikipedia.org/wiki/HTML5_video#Browser_support
Which is a list of which browsers will hypothetically work with it. Nothing like a bit of manual testing to double-check, though ;)
From videojs.com's documentation, I had the impression that I needed to include both ogv and webm file formats (in addition to mp4).
Then I read http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html#fbid=erNepglDbZl, from which it seems I just need mp4 and (ogv or webm).
What is correct? Do I need all three?
For those coming to this old question: only mp4 is required nowadays!
http://caniuse.com/#feat=mpeg4
As per Dive Into HTML5:
Firefox 3.5+, Opera 10.5+ and Chrome 3+ support ogv
Firefox 4+, Opera 10.6+ and Chrome 6+ support WebM (and ogv, assuming they don’t drop support in future)
So ogv is required for for:
Firefox 3.5 & 3.6
Opera 10.5
Chrome 3, 4, & 5
If you’re happy with those versions getting video via Flash (I presume that’s what VideoJS would do for them in the absence of an Ogg version), or no video at all if they don’t have Flash installed, then you don’t need the Ogg version.
Personally, I’d be very tempted to skip Ogg, just because converting video to three formats instead of two would (presumably) take 50% longer. I don’t have much experience with video though, so I don’t know what the pros and cons of each format are.
Check here not all browsers support all formats native (without additional plugins)
IE9 plays only MP4, firefox 4 WebM and OGV, Chrome plays all (but there are some rumours that they won t support MP4 for newer versions, if i m right), Safari plays MP4, Opera WebM and OGG
So if you check the codecs, you should either take MP4 and WebM or MP4 and OGG to match all current browser.