Appying Javascript dynamically to videos within a slick.js Slider - javascript

Fiddle Here
Is it possible to have javascript that pauses a slide containing video for that video to play to completion on a specific slide #N instead apply to any slide containing an <video>?
I currently have this code to pause the slide when it reaches #5 for this example:
$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
if (currentSlide == 5) {
$('.sliderMain').slick('slickPause');
theVideo.play();
And this code to resume the slide once the video finishes playing:
document.getElementById('theVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$('.sliderMain').slick('slickPlay');
}
}
});
What I would like to do is include more videos in my slider and have the slider pause at each one to play the video instead of only on a specific slide like it is doing here:
if (currentSlide == 5) {
Slide 6 has a video but is not included in the above code for example. I would rather have the code detect if the slide has a video class for example.
This is a continuation of this question.

instead of
if (currentSlide == 5)
you can add an incremented class on each of your slides, and check what is inside in this if.
the html will looks like this:
<div class="slide1"><img src="http://placehold.it/900x500"></div>
<div class="slide2"><img src="http://placehold.it/900x500"></div>
<div class="slide3"><img src="http://placehold.it/900x500"></div>
<div class="slide4"><img src="http://placehold.it/900x500"></div>
<div class="slide5"><img src="http://placehold.it/900x500"></div>
<div class="slide6" id="slide-video">
<video width="900px" height="500px" class="theVideo">
<source src="http://vjs.zencdn.net/v/oceans.mp4" />
</video>
for example you ll do :
$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
if ($('.slide'+currentSlide+ ' video').length != 0){
$('.sliderMain').slick('slickPause');
theVideo.play();
}
});
You ll probably then know if you have a node video in your current slide.
hope this will help

Related

Pausing another song when starting another javascript

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);
});

Carousel Slider with YouTube videos

Is it possible to use JQuery to build a youtube video slider? I'd like to display a few ones I uploaded.
Found some answers but made with specific frameworks, if it's possible I'd like to stick with something simple.
I found this code very helpful but I can't seem to make it work.
JSFiddle
$('.play-button').on('click', function () {
$(this).hide();
$(this).parent().fadeOut();
$(this).parent().siblings('.slider-video')[0].play();
});
$('.slider-video').on('play', function () {
$(this).attr('controls', '1');
});
// Additionnal code for the slider
var pos = 0,
slides = $('.slide'),
numOfSlides = slides.length;
function nextSlide(){
stopCurrentVideo();
slides.eq(pos).animate({left:'-100%'},500);
pos = pos >= numOfSlides-1 ? 0 : ++pos;
slides.eq(pos).css({left:'100%'}).animate({left:0},500);
}
function previousSlide(){
stopCurrentVideo();
slides.eq(pos).animate({left:'100%'},500);
pos = pos == 0 ? numOfSlides-1 : --pos;
slides.eq(pos).css({left:'-100%'}).animate({left:0},500);
}
function stopCurrentVideo(){
$('.slider-video:eq('+pos+')').load().removeAttr('controls')
.siblings('.overlay-content').show().find('.play-button').show();
}
$('.left').click(previousSlide);
$('.right').click(nextSlide);
You can achieve this with the YouTube iFrame API:
https://developers.google.com/youtube/iframe_api_reference
This API becomes available when you append enablejsapi=1 to the URLs of YouTube video embeds.
In order to access the controls for stopping videos, for each video you need to access an instance of YT.Player. For each iFrame, I created an instance of YT.Player, and attached it directly to the slide object as a parameter called video.
(Note that many developers say you shouldn't attach data directly to DOM objects, but I did so here because it allowed me to more closely match your original code.)
YT.Player can be accessed through a special function that must be called onYouTubeIframeAPIReady, which I could only get to work if it was outside of $(document).ready.
I can't put my solution on JSFiddle because the iFrames don't play nice, so here's my implementation on GitHub:
http://robertakarobin.github.io/jquery-video-slider
https://github.com/robertakarobin/jquery-video-slider
Here are the relevant bits:
HTML:
<div class="video-slider">
<!-- SLIDE 1 -->
<div class="slide">
<iframe class="video" src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<iframe class="video" src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
</div>
<!-- END OF SLIDES -->
<div class="slide-arrow left"></div>
<div class="slide-arrow right"></div>
</div>
JavaScript:
$(document).ready(function () {
var pos = 0,
slides = $('.slide'),
numOfSlides = slides.length;
function nextSlide() {
// `[]` returns a vanilla DOM object from a jQuery object/collection
slides[pos].video.stopVideo()
slides.eq(pos).animate({ left: '-100%' }, 500);
pos = (pos >= numOfSlides - 1 ? 0 : ++pos);
slides.eq(pos).css({ left: '100%' }).animate({ left: 0 }, 500);
}
function previousSlide() {
slides[pos].video.stopVideo()
slides.eq(pos).animate({ left: '100%' }, 500);
pos = (pos == 0 ? numOfSlides - 1 : --pos);
slides.eq(pos).css({ left: '-100%' }).animate({ left: 0 }, 500);
}
$('.left').click(previousSlide);
$('.right').click(nextSlide);
})
function onYouTubeIframeAPIReady() {
$('.slide').each(function (index, slide) {
// Get the `.video` element inside each `.slide`
var iframe = $(slide).find('.video')[0]
// Create a new YT.Player from the iFrame, and store it on the `.slide` DOM object
slide.video = new YT.Player(iframe)
})
}
The slider seems to be working fine. Just change the code from Video tag to YouTube Embed Code and you have a Youtube player Carousel.
<div class="video-slider">
<!-- SLIDE 1 -->
<div class="slide">
<div style="position:relative;height:0;padding-bottom:56.28%"><iframe src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<div style="position:relative;height:0;padding-bottom:56.28%"><iframe src="https://www.youtube.com/embed/EngW7tLk6R8?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!-- END OF SLIDES -->
<div class="slide-arrow left"></div>
<div class="slide-arrow right"></div>
</div>
You can get the YouTube Embed Code by right clicking on the video on youtube.com and select Copy Embed Code, and use that code in the slider.
Hope it helps.
I have made a fork of the author fiddle and made the changes. JSFiddle

Show play button after video ended

I have a probably small problem. Since i don't have controls on my html5 video (only play-pause button which is centered horizontally and vertically), it must be displayed again after the video was ended. I must to achieve that. But i don't know how, i've tried everything.
Here is my HTML:
<!-- Video placeholder -->
<div class="video-placeholder">
<!-- Video -->
<video class="video" controls poster="images/video-poster.png">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<!-- / Video -->
<!-- Play/Pause -->
<div class="play-pause"></div>
<!-- / Play/Pause -->
</div>
<!-- / Video placeholder -->
Here's the JavaScript (i've tried this so far, but it only "restart" video, but play-pause button is not showed):
// Video mechanism:
$( ".video" ).parent().click(function() {
if ( $(this).children( ".video" ).get(0).paused ) {
$(this).children( ".video" ).get(0).play();
$(this).children( ".play-pause" ).fadeOut();
} else {
$(this).children( ".video" ).get(0).pause();
$(this).children( ".play-pause" ).fadeIn();
}
});
// The end.
$( ".video" ).on( "ended", function() {
$(this).load();
});
// The end.
Every help is very appreciated!
Try this:
(function showPlayButton() {
if (document.getElementById('video-id').ended) {
document.getElementById('play-button-id').style.display = 'block';
}
setTimeout(showPlayButton, 1000);
})();

Stop slider when embedded movie plays.

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
}
}

Why does this if statement not work?

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');

Categories