Javascript Video Button - javascript

I'm a bit of a novice when it comes to Jquery.
I'm trying to pause/play a video by clicking the video itself and also by click a play/pause button.
Now, I've managed to get it working as desired when the user clicks the video.
But I can't get it to work using the button as well.
This what I've tried so far:
$("video").trigger("play");//for auto play
$('video, #pausebutton').click(function() {
if ($('video').hasClass('pause')) {
$("video").trigger("play");
$(this).removeClass('pause');
$("#artwork").removeClass('fadein')
$(this).addClass('play');
$("#pausing").html("▐▐");
} else {
$("video").trigger("pause");
$(this).removeClass('play');
$(this).addClass('pause');
$("#artwork").addClass('fadein');
$("#pausing").html("►");
}
});
The pause button does actually pause the video, but it doesn't resume play when clicked for a second time. It also ignores the other attributes such as add and removing classes etc. Just to clarify, all these things work when the video is clicked directly.
Any help would be appreciated.
Cheers

It's the use of this inside the event handler, when the button is clicked this is the button, not the video, and the classes are set on the button instead of the video
$("video").trigger("play"); //for auto play
$('video, #pausebutton').click(function () {
if ($('video').hasClass('pause')) {
$("video").trigger("play");
$('video').removeClass('pause');
$("#artwork").removeClass('fadein')
$('video').addClass('play');
$("#pausing").html("▐▐");
} else {
$("video").trigger("pause");
$('video').removeClass('play');
$('video').addClass('pause');
$("#artwork").addClass('fadein');
$("#pausing").html("►");
}
});
FIDDLE

Related

Videos should appear on same page after after going back to previous page

In the code I am working on, the video is not reappearing after it is removed, why is this, and is there a way for that to be fixed or adjusted in the code so that the videos will appear after going back to a previous page?
To reproduce, click on a button to enter a container, then the blue play button, then the exit button, then enter the same button again, the video has not reappeared.
code https://jsfiddle.net/wzaknd08/
function removePlayerHandler(evt) {
const el = evt.target;
let container = el.closest(".container");
let wrappers;
if (container) { //if multiple players
wrappers = container.querySelectorAll(".remove .wrap");
} else { //if single player
container = el.closest(".remove");
wrappers = container.querySelectorAll(".wrap");
}
wrappers.forEach(function (wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
In the demo code here click on the same play button multiple times.
You will see the video stays reappearing.
https://jsfiddle.net/g1ztucmp/
How would that be fixed in the code I am working on so that the videos appear again after going back to view the same videos after they are removed.
Like how it works in the demo code I provided.
You are adding a class to wrap called active when you press the play button.
function showCover(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
}
However, you never remove that class when closing the player(s). So when closing the player you need to remove the active class again. This is best done in the removePlayer function as you already iterate though al the classes that might have them.
function removePlayer(wrapper) {
wrapper.player.destroy();
wrapper.classList.remove("active");
delete wrapper.player;
console.log("removePlayer");
}
Change you Fiddle to make it work: https://jsfiddle.net/wqchdey1/. Only change was me adding wrapper.classList.remove("active"); to the removePlayer function

How do I pause playback on an embedded mp4 when clicking on a dynamically created button?

I am using the code from the QuickQuiz https://github.com/UrbanInstitute/quick-quiz and have modified the code to use an embedded video (mp4) instead of an img, which loads from a json file- and also to use the SweetAlert2 library instead of the first SweetAlert, which was originally implemented. I want to pause the playback of each video when any one of the four
quiz-btn btn
buttons are clicked. The buttons all trigger the SweetAlert2 dialog using swal.Fire.
I have tried including script on the page like this:
document.querySelector("#quiz > div > div.item.active > div.quiz-answers > div:nth-child(1)").addEventListener("click",function() {
document.querySelector("#quiz > div > div.item.active > div.ncc.text-center > video").pause();});
and I have also tried
$('.quiz-button btn').on('click', function() {
$('#video').attr('src', ''); });
directly in the code. The only thing I was successful with was getting the first video to stop playing when clicking the buttons- but none of the following videos would stop playing. Please help, thank you so much in advance.
This is actually a common issue, you will want to change your click function as follows:
change
$('.quiz-button btn').on('click', function() {
to
$(document).on('click','.quiz-button btn', function() {

Set a button fade out with js before loading a video

I'm still a noob in .js but trying to do my thing here ;)
I want the "pausebutton" to fade out when the video is paused. Till now its always visible, so I guess I have to tell this little guy to be faded out in the beginning so I can $(this).children(".pauseicon").fadeIn(); after that. I used jquery and some js for that.
Any Ideas?
$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playicon").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".pauseicon").fadeIn();
}
});
Fiddle
Working JSFiddle. I hide the pause button initially and then also faded out the pause button on every click.
$(".pauseicon").hide();
$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".pauseicon").fadeOut();
$(this).children(".video").get(0).play();
$(this).children(".playicon").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".pauseicon").fadeIn();
}
});

