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.
Related
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.
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 am trying to embed a video on a website which will be used as an intro. Im interested in a way of embeding that video without a control bar (play,pause...). I can convert it to any format as I have the project file so compability isnt an issue. I have tried inserting it with tag in HTML5 and that works seamlessly but because of a bug in Chrome white color in the video becomes gray and that doesnt work for me because video background has to be white so it can be camouflaged with the rest of the website.
Interesting. I haven't seen the Chrome/white issue, but from the sounds of it... it's just in dev versions of Chrome? I'm basing this off the last comment from this post.
Looks like there was a patch, and it's waiting to be merged.
Not sure if these help in terms of using HTML5's video tag. If you don't care about the tag, you could always go with a Flash-based version using an .mp4 file. That way, whenever you're comfortable with Chrome's rendering... you could set it back up with the video tag.
Again, if you're ok with using Flash... you could pull it off like so (using Flowplayer):
<object width="600" height="338" type="application/x-shockwave-flash" data="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf">
<param name="movie" value="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "/yourDirectory/yourMovie.mp4", "autoPlay":true, "autoBuffering":true},"plugins": {"controls": null}}' />
</object>
Again, not sure if Flash is a deal-breaker here.
i just want to embed a flash like this:
<object
data="data:application/x-shockwave-flash;base64,..."
type="application/x-shockwave-flash">
<param name="movie"
value="data:application/x-shockwave-flash;base64,..."
/> </object>
but it just doesn't work. Did i make any mistake?
thankz
That's because it doesn't work. Not only would you have a buffer overflow, but most browsers don't allow for the inclusion of Flash via Data URIs. If you need a good place to host your Flash, Google Code works just fine.
I'm using the following code to display a YouTube video.
<object width="425" height="344">
<param name="movie"
value="**URL**">
</param>
<param name="allowFullScreen"
value="true">
</param>
<embed src="**URL**"
type="application/xshockwave-flash"
allowfullscreen="true"
width="425"
height="344">
</embed>
</object>
It works in Firefox, but why doesn't it in Internet Explorer?
I'm a totally new to web development, so I'm running into all these wonderful inconsistencies that you veterans are used to ;)
To elucidate, it doesn't work because the object tag is incomplete. Firefox gives up on the object element and uses the fallback old-school embed element instead. IE doesn't support embed so you get nothing.
An object element must at least have a type attribute telling it what plugin to use and a data attribute telling it what to send the plugin. In IE you also need to mirror the data attribute in a <param name="movie"> value inside the object because it runs plugins differently.
IE won't ‘stream’ partially-loaded Flash files this way though. To get that, you have to use an ActiveX classid instead of the type to tell it which plugin to use. If you care about this (and you might not: for small files, stub loaders, and files that are useless until complete, it makes no difference) then you have to start serving combinations of nested objects or embeds, which quickly becomes confusing.
Try this:
<object type="application/x-shockwave-flash" data="VID_URL" width="425" height="344">
<param name="movie" value="VID_URL" />
</object>
Previously wasted a few hours working through the same issue. Different cause though...
For IE9, YouTube embeds (at least iframes) were not working because I had previously added Tracking Protection to IE for Google ad servers. In this case, I had to disable the tracking protection (Safety > Tracking Protection) or click the button immediately to the right of the address bar ('Some content is filtered on this site') that alerts end users to filtered content.