jQuery in-viewport not detecting multiple videos - javascript

I am using the jQuery plugin isInViewport jQuery isInViewport to control the playing and pausing of two videos on a single page once they're scrolled in & out of view.
The only way I was able to get it to work was explicitly checking each video ID with two if-statements.
The following works:
$(window).scroll(function() {
if ( $("video#one").is( ':in-viewport')) {
$("video#one")[0].play();
} else {
$("video#one")[0].pause();
}
if ( $("video#two").is( ':in-viewport')) {
$("video#two")[0].play();
} else {
$("video#two")[0].pause();
}
});
However, that's inefficient. I may add more videos down the road. Doesn't make sense to have to adjust the JS each time I change videos.
This is what I am going for.. however, once video 1 is scrolled into view, it triggers the second video (which is off-screen) to begin playing as well.
$(window).scroll(function() {
$("video").each(function() {
if ( $("video").is( ':in-viewport')) {
$("video")[0].play();
} else {
$("video")[0].pause();
}
});
});
How can I adjust the each function to play & pause my videos on 1 page, regardless of how many there are?

The problem is most likely in your each function you are referring to ALL videos again and again. You should be able to solve this by using THIS instead.
$(window).scroll(function() {
$("video").each(function() {
if ( $(this).is( ':in-viewport')) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
});
});

Related

Multiple audio files in HTML, if two are clicked the older one should stop playing

I have images on my webpage that when clicked they play a sound.
The HTML looks like this:
<span div="2" class="sound" onclick="playSound(this,'sounds/activity_1/letter_m_a_1_correct_v2.mp3');">
<img src="../../images/rainforest/letter_m/activity_1/a1_monkey.png" width="324px" height="274px" alt="Monkey" onclick="showPanelGroup_2();" />
</span>
<span div="3" class="sound" onclick="playSound(this,'sounds/activity_1/letter_m_a_1_incorrect_b.mp3');">
<img src="../../images/rainforest/letter_m/activity_1/a1_butterfly.png" width="324px" height="274px" alt="Butterfly" />
</span>
I am currently using the following Javascript code to pause and play one sound at a time when clicked:
function playSound(el,soundfile) {
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
}
If both of the images are clicked the sounds will overlap. I need for first sound to stop playing as soon as the second image is clicked and for the second sound to play.
You are creating a new MP3 player for each element when you pass this to the function in your onclick.
You either need to use a single element to hold the player, in which case you can overwrite what is playing on each click, or you need to have each click send the pause signal to all the other players on the page.
The benefit of keeping a separate player for each one (as you are doing now) is that each one retains its progress, so that it will resume when you click it again, so that's the example that I will stay with.
Here's an example of pausing all of the other players when you click on any one of them:
function pauseOthers(elements, me) {
Array.prototype.forEach.call(elements, function(el) {
if (el == me) { return; }
if (el.mp3) {
el.mp3.pause();
}
});
}
function playSound(el, soundfile) {
var allPlayers = document.getElementsByClassName('sound');
pauseOthers(allPlayers, el);
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
}

Check if a HTML5 video is playing using jquery

I've written a small jquery code to override HTML 5 play function. However, I am not able to check if a video is playing or not.
Here is my jquery code
$("video").click(function() {
var video = $("#myvideo").get(0);
video.play();
$(".play").css("display", "none");
return false;
});
$("#myvideo").bind("pause ended", function() {
$(".play").css("display", "block");
});
Just give me simple tips to show a div with class="pause"(I have CSS for it) when the video is paused and pause the video as well.
You'd use the paused property to check if the video is paused.
If it's not paused, it's playing
$("video").click(function() {
var video = $("#myvideo").get(0);
if ( video.paused ) {
video.play();
$(".play").hide();
$(".pause").show();
} else {
video.pause();
$(".play").show();
$(".pause").hide();
}
return false;
});
As Jquery is the framework of Javascript
you can use the following code (involves Video JS Frame work):
var my_video_id = videojs('video_id');
if (my_video_id.player_.paused()) {
my_video_id.player_.play();
} else {
my_video_id.player_.pause();
}

How to get 2 images to match and stay revealed using jQuery

I'm making a memory game for my mini project and am trying to get 2 images to stay revealed if it's a match. However, the images aren't staying revealed although its a match. I'm trying to match the 2 images by their Id, but doesn't look like it's working. Please take a look at my code, any help would be greatly appreciated, thanks.
JS
$('.flip-container').click(function() {
$(this).find('.flipper').addClass('flip');
var $flip = $('.flip');
if ($flip.length === 2) {
setTimeout(flips, 800);
}
});
function flips() {
if (matching()) {
$('.flip').removeClass('flip').addClass('delete');
$('.delete').bind('.flip');
console.log('It\'s a match!');
} else {
$('.flip').removeClass('flip');
console.log('No matches');
}
}
function matching() {
if (flip.length === 2) {
if (flip[0].attr('id') === $(flip[1].attr('id')) {
$('.flip').addClass('matchFound');
$('.flip').removeClass('matchFound');
}
}
}
My GitHub link for this project

Jquery Code Sinppets to Solve

Can anybody tell me what are the possible solutions for these??
Question 1: A web page as a form with the id "my_form" and a few elements with the class "excluded" applied. How can you make a copy of the form and get rid of all elements with the excluded class, only from the new copy of the form?
Question 2: Examine this code snippet. What do you think it's supposed to do? Why doesn't it work? How would you fix it?
$("li").each(function () {
if ($(this).find("ul")) {
$(this).css("background-color", "gray");
} else {
$(this).css("background-color", "white");
}
});
Question 3: A user is complaining that audio is playing even after hitting the play/pause button. Given the below implementation, why would that happen? How would you fix it?
// Pause Button Implementation:
$("#togglePlayPause").on("click", function () {
if (audio.paused === true) {
audio.play();
} else {
audio.pause();
}
});
// when the current audio has played all the way through, read the next element.
audio.addEventListener("ended", function () {
if (audio.paused === false) {
var nextElement = _getNextElement();
// scroll the page so that the next element we're reading is at the top of the browser window.
$(window).animate(scrollTop: nextElement.offset().top, 400, function () {
_playElementAudio(nextElement);
});
}
});
Any help will be appreciated..
Question 1
$("#form").not(".excluded").clone().appendTo("#anotherForm");

end javascript function after 10 seconds

I found a javascript snow script. Here is the fiddle: http://jsfiddle.net/wj2K4/
(very nice)
Its only a gimmick and I don't want it dominating the page, so I want to turn it off after 10 or 30 seconds.
I reckon killing the script would be the easiest way, but I can't find a suitable command. (or similar question on stack)
setTimeout() & setInterval() is not what I am looking for.
Ideas?
This code is pointless but I cant post the question without it:
function doStart() {
if (!s.excludeMobile || !isMobile) {
if (s.freezeOnBlur) {
s.events.add(isIE?document:window,'mousemove',doDelayedStart);
} else {
doDelayedStart();
}
}
// event cleanup
s.events.remove(window, 'load', doStart);
}
Use s.stop(); to stop snow animations. See the code below, I used setTimeout to stop the animation
function doStart() {
if (!s.excludeMobile || !isMobile) {
if (s.freezeOnBlur) {
s.events.add(isIE?document:window,'mousemove',doDelayedStart);
} else {
doDelayedStart();
}
}
// event cleanup
s.events.remove(window, 'load', doStart);
setTimeout(function(){s.stop();},15000); //stop after 15 seconds
}
Demo: http://jsfiddle.net/muthkum/wj2K4/1/

Categories

Resources