I suppose its a common question, but none of the tutorials and post I've seen have helped me so far. What I want its a sound to play whenever the cursor is over a menu image which is also a link. There's already another instruction in the onmouseover event for the image to flicker, but I've read that the event can have multiple instructions. Here's the code
(sorry if it looks messy)
<html>
<head>
<script type="text/javascript">
var sonido=document.getElementById("neonclip");
</script>
</head>
<body>
<audio id="neonclip">
<source src="http://www.eleyte.net/portafolio/neon.mp3" type="audio/mp3"/>
</audio>
<div style="text-align: center; margin-top: 130px;">
<a href="pagelink">
<img onmouseover="this.src='img2';
sonido.play(document.getElementById('neonclip'))
onmouseout="this.src='img1'"src="img1"/> </a>
</div>
</body>
</html>
I did this following an example but it didn't work. I know it'll have problems in firefox because it doesnt support mp3 format, but thats another story. Thanks in advance!
Just user below two format to play sound in all browsers.
<audio preload id="neonclip">
<source src="sounds/dingdong/57718^DingDong.mp3" type="audio/mpeg">
<source src="sounds/dingdong/dingdong.ogg" type="audio/ogg">
</audio>
And to play the sound try this
<a href="pagelink">
<img onmouseover="this.src='img2'; document.getElementById('neonclip').play()" onmouseout="this.src='img1'"src="img1"/> </a>
Related
I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.
You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp
I'm trying out new things for my website which involve when I hover, click or release a link I interact with it should play a sound. I am still getting used to the basics of HTML, sorry if I seem confused but I thought this would have been the right direction.
This is what I have so far:
<html>
<audio id="myaudio" src="hover"></audio>
<audio id="myaudio2" src="click"></audio>
<audio id="myaudio3" src="release"></audio>
<body>
<a href="https://google.com"
onmouseover="document.getElementById('myaudio').play()"
onmousedown="document.getElementById('myaudio2').play()"
onmouseup="document.getElementById('myaudio3').play()">google.com</a>
</body>
</html>
#guest271314 helped me with this one, turns out it was really easy.
I forgot that the SRC tag needs to point to a link. Here is the correction:
<html>
<audio id="myaudio" src="http://yourdomain.com/hover.wav"></audio>
<audio id="myaudio2" src="http://yourdomain.com/click.wav"></audio>
<audio id="myaudio3" src="http://yourdomain.com/release.wav"></audio>
<body>
google.com
</body>
</html>
Here's the part fixed:
src="http://yourdomain.com/sound.wav"
In order to make your web page plays music, the html code can be as simple as
<audio id="myaudio" src="c.mp3" controls></audio>
I have a welcome video playing by default in loop and when a user click on change video button a different video starts playing. But there is a blackout between change of video for about 1-3 seconds. I want to present my video as the video has not changed its still playing same video [I want it look like that a single video is playing i don't want blackout interfering with it]
Here how i am changing video
<!DOCTYPE html>
<html>
<head><title>Draw your gifts here</title></head>
<body>
<video width="1000" id="videotag" autoplay controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
<button type="button" onClick="changeVideo()">Change Video</button>
</body>
<script>
function changeVideo(){
var video_player = document.getElementById("videotag");
video_player.src = "media/draw1.mp4";
}
</script>
</html>
You can use preload auto for preventing the loading delay
<video width="1000" id="videotag" autoplay preload="auto" controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
while my question may be similar to the one found at: hide video container when there's no video in database to be displayed HTML PHP, I am looking for a Javascript/jQuery solution.
Essentially the effect I need to achieve is that when the html5 <video> tag can't load the video from its src, I want the div the video tag is contained in to be hidden, preferably with a jQuery solution to this unless there's a very simple way to do this which I have over looked.
What i have so far looks similar to this:
<div id="video">
<video controls="controls" width="320" height="240">
<source src="published/video.mp4" type="video/mp4" />
</video>
</div>
Any input is greatly appreciated.
Here is a pure js solution:
document._video = document.getElementById("video");
document._video.addEventListener('error',function(){
$(document._video).hide()
});
Also you can look at the link below for other video events:
http://www.w3.org/2010/05/video/mediaevents.html
You can detect <video> support with http://modernizr.com/
if (!Modernizr.video) $('#video').hide();
http://modernizr.com/docs/#video
For check if file exists on server - How do I check if file exists in jQuery or JavaScript?
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bb.mp4" type="video/mp4">
<source src="mov_bb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
v.parentNode.style.display = 'none';
}, false);
</script>
</body>
</html>
Copied from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded
Hi after coding a tutorial on how to make a media player I find that i cannot connect to any media with an absolute URL. After having made a diligent search for the answer W3schools and elsewhere the syntax still seems unclear in my mind. As far as I am aware the source tag is used and can be used to target different media types eg, ogg, webm, mp4, for example,
<video id='media-video' controls>
<source src="fish.mp4" type="video/mp4">
<source src="fish.webm" type="video/webm">
</video>
My question is this, is it possible to use an absolute URL with the source tag in this way and what is the syntax for doing so? kind regards and thanks for taking the time - robbie
guys could you take a look at this, i apologise as its not strictly html and css but it contains the script also, as you can see the media player calls certain functions one of which should be the onclick function to load the now relative url, but it doesnt work! ahhh is there no life without pain! Any ideas?
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Sample Media Player using HTML5's Media API</title>
<link href='media-player.css' rel='stylesheet' />
<script src='media-player.js'></script>
</head>
<body>
<h1>Sample Media Player using HTML5's Media API</h1>
<div id='media-player'>
<video id='media-video' controls>
<source src=http://www.youtube.com/myvideo type="video/mp4">
</video>
<div id='media-controls'>
<progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
<button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
<button id='volume-inc-button' class='volume-plus' title='increase volume' onclick='changeVolume("+");'>Increase volume</button>
<button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick='changeVolume("-");'>Decrease volume</button>
<button id='mute-button' class='mute' title='mute' onclick='toggleMute("true");'>Mute</button>
</div>
<div id='media-play-list'>
<h2>Play list</h2>
<ul id='play-list'>
<li><span class='play-item' onclick='loadVideo(http://www.youtube.com/myvideo);'>Fischer</span></li>
<li><span class='play-item' onclick='loadVideo("paddle-wheel.webm", "paddle-wheel.mp4");'>Paddle Steamer Wheel</span></li>
<li><span class='play-item' onclick='loadVideo("grass.webm", "grass.mp4");'>Grass</span></li>
</ul>
</div>
</div>
Of course it is possible. Just include the absolute path to your videos:
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
The gist is to organize your file in the correct order, user browser will auto detect the supported file types and play it accordingly.
Read more #: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/.
And I believe you've read this: http://www.w3schools.com/tags/tag_video.asp ?