I have a YouTube video popup. When I click on the button, the popup appears. But when I close it the sound of the video keeps playing.
How can I stop the sound?
function popup2(id, video) {
$('.popup_overlay').show();
$('#'+id).addClass('activePopup');
$('.activePopup').show();
switch(video) {
case 'video1': $('#video').html('<iframe width="854" height="510" src="//www.youtube.com/embed/kJUmm8-Y5JM?autoplay=1&cc_load_policy=0" frameborder="0" allowfullscreen></iframe>'); break;
}
}
function popup_out() {
$('.popup_overlay').hide();
$('.popup').hide();
$('.popup_overlay').hide();
$('.popup2').hide();
$('.popup').removeClass('activePopup');
$('body').find('label').removeClass('red');
send = false;
}
Here is my HTML code:
<div class="popup2" id="video"></div>
<div onclick="popup2('video', 'video1')">BUTTON</div>
It seems you are just hiding the youtube iframe, so the video is still playing but you can't see it.
You could try to just empty the #video div in your popup_out() function, something like this:
$('#video').html('');
or
$('#video').empty();
Related
I'm trying to make it so that when you click on a separate element it pauses the current song playing from a different element. In addition I had previously made it so when you click on the same element after it started playing audio it would pause that audio, but when you click on a different element with the same function it breaks.
var paused = true;
var song;
var songPlaying;
function playSong(x) {
song = x;
if(songPlaying != song){
document.getElementById(songPlaying).pause();
}
if(paused == true){
document.getElementById(song).play();
paused = false;
songPlaying = song;
} else {
document.getElementById(song).pause();
paused = true;
}
}
Is there anyway I can fix this? Will I have to make a different function for every song?
EDIT 1: Here the HTML my for the sections I'm using as well, each audio file has an ID that is called as a parameter in the function inside onclick
<div class="album">
<img src="assets/BattalionsOfFear.png" onclick="playSong('bofSong')">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>
<div class="album">
<img src="assets/FollowTheBlind.png" onclick="playSong('bfsSong')">
<h1>Follow the Blind</h1>
<p>Released in 1989</p>
</div>
<!--- Audio -->
<audio id="bofSong">
<source src="assets/BattalionsOfFear.mp3">
</audio>
<audio id="bfsSong">
<source src="assets/BanishFromSanctuary.mp3">
</audio>
EDIT 2:
In attempting Laif's solution
I have tried adding the 'song' class to my HTML img elements and linked it to my audio element with the 'song1' class yet it still is not working. Am I doing the classes wrong or is it something with the way I have put them down?
<div class="album">
<img src="assets/BattalionsOfFear.png" class="song song1">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>
<audio id="bofSong" class="song1">
<source src="assets/BattalionsOfFear.mp3">
</audio>
Each song should share the same class so that you can do something like this:
<html>
<div class="song"></div>
<div class="song"></div>
</html>
var songs = document.querySelectorAll(".song");
function playSong(e) {
songs.forEach(el => {
el.style.play();
});
e.currentTarget.pause();
};
songs.forEach(el => {
el.addEventListener("click", playSong);
});
I have two iframes in one page.
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe id="video1" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
I want to access onplay() event of iframe, then i can able to stop second video(#Video1) while playing first one(#Video) and Stop first video(#Video) when playing Second(#Video1).
It is possible using YoutubeAPI but i do not want to use that because i have other url videos not Youtube videos(here i put youtube links instead orignal links to avoid copyright). Is there another way except YoutubeAPI. YoutubeAPI is not working on another link resources. Please Suggest.
It has two <iframe>. First, you need switch between iframe.
Is there a way to change context to iframe in javascript console?
After, here my code how to access to event onPlay() of <iframe>
<script src="https://www.youtube.com/iframe_api"></script>
<div class="module module-home-video">
<span class="module-strip">Latest Product Video</span>
<div id="video"></div>
</div>
<script>
var player, playing = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
height: '360',
width: '640',
videoId: 'xmhtV4270NU',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if(!playing){
alert('onPlay is clicked');
playing = true;
}
}
</script>
I have a Slider that I have modifed the code so it stops on mouseover. So far so good. but.. As you can see in the html I have one slider with en embedded video.
My problem is that even though the slider now stops on hover, I also want it to stop when I play an embedded video. Preferably, but not necessary, resume the slider when the video ends.
Javascript:
var VSliderHome = true;
$("#SliderHome").hover(function() {
VSliderHome = false;
}, function() {
VSliderHome = true;
});
function autoplaySlider(length) {
if (VSliderHome) {
if (visibleSlidePosition < length - 1) {
nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
visibleSlidePosition += 1;
} else {
prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
visibleSlidePosition = 0;
}
updateNavigationMarker(navigationMarker, visibleSlidePosition + 1);
updateSliderNavigation(sliderNav, visibleSlidePosition);
}
}
HTML:
<slider.body>
<section class="cd-hero">
<ul id="SliderHome" class="cd-hero-slider autoplay">
<li class="selected">
<div class="cd-full-width" style="background-image: url(img/fileupload/zlide.jpg)">
<div class="textcont-left">
<h2>text</h2>
<p>text</p>
Köp Nu
</div>
</div>
</li>
<li style="background-image: url(img/fileupload/smatrphones.jpg)">
<div class="cd-half-width cd-img-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fXu2fWz" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cd-half-width">
<div class="textcont-right">
<h2>text</h2>
<p>text</p>
Mer Information
</div>
</div>
</li>
</section>
</body>
Add an on-click function in the current function of the slider... Similar to the on-hover,however do it on-click, so that when you click in the area of the PLAY it will effect the slider... even though you're clicking play and the click has nothing to do with the slider, the fact that the video is on the slider and the slider is awaiting an on-click function result... works.
Use the video event play/pause to change your variable
$('video').on('play pause', function(e){
VSliderHome = e.type === 'pause';
})
You need to listen for events from the video and respond accordingly. You can see the details of how to do this in the YouTube Player API Reference.
As a quick example, you might want something like this:
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// stop slider
} else if (done) {
// start slider
}
}
I have some divs that I use jQuery's fade in/out to bring onto the page when a link is clicked. Each page has an associated html5 audio element that also fades in/out accordingly.
$('.link').on('click', function(e){
var targetpage = $($(this).attr("href"));
$('.pagecontainer>div').fadeOut(0); //fade out currently displayed page
targetpage.fadeIn(); //fade in page associated with link
if (targetpage.children().hasClass('backgroundmusic')) {
$('audio').animate({volume: 0}, 1000); //fade out currently playing audio
alert('audio faded out');
$.each($('audio'), function () { //stop all audio
this.currentTime=0;
this.pause();
alert('audio stopped');
});
alert('stop function executed');
}
});
$('.sound').on('play', function () { //since volume was faded out, reset volume when click play button
$('audio').animate({volume: 1}, 100);
});
HTML:
Audio 1
Audio 2
Audio 3
<div class="pagecontainer">
<div id="page1"> //all three audio elements are in exact same spot
//clicking page link fades in current audio and fades in new one
<div class="backgroundmusic">
<audio controls loop class="sound" preload="none">
<source src="../../site/music/music1.mp3"/>
<source src="../../site/music/music1.ogg"/>
</audio>
</div>
</div>
<div id="page2">
<div class="backgroundmusic">
<audio controls loop class="sound" preload="none">
<source src="../../site/music/music2.mp3"/>
<source src="../../site/music/music2.ogg"/>
</audio>
</div>
</div>
<div id="page3">
<div class="backgroundmusic">
<audio controls loop class="sound" preload="none">
<source src="../../site/music/music3.mp3"/>
<source src="../../site/music/music3.ogg"/>
</audio>
</div>
</div>
</div>
The "alert('audio faded out')" will execute, but the "alert('audio stopped')" does not execute as it's not running the "$.each($('audio'), function" script at all, neither does "alert('stop function executed')". I have to use this "each" script as $('audio').currentTime=0 does not work, neither does $('audio').pause(), as I have multiple audio instances on my page.
Does anyone know why this is not working?
Thanks.
You pass in e to your function but don't use it. Probably want to prevent default action from that click event.
e.preventDefault(); //Put this at the top of the callback
This should fix your .each() problems. Also you should be using the console instead of alerts as to not freeze your page.
console.log('audio faded out'); //Use console instead of alerts
$('audio').each(function () { //Do it this way.
this.currentTime=0;
this.pause();
console.log('audio stopped');
});
console.log('stop function executed');
I have used the following code to add autplay to iframe video onclick.
Html:
<span id="stoprotate"></span><iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?wmode=transparent" frameborder="0" class="slide" allowtransparency="true" id="video" wmode="opaque"></iframe>
script:
$(document).on('click','#video',function(e){
$(".roundabout-in-focus #video")[0].src += "&autoplay=1";
$(this).unbind("click");
})
Stop auto play
I need to remove autoplay on click the stopautoplay link. How to do that?
Change my answer:P Try to use a global variable to save the url and then reuse it when you click the
var gurl;
$(document).on('click','#video',function(e){
gurl = $(".roundabout-in-focus #video")[0].src;
$(".roundabout-in-focus #video")[0].src += "&autoplay=1";
$(this).unbind("click");
});
I wrote a sample:
http://ohcool.org/sof/13641740.html