Here's my goal: To have autoplay audio stopped when a Zurb Modal window disappears.
I'm new with doing this stuff, especially javascript!
I have a Zurb Modal window functioning as a splash screen that pops up on page load. I have HTML5 audio in the window that autoplays (it was a request - I don't like autoplay!). The window disappears when the background is clicked, but the audio continues to play. I don't know how to get the audio to stop! If anyone has an idea, I'd really appreciate hearing about it.
<script type="text/javascript" src="js/jquery.reveal.js"></script>
<div id="myModal" class="reveal-modal">
<audio controls="controls" autoplay="autoplay">
<source src="audio/splash-loop-01.mp3" type="audio/mpeg">
<source src="audio/splash-loop-01.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<div class="close-reveal-modal">CLOSE ME</div><!-- USE THIS TO CLOSE WINDOW -->
<script>
$(document).ready(function (){
$('#myModal').reveal();
});
</script>
$(document).ready(function (){
$('.close-reveal-modal').click(function(){
audioPlayer.pause();
audioPlayer.src = '';
audioPlayer.load();
});
});
To pause the audio, place this in your document.ready:
$('.close-reveal-modal').click(function(){
var myAudio = document.getElementsByTagName("audio")[0];
if(myAudio != undefined){
myAudio.pause();
}
}
Related
I want to display a little message to the user if it hits the play button, for him to know the song is loading (because there isn't any loading indicator natively in browsers).
I'm not using preload="auto" or "metadata" because the server was getting too much traffic, and not all users are going to listen to the these audios.
It takes about 5 seconds for the audio to start playing (it seems it has to download at least 1 or 2 Mb of the audio to really start playing), so I wanted this message to be shown while the audio is loading (or the metadata is loading), or at least show this for 5 seconds after the user clicks on the play button and then hide it.
How can I do that?
AudioElement fires event loadstart, just use it:
myAudio.addEventListener("loadstart", function () {
console.log(‘start loading ...’)
},false);
function message()
{
$('#msg').css({
"display":"block"
})
setTimeout(hide, 5000);
}
function hide()
{
$('#msg').css({
"display":"none"
})
}
.msg{
display:none
}
<body>
<audio controls onclick="message()">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<label id ="msg" class = "msg">Loading Please wait..</label>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
I am using the Metro UI Template, but I have a problem with the dialog when using Videos. When I close the dialog, the video continues playing.
The code I have is:
<script>
function showDialog(id){
var dialog = $("#"+id).data('dialog');
if (!dialog.element.data('opened')) {
dialog.open();
} else {
dialog.close();
}
}
</script>
Then the dialog is called by:
<div data-role="dialog" id="video" class="padding20" data-close-button="true" data-overlay="true" data-overlay-color="op-dark">
<h2>Title of Video</h2>
<video width="800px" controls="controls">
<source src="videos/video.mp4" type="video/mp4">
Your browser does not support the HTML5 Video element.
</video>
</div>
Does anyone know how I can stop the video when the dialog is closed?
OK, so I have managed to resolve the issue.
I placed the video in an iframe, then refreshed the iframe when the dialog is closed using the code I found here http://www.codingforums.com/html-and-css/168580-refresh-iframe-without-page-refresh.html
How can I play a sound file when the onload event fires using JavaScript?
For example:
If I have a webpage, when a user clicks on a button and this will pop-up a window. While the pop-up window is loading, the page will play a sound file.
Add a HTML5 audio element into your document:
<audio id="foobar" src="yoursample.ogg" preload="auto">
Set it hidden via CSS:
#foobar { display: none }
On the any JavaScript event handler play the audio:
var sample = document.getElementById("foobar");
sample.play();
For more information
https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video
Depending on your web application purpose you might want to support old browsers:
http://www.misfitgeek.com/play-sound-in-html5-and-cross-browser-support-with-backward-compatability/
Try this:
//store the audiofile as variable.
var popupsound = document.getElementById("notifypop");
function autoNotify() {
popupsound.play(); //play the audio file
}
#notifypop{ display:none;}
<body onload="autoNotify()"> <!--Play the audio file on pageload -->
<audio id="notifypop"> <!--Source the audio file. -->
<source src="path/sound.ogg" type="audio/ogg">
<source src="path/sound.mpeg" type="audio/mpeg">
</audio>
<script src="path/sound.js" type="text/javascript"></script><!--Load your javascript sound file.-->
</body>
Learn more about HTML5 media formats
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
One way to do it would be to insert HTML audio tags onclick and set them to automatically start:
http://webdesign.about.com/od/sound/a/play_sound_oncl.htm
I am looking for a way to show or hide HTML5 video controls at will via javascript. The controls are currently only visible when the video starts to play
Is there a way to do this with the native video controls?
I'm using google chrome browser.
<video id="myvideo">
<source src="path/to/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
<script>
var video = document.getElementById("myvideo");
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
</script>
See it working on jsFiddle: http://jsfiddle.net/dgLds/
Here's how to do it:
var myVideo = document.getElementById("my-video")
myVideo.controls = false;
Working example:
https://jsfiddle.net/otnfccgu/2/
See all available properties, methods and events here: https://www.w3schools.com/TAGs/ref_av_dom.asp
CARL LANGE also showed how to get hidden, autoplaying audio in html5 on a iOS device. Works for me.
In HTML,
<div id="hideme">
<audio id="audioTag" controls>
<source src="/path/to/audio.mp3">
</audio>
</div>
with JS
<script type="text/javascript">
window.onload = function() {
var audioEl = document.getElementById("audioTag");
audioEl.load();
audioEl.play();
};
</script>
In CSS,
#hideme {display: none;}
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me