I am trying to create two sets of play / pause controls for a video using jquery and css. The first set is located on the first screen of a large size, and the second set is in a fixed place in the viewport when the user scrolls down, which means that the user can listen to audio and control the controls when viewing the website without having to scroll up. When users press the pause button, the video pauses and disappears, the pause button disappears, and the play button becomes fully opaque, and vice versa, occurs when the user presses the play button. This works for me for the first set in jsfiddle and the code below, however, I have been trying for the last few hours to find a way to make these changes happen with both sets of controls,therefore, both sets remain in sync (that is: when one pause button disappears, the second in the second set also) and could not make significant progress.
Here is the jsfiddle (edited, missing some css) of the first working set and jquery:
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function() {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
var vid = document.getElementById("myVideo"),
pauseButton = document.getElementById("vidpause"),
playButton = document.getElementById("vidplay");
var vid = document.getElementById("myVideo");
function vidFade() {
vid.classList.add("stopfade");
}
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
vidpause.classList.add("full-button");
vidpause.classList.remove("fade-button");
vidplay.classList.add("fade-button");
vidplay.classList.remove("full-button");
} else {
vid.pause();
vidpause.classList.add("fade-button");
vidpause.classList.remove("full-button")
vidplay.classList.add("full-button");
vidplay.classList.remove("fade-button")
}
})
playButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.playing) {
vid.pause();
vidplay.classList.add("full-button");
vidplay.classList.remove("fade-button");
vidpause.classList.add("fade-button");
vidpause.classList.remove("full-button");
} else {
vid.play();
vidplay.classList.add("fade-button");
vidplay.classList.remove("full-button")
vidpause.classList.add("full-button");
vidpause.classList.remove("fade-button")
}
})
I know that getElementById will work with only one element, so that the second set works with the first, I tried to use getElementByClassName (not shown) or querySelectorAll (below).
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function() {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
var vid = document.getElementById("myVideo");
function vidFade() {
vid.classList.add("stopfade");
}
var pauseButton = document.querySelectorAll(".vidpause");
var i;
for (i = 0; i < pauseButton.length; i++) {
pauseButton[i].addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
vidpause.classList.toggleClass("full-button");
vidpause.classList.remove("fade-button");
vidplay.classList.add("fade-button");
vidplay.classList.remove("full-button");
}
else {
vid.pause();
vidpause.classList.add("fade-button");
vidpause.classList.remove("full-button")
vidplay.classList.add("full-button");
vidplay.classList.remove("fade-button")
}
})
}
var playButton = document.querySelectorAll(".vidplay");
var i;
for (i = 0; i < pauseButton.length; i++) {
playButton[i].addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.playing) {
vid.pause();
vidplay.classList.add("full-button");
vidplay.classList.remove("fade-button");
vidpause.classList.add("fade-button");
vidpause.classList.remove("full-button");
} else {
vid.play();
vidplay.classList.add("fade-button");
vidplay.classList.remove("full-button")
vidpause.classList.add("full-button");
vidpause.classList.remove("fade-button")
}
})
}
When I try to use the above and its variants, the chrome console gives me the error "vidpause is undefined". I thought maybe there is a problem with the order in which I call my elements, or try to loop an array (?) Or try to change classes when calling classes, but ... I'm at a dead end.
Any advice on this would be very helpful, I'm pretty new to jquery.