I need to playback audio files in many different web browsers and different versions. The old system produces 4-bit WAV files, which many browsers can't handle. All files contain synthesized or recorded human voices. Anyway I'm gonna need to replace it. So my questions are:
1) what is the best file format to use for audio files, with regards to compatibility, size and quality?
2) what is the best way to use HTML5 and staying backwards-compatible?
We need to support Internet Explorer versions 6, 7, 8 and 9; Firefox, Chrome and Safari.
Update: finally got it working for IE 6-9, Firefox and Chrome; haven't tested Safari yet. I learned that Safari for windows requires Quicktime and IE requires windows media player.
Here's what I'm using:
<audio autoplay>
<source src="/static/sound/SOUND.mp3" type="audio/mpeg">
<source src="/static/sound/SOUND.ogg" type="audio/ogg">
<source src="/static/sound/SOUND.wav" type="audio/wav">
<source src="/static/sound/SOUND.aiff" type="audio/x-aiff">
<object>
<param name="autostart" value="true">
<param name="src" value="/static/sound/SOUND.mp3">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="/static/sound/SOUND.mp3" controller="false" autoplay="true" autostart="true" type="audio/mpeg"></embed>
</object>
</audio>
I provide the same audio clip in MP3, OGG, WAV, and AIFF and then let the browser pick which it wants to play. The audio tag is for HTML5, the object tag is for older systems, and embed works on some systems not supporting the object tag.
I put this together from some information on a few websites, but unfortunately I've forgotten the URL.
UPDATE
I've since switched to using howler.js for this stuff. It automatically deals with all the cross-browser issues related to sound. Unfortunately it doesn't support IE 6-8, but I've given up supporting those any way.
With the HTML5 audio tag you can specify different audio types to attempt to load because each browser allows different types. There is a nice compatibility chart on this page: http://html5doctor.com/native-audio-in-the-browser/
The below code will work with most browsers. It first attempts the new HTML5 audio method then falls back on the embed method.
<audio width="100" height="100" autoplay="" controls="" tabindex="0">
<source type="audio/mpeg" src="songs/All-My-Life.mp3"></source>
<source type="audio/ogg" src="songs/All-My-Life.ogg"></source>
<source type="audio/wav" src="songs/All-My-Life.wav"></source>
<embed width="100" height="50" src="songs/All-My-Life.mp3">
</audio>
Related
Adobe has said that it plans to phase out its Flash Player plug-in by the end of 2020. People said that all Flash content should have been migrated to other technologies like HTML5. I agree more or less, but how ready is HTML5 when in comes to replacing Flash entirely?
Let's take an everyday example - video playback on web.
On Flash, I can just embed one player for all the videos on a website and just change the paths to link to different FLV videos(or MP4's) for different videos on the site. As long as Flash is installed on client side, I need not worry much which browser they are using.
However with HTML5, to be cross-browser compatible, AFAIK, I need to have three video files (three different formats of the same video - MP4, WEBM and OGG).
<video id="video" controls preload="metadata" poster="img/poster.jpg">
<source src="video/v1.mp4" type="video/mp4">
<source src="video/v1.webm" type="video/webm">
<source src="video/v1.ogg" type="video/ogg">
<!-- Flash fallback -->
<object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/v1.mp4" width="1024" height="576">
<param name="movie" value="flash-player.swf?videoUrl=video/v1.mp4" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videoUrl=video/v1.mp4" />
<img alt="My video" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
</object>
<!-- Offer download -->
Download MP4
If I have 80+ different videos on the site, I will have to host 240+ video files on the server, which is quite troublesome to prepare and manage the files. I hate to transcode a video to different format every time before putting the video content on the server.
It is now mid-2017, and HTML5 video is nothing new. I wonder if there is any new cross-browser compatible method/hack to embed video playback using just one video format?
HTML5 is very ready for video. The advantages of using HTML5 over Flash is also to have playback on mobile which is definitely a must in 2017. To the solution to your issue the best you can do is use MP4 (encoded with h264 and aac). This video format is supported on all browsers (webm and ogg are only supported on some browsers).
MPEG-DASH is the new "one standard to rule them all" but it's a way off native support across all browsers at the moment. One answer would be to use a player like Ooyala's or Shaka.js to give you a polyfill, but that's going to be limited in support for older browsers.
If you're worried about managing assets there are Media Asset Management systems that can take a single asset and produce a variety of versions (eg mp4, webm, ogg as well as fragmented mp4 such as HLS and Dash) or you could roll your own using something like ffmpeg for transcoding or use a service like Azure Media Service
My videos are in amazon and i want to play this video by flowplayer or jwplayer.But my requirement is the video first try to play in html5 if it not possible it will go for flash mode.
I need a combination of HTML5 embed code and Flash embeded code.The embed code will automatically detect if the requesting device can play HTML5. If so, it will serve that code. If not, it will serve Flash version
I know it's been sometime since this question was asked, but in case anyone else is looking for the answer you can try
<video width="VIDEO-WIDTH" height="VIDEO-HEIGHT" controls preload="auto">
<source src="VIDEO-PATH.m4v" type="video/mp4">
<source src="VIDEO-PATH.ogv" type="video/ogg">
<object class="aligncenter" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="560" height="315">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="allowFullScreen" value="true">
<param name="wmode" value="transparent">
<param name="flashvars" value="config={'clip': {'url':'VIDEO-PATH.m4v','autoPlay':false, 'autoBuffering':true }}">
<p>Your browswer does not support video...</p>
</object>
</video>
Replace “VIDEO-WIDTH” and “VIDEO-HEIGHT” with the video dimensions, and replace “VIDEO-PATH” with the full URL of the video, and you’re good to go.
One important note: mp4/m4v video files will not play in Firefox. And if you use the HTML5 video tag, Firefox also won’t fallback to Flash, either. It will just show a blank box. You need to include an ogv file format in addition to mp4.
I'm looking for a way to broadcast a live video taken from a webcam or camera rooted to a PC.
The broadcast should be displayed in a HTML5 page using the tag (which support rtp, and rtsp I think).
The user viewing the stream should not have to install any plug-in or video player such as QuickTime.
I need the video to be in mp4 format such as: rtsp://www.mywebsite/streaming/video.mp4
This would be the link I'd put as the src of the html 5 video tag.
So I'd like to know if it's possible, what are my options to do such things.
It's possible. But you will have major problems if you're looking for cross browser support. What you can do is offer HTML5 video to the browsers supporting it and then offer QuickTime for browsers not supporting it.
<video src="stream.mp4">
<!-- Don't support <video> -->
<object>
<param name="src" value="video.mp4" />
<param name="autoplay" value="true" />
<param name="type" value="video/quicktime" height="256" width="320" />
<embed src="video.mp4" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" />
</object>
</video>
Also see: Streaming via RTSP or RTP in HTML5
I don't think it is possible now to "cheat" the HTML5 browser to encapsulate the live video stream to a ".mp4" file.
I believe HTML5 will consider live video support in a near future.
What you can do is just wait. :)
For maximum compatibility, here’s what our video workflow will look like,
Make one version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container & Make another version that uses WebM (VP8 + Vorbis) or Theora video and Vorbis audio in an Ogg container.
I think this combination solves your problem & it plays on most of browsers.
You should required at least two versions of Video to play in all the browsers.
When I use MediaElement.js and list first the mp4 file and then webm, then it doesn't play anything in Chrome (11.0.686.3 dev).
It works fine in Safari/FF/Opera.
It works fine in Chrome if I list mp4 first and webm second but don't call mediaelementplayer, using native HTML5 video.
It also works fine in Chrome (and others) if I call mediaelementplayer but list webm file first.
I've tried all variations and can't figure out this behavior.
I got around it on by changing source order on server side for Chrome, but i'm not a fan of that solution.
If anyone has any ideas I'd be grateful.
My HTML
<video width="475" height="275" controls="controls">
<source src="/media/BetterDays.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/media/BetterDays.webm" type='video/webm; codecs="vp8, vorbis"'/>
<source src="/media/BetterDays.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash fallback -->
<object width="475" height="275" type="application/x-shockwave-flash" data="/javascripts/flashmediaelement.swf">
<param name="movie" value="/javascripts/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&poster=/images/better_poster_200.jpg&file=/media/BetterDays.mp4" />
</object>
<!-- Image as a last resort -->
<img src="/images/better_poster_200.jpg" width="475" height="275" title="No video playback capabilities" />
</video>
My jQuery call:
$('video').mediaelementplayer();
I'm guessing Chrome 11 is the first version to have H.264 removed so things might be a little tricky with how it reports what it can and can't play. I'll switch over to the dev channel of Chrome and see if I can see what's going on.
It might be better to file a bug over at https://github.com/johndyer/mediaelement since this isn't really an implementation issue.
I had this same problem, I think. The first jQuery code I used to init the player was this:
var player = new MediaElementPlayer('#video-player',{});
player.play();
Then I changed it to this and it worked:
$('#video-player').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
hth
I changed preload on the video tag to "auto" and it works. I'm running chrome 27
I have HTML page where windows media player is embedded. It works very well in all browsers on Windows, but when trying to open in Firefox on Mac OS, it fails to open.
Is there any alternative method which can be controlled using Javascript or HTML or do I have to install Window Media Player support for Mac OS?
Try streaming with flash as a fallback, or use the <video> or <audio> tag, that Safari supports.
If you are trying to stream video in a way that works consistently on every browser, you should look into Video For Everyone:
Video for Everybody is very simply a chunk of HTML code that embeds a video into a website
using the HTML5 element which offers native playback in Firefox
3.5 and Safari 3 & 4 and an increasing number of other browsers.
The video is played by the browser itself. It loads quickly and doesn’t threaten to crash your browser.
In other browsers that do not support , it falls
back to QuickTime.
If QuickTime is not installed, Adobe Flash is used. You can host locally or embed any Flash file, such as a YouTube video.
The only downside, is that you have to have 2/3 versions of the same video stored, but you can serve to every existing device/browser that supports video (i.e.: the iPhone).
<video width="640" height="360" poster="__POSTER__.jpg" controls="controls">
<source src="__VIDEO__.ogv" type="video/ogg" />
<source src="__VIDEO__.mp4" type="video/mp4" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]-->
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4" />
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br />
MPEG4 / H.264 “.mp4” (Windows / Mac) |
Ogg Theora & Vorbis “.ogv” (Linux)
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
If you need to look for a Flash based player (both audio and video), take a look at Flowplayer, an Open Source (GPL 3) video player for the Web. It can do almost anything you might want to do, and there is an extensive collection of plugins for many applications.
Side-step the problem by using a flash based mp4 video player, this approach is the de facto one currently.