Toggle Play / Pause Buttons in HTML Audio Player

I am after a very basic music player, I have the following basics working now, however;
1) How to make both the Play and Pause buttons in one button? That appears first as Pause and on click It toggles Play and on click again it Toggle Pause?
2) Also Is there anyway to add a progress counter? not a bar, but numbers i.e. 0.3/4.0min
Here is the fiddle: www.jsfiddle.net/tjHhY
And here is the code as well here:
var audio = new Audio("http://dp0169.free.fr/Musique/Air/Air%20-%20Talkie%20Walkie/02%20Cherry%20Blossom%20Girl.mp3");
$(".play").click(function () {
audio.play();
})
$(".pause").click(function () {
audio.pause();
})
I'd recommend you to use JQueryUI. It have nice variety of widgets to create clean interface :)
Also check this demo it shows how to create toggle play & pause button.
Hope it helps.
Why don't you check this Demo. Hope it helps :)

Controlling toggling buttons with CSS and jQuery

As you can see in this jsfiddle, I'm trying to make a toggle switch (a mute button) that
displays the current setting, i.e. mute or unmute
when hovered upon, displays the alternative
However, my problem is when the user clicks the button, instead of displaying the opposite button, it shows that opposite buttons hover state. I hope this is making sense, haha. Basically the interaction is:
view button in unmute state
hover over and see the mute icon
click and see the unmute icon again, because it is the mute states hover image
when the icon is not hovered upon, it displays the proper icon, i.e. mute
In the jsfiddle example, I want a click to display the button, not the :hover attribute... any help? I'm aware that this kinda thing can't be handled by css alone.. (sorry if this seems confusing, ive been working in codespeak for a while today...)
Consider this alternative solution:
uses single button
manipulates .text() and .css() to change button attribute
custom toggler implemented because of special cases you require
Here is the code:
CSS:
button { width: 200px; height: 60px; color: white; font-size: 20px; background-color: red; }
HTML:
<button class=''> Mute </button>
JS:
function unmute() {
$('button').removeClass('muted');
$('button').text('Unmute');
$('button').css('background-color','blue');
}
function mute() {
$('button').addClass('muted');
$('button').text('Mute');
$('button').css('background-color','red');
}
function customToggler() {
if (disableToggle) return;
if ($('button').hasClass('muted')) unmute(); else mute();
}
var disableToggle = false;
$(document).ready(function() {
customToggler();
$('button').click(function() {
disableToggle = true;
customToggler();
});
$('button').mouseover(function() {
customToggler();
}).mouseout(function() {
customToggler();
disableToggle = false;
});
});
--
To see the above code in action, see http://jsfiddle.net/fwjz5/ Good luck!
​
You can handle hover states in javascript and remove CSS ones.
Well, I think this is the shortest solution right now:
http://jsfiddle.net/4mK9q/

Categories

Resources