I need to play a sound on all browsers ( so I have to use the object tag ).
The loop doesn't work.
Why ?
This is my code:
<object height="0px" width="0px" data="audio.mp3" type="audio/mpeg" >
<param name="autostart" value="true" />
<param name="loop" value="true" />
<param name="src" value="audio.mp3"/>
<embed src="audio.mp3" autostart="false" loop="true">
</object>
For such an old browser, maybe you can fall back to the <bgsound> element. This element is non-standard, but still the guys at Mozilla took the time to describe it.
In summary, so set a source and specify an infinite loop:
<bgsound src="sound2.au" loop="infinite">
You can add such an element using JavaScript.
For other browsers, including modern versions of Internet Explorer (9 and up), it's best to use the <audio> tag, also documented by Mozilla.
The audio tag supports inner content that is used when the browser doesn't support it. That feature can be used for the bgsound fallback, like so:
<audio src="sound.ogg" autoplay loop>
<bgsound src="sound.au" loop="infinite">
</audio>
Note that you will likely have to have the sound available in multiple formats if you want to make it playable on all browsers.
When you embed this way, the behavior is dependent on the plugin loaded to handle the media. There is no guarantee that loop or autostart are respected by the player that the user has installed. They should be considered as suggestions or hints to the player as to what it should do, and nothing more.
You will have more predictable behavior with Flash, which most folks with older browsers have installed.
Related
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>
I am trying to get a movie uploaded from a mobile device to play in a browser.
It works fine in Chrome and FF and IE9(compatibility mode) but I cannot get it to play in IE9 not in compatibility mode.
My embed code is:
<video id='vid' class='video' width='274' height='169' controls='controls' preload='load' autoplay='autoplay'>
<source src='/videos/vid1.mov' />
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" >
<param name="src" value='/videos/vid1.mov'>
<param name="autoplay" value="true">
<param name="loop" value="false">
<param name="controller" value="true">
<embed src='/videos/vid1.mov' width="274" height="169" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/"></embed>
</object>
</video>
At first I was just trying the Html5 embed code, but that didn't work, so switched it out for object and embed which didn't work either.
I found that I can combine both here: http://www.w3schools.com/html/html_videos.asp
but still it doesn't work anyway.
After spending 2 hours googling and trying different variations of this I need help!
IE9's HTML5 specs only support H.264 video encoding, so it's worth checking if the .mov was encoded properly
http://blogs.msdn.com/b/ie/archive/2010/04/29/html5-video.aspx
It could also help to supply at least 2 formats of your video, as not all browsers support one particular format. Perhaps .mp4 and .mov? If you're really ambitious swap .mov with .ogv, add a flash-based fallback as your object tag and you should be pretty well set.
change the mime type (as the server delivers it to the browser) from video/quicktime to video/mp4. Simplest way to do this, would be to add this to your .htaccess file:
AddType video/mp4 .mov
Everything should be good once you have this in place. The only other thing you'll likely see is videos coming from an iPhone being rotated 90 degrees to the left. This is the raw format stored by iOS. You'll have to take care of that on the iPhone or the server
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.
i'm playing around with html5 video cause it's nice to have fallback for iphone/ipad.
html5 video first checks for <source> elements, if no formats are supported it falls back to whatever content is provided inside the <video> tag (e.g. flash).
i'd love to reverse the behaviour to save bandwidth: use flash by default, if not available fall back to html5 video.
is there any way to get this behaviour without using javascript? (then the solution gets quite obvious).
best, hansi,-
p.s. i did try turning the elements "inside-out" (<object><video/></object> instead of <video><object/></video>, but that results the video displayed twice)
p.p.s. my current solution is
if( navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] ){ ... }
else{ ... }
which is sub-optimal, cause it works for iphone/ipad, but results in a big mess when using old browsers without flash installed.
thanks "zach at longtail"!, that worked!
for reference, here's how to get the "flash first, then html5" behaviour:
<object type="application/x-shockwave-flash" width="..." height="..." data="...">
<param name="movie" value="..." />
<video width="..." height="...">
<source src="..." type="video/mp4" />
<source src="..." type="video/webm" />
<source src="..." type="video/ogg" />
</video>
</object>
For providing html5-alternatives to youtube/vimeo embeds:
Please note that having the <object data="..." /> attribute is crucial and that it is missing in the embedding code that youtube/vimeo/etc. provide.
Make sure to change that, just throwing the <video/> tag in the code you copy+pasted will give you exactly the headache i had.
How can I use pure HTML to make a browser-integrated flash-free online music player? Like, you click on a button, and the music starts playing. I have tried everything with <embed> and with(out) <noembed>, but none of it seems to work. I need it to work in Firefox.
I have an MP3 file.
EDIT: Actually, folks, I am SO sorry for asking this question. I have now seen that I simply had not written the path correctly. It all works quite fine with the <embed src="../../path/to/file.mp3" autostart="false" width="20" height="20"/> tag.
The thing is, I was trying to write it for browsers that don't support Flash, like e. g. iPad's Safari.
This ought to help. The HTML5 audio tag has decent support with newer versions of Firefox, Safari, Chrome, and Opera (sadly no Internet Explorer).
You may need to convert your .mp3 to .ogg or another format because certain browsers only allow certain formats.
Oh, you'll need Javascript for controls like .play(), .pause()...
I realize this is not an answer to the question per se, I am adding it for completeness.
This link has every possible permutation you can imagine...
I am not sure if the part below will work in FireFox:
Here is how to embed Windows Media Player into your HTML.
To embed an object in HTML document, the object class ID is required. The class ID for Windows Media Player 7, 9, 10 and 11 is clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6.
Insert the following code into your HTML document to embed Windows Media Player 7 and later:
<OBJECT id="VIDEO" width="320" height="240"
style="position:absolute; left:0;top:0;"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject">
<PARAM NAME="URL" VALUE="your file or url">
<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
<PARAM NAME="AutoStart" VALUE="True">
<PARAM name="uiMode" value="none">
<PARAM name="PlayCount" value="9999">
</OBJECT>
In the URL parameter, you can specify a URL (for streaming) or a local file.
I don't think this is possible yet (comes with HTML5).
You could use the Yahoo Media Player which works with Javascript.