Playing sound on my website - html

I use a code to play background music on my website..
<embed src="1.wav" autostart="true" loop="true"
width="2" height="0">
</embed>
But this code does not play infinite looped music..
Once the sound track gets over it does no repeat..
What should i do to repeat the music again and again..

This is what I have found to work the best... Just replace the 'yoursounds' with the actual file name of your chosing.
<audio autoplay loop controls>
<source src="yoursound.ogg">
<source src="yoursound.mp3">
</audio>

The HTML5 solution is the Audio tag http://www.w3schools.com/tags/tag_audio.asp
This is the older solution: http://drayblog.gotdns.com/index.php/2009/05/13/html-embed-an-audio-clip-and-repeat-loop-it/
<EMBED SRC="/audio/media.mp3" AUTOSTART="true" HIDDEN="True" LOOP="True"/>
<NOEMBED>
<object type="audio/mp3" data="http://www.domain.com/audio/media.mp3"><param name="src" value="http://www.domain.com/audio/media.mp3"></param><param name="autostart" value="true"></param><param name="hidden" value="True"></param><param name="loop" value="true"></param>
</object>
</NOEMBED>

Instead of loop='true' try with loop='infinite' as below
<embed src="1.wav" autostart="true" loop="infinite"
width="2" height="0">
</embed>

Try jPlayer. It's an html5 media player that will fallback on flash. Here's an example from one of the demos:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
});
},
swfPath: "../js",
solution: "flash, html",
supplied: "m4a, oga",
wmode: "window"
});
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
http://jplayer.org/latest/demo-01-solution-flash-html/

Try using the audio tag instead:
<audio autoplay loop>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>
You need to use both mp3 and ogg files to be able to play your sound correctly in all browsers. Firefox for instance does not support mp3 files. Also using .wav is on websites is severely frowned upon due to its size.

<audio hidden="true" autoplay loop controls>
<source src="source.mp3">
</audio>
it will works fine as you want...

Related

A very very weird problem html object tag

When I insert a music file into the object tag, nothing appears. The browser is the latest update, and my object tag only has problem with music files!!!!???
please answer.....
<object data="demo.mp3">
<param name="autoplay" value="true">
</object>
Add path to existent file
<object data="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
<p>alternate text</p>
</object>
why don't you use <audio> tag?
like this:
<audio controls autoplay>
<source src="demo.mp3"></source>
</audio>

How to disable autoplay of the movie in XHTML transitional

Here's my code
<object type="application/x-shockwave-flash" style="width:425px; height:349px;" data="multimedia/1.mp4">
<param name="movie" value="multimedia/1.mp4" />
<param name="autoplay" value="false" />
<param name="allowFullScreen" value="true" />
</object>
When i open my website, the movies are automatically playing.
What is the solution so i can disable the autoplay of my movies in my website that use XHTML transitional?
I'd remove the autoplay attribute, since if the browser finds the autoplay string, it autoplays!
The autoplay is not a boolean type.
Also, the type goes inside the source, like this:
<video width="640" height="480" controls preload="none">
<source src="http://example.com/mytestfile.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
or
Try adding autostart="false" to your source tag.
<video width="640" height="480" controls="controls" type="video/mp4" preload="none">
<source src="http://example.com/mytestfile.mp4" autostart="false">
Your browser does not support the video tag.
</video>
JSFiddle example

HTML5 video tags not working

I am trying to make a website where I have multiple videos on it. When I run the code, only the first video loads. No matter what I do, the second video will not play or load. Why doesn't my second video load?
Here's my code:
<html>
<head>
<title>Andrew soundboard!</title>
<style>
h1{
text-align:center;
}
</style>
</head>
<body>
<h1>Andrew Soundboard!</h1>
<br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3558.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3558.mp4">
</object>
</video>
<br>
FREAK OUT #1
<br><br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3559.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3559.mp4">
</object>
</video>
<br>
STOP IT!
</body>
</html>
There doesn't appear to be anything wrong with your code. So the possible issues are:
Is your video on your server (or if running on computer, in an accessible folder)?
Are you linking to your video correctly (in the right file, etc.)?
Does your video have the exact same file name as your HTML?
Does your video have the EXACT same file extension as your HTML? (.mp4, .mov, etc.)
Hope this helped!

Image placeholder fallback for HTML5 Video

I'm using the following code to implement an HTML5 video on a page
<video autoplay>
<source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
This works great, embedded on my page in FF, Safari, and Chrome. What I'd like, since this video has no controls, and is mean to be embedded in the page with no borders (white BG in the video) is to have an image appear in place of the video.
I'd like to have an image as the fallback if the video can't be rendered with the element. I've seen the following post: html5 video fallback advice (no flash) which started the discussion. But not sure if those answers were what I needed.
My gut tells me that I can have JQuery detect the video capability, and if video is not supported, then write out some HTML that shows an image. But I was looking to see if there's something that could be simpler.
After a lot of searching, I found the solution that worked for me back to IE8. Have not tested in IE7.
How can I display an image if browser does not support HTML5's <video> tag
The above post, shows a method that seems to work for me. Here is the output based on my above code:
<video autoplay>
<source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
<img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
</video>
The IE7 browser does not supports Video Element. We have to write Fall back code for video tag. Here is my code :)
<video controls="controls" autoplay="autoplay"
poster="#" width="212" height="160">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
width="212" height="160">
<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={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</object>
</video>

Unable to play video Microsoft media player for html pages

i am trying to play videos on my site. its working on production. After publishing site on domain player isn't playing videos. Instead its showing msgs on media player bar like
'Preparing to connect', 'Connecting...' and 'Ready', which shows dark screen.
Here is my code of videos.
<SPAN id="music1">
<OBJECT style="width:560px; height:300px" id=mediaPlayer
codeBase=http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=5,1,52,701 type=application/x-oleobject
standby="Loading Microsoft Windows Media Player components..."
style="margin-left: 0px" classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95>
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows
/mediaplayer/en/download/" bgcolor="darkblue" showcontrols="true"
showpositioncontrols="true" showstatusbar="tue" showgotobar="true"
src="videos/1.wmv" autostart="true" designtimesp="5311"
loop="true" height="600" width="470">
</OBJECT></SPAN>
Please let me know, where i am doing wrong, or its domains issue??
Thanks in advance
Try this simple one:
<embed src="videos/1.wmv" width="600" height="470" type="video/x-ms-wmv"></embed>
Your object doesn't seem to have the source of the video specified. The embed has, but not the object
<SPAN id="music1">
<OBJECT style="width:560px; height:300px; margin-left: 0px" id="mediaPlayer"
codeBase="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=5,1,52,701" type="application/x-oleobject"
standby="Loading Microsoft Windows Media Player components..."
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<PARAM NAME="URL" VALUE="videos/1.wmv">
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows
/mediaplayer/en/download/" bgcolor="darkblue" showcontrols="true"
showpositioncontrols="true" showstatusbar="tue" showgotobar="true"
src="videos/1.wmv" autostart="true" designtimesp="5311"
loop="true" height="600" width="470" />
</OBJECT>
</SPAN>
You could also try to let go the object alltogether and just rely on the embed.
Try using
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
you can try this one:
classid=CLSID:clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6