I need to play sound in background that will repeat all the time - background music. I have added <audio> tag in my page html and added event
$("#audio-player").on('ended', function() {
//play again
}
in pageinit event of the page. And this works, but the music should continue even when I navigate to some other page, and I am not sure how to make this. I would appreciate any help. Thanks
You could use AJAX to load the new page. Use jQuery's load() to only load the #content part of the new page into the #content div of the current page.
HTML
<header>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
</audio>
</header>
Page 2
<div id="content">
Page 1 content
</div>
</body>
</html>
JavaScript / jQuery
$('a').click(function(e){
e.preventDefault();
var target = $(this).attr('href');
$('#content').load(target + ' #content');
});
Related
I want to make a script auto click on video icon button on page loading, but auto click is not working.
Code:
<svg class="button" id="play-button">
<use xlink:href="#play-button-shape">
</svg>
Auto click script code:
<script type="text/javascript">
document.getElementById("#play-button-shape").click();
</script>
Try the .on("click") or .trigger("click") function, it does the same thing but I had pretty much the same case as you and it had unlocked me.
I'm not sure it works but it's worth trying.
Why would you need to "autoclick" on page load? Just use a <video> element with autoplay...
<video controls autoplay>
<source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Use this script:
window.onload = function() {
document.getElementById("play-button").click();
}
I have a WordPress site with a page containing a video; I'd like this video to play automatically when the page is visited, and once the video has finished playing, I'd like a redirect to happen to a different page on my site.
I've followed the instruction from this post:
Redirect html5 video after play
But this doesn't seem to work for me and I can't figure out what I should do differently.
Here's the code currently on my page:
<script src="text/javascript">
function playVideo(){
var video = document.getElementById('addiction-video');
video.play();
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
}
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
Can anyone tell why it's not redirecting after the video has finished playing?
I have the above code directly in my WordPress page; I've tried placing the script below the html, and I've tried adding the script into my theme settings, but neither made it work.
Thank you!
Firstly change <script src="text/javascript"> to <script type="text/javascript"> since you are not importing an external script file. Read a bit about <script> tag.
Secondly you don't need the playVideo() function. Rewrite your code accordingly:
<script type="text/javascript">
var video = document.getElementById('addiction-video');
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
You don't need video.play();, since you have autoplay="autoplay" attribute in <video> tag. Read about it here and try it yourself here.
Thirdly keep your browser console open while writing a js code.
Good Luck!
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
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();
}
}
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