Thanks for looking at my question. For a assignment I need to iterate through 5 video's in a JQuery accordion. We need to create our own buttons, which have their own functions. At the moment I have 5 div's with different videos, however, when I want to play for instance the second video, the first video will start playing. This will also be the case for the 3th, 4th and 5th video.
Question: How can I change my code, so each play button will be working for each different video? My guess is the JQuery Each function, but I have no clue.
<div id="video-wrap">
<div id="accordion">
<div class="acc-wrap"><img class="arrow" src="img/arrow.svg" alt="arrow">
<h3>Introduction</h3>
</div>
<div>
<div class="video-player" id="player-1">
<video id="my-video-1" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
<div class="acc-wrap"><img class="arrow" src="img/arrow.svg" alt="arrow">
<h3>Daniel Shiffman: Coding Challenge 1</h3>
</div>
<div>
<div class="video-player" id="player-2">
<video id="my-video-2" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="video/citral.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
<div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
<h3>Daniel Shiffman: Coding Challenge 2</h3>
</div>
<div>
<div class="video-player" id="player-3">
<video controls id="my-video-3" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
<div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
<h3>Daniel Shiffman: Coding Challenge 3</h3>
</div>
<div>
<div class="video-player" id="player-4">
<video controls id="my-video-4" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
<div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
<h3>Daniel Shiffman: Coding Challenge 4</h3>
</div>
<div>
<div class="video-player" id="player-5">
<video controls id="my-video-5" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
</div>
</div>
// Play/pause toggle //
$('.play-toggle').click(function () {
if ($('.acc-wrap').hasClass("ui-state-active")) {
if (player.paused()) {
player.play();
$('.play').css({
"visibility": "visible",
});
$('.pause').css({
"visibility": "hidden",
});
} else {
player.pause();
$('.play').css({
"visibility": "hidden",
});
$('.pause').css({
"visibility": "visible",
});
};
};
});
I would recommend looking into learning more about Scope and Classes / Object Prototypes.
The problem with you jQuery code right away is that there are multiple .play-toggle classes and you currently have no way of identifying the correct video in which this play button belongs to.
You can begin to scope if by passing the event param into your click handler to identify which item is actually being clicked on
$('.play-toggle').click(function (event) {
console.log(event)
})
From here you can identify parent container find the video and hook into the play pause functions. However I would recommend another approach.
Step 1: Create a VideoPlayer Class to house all VideoPlayer functionality
class VideoPlayer {
constructor(el) {
this._el = el
this._video = el.querySelector('video')
this._playToggle = el.querySelector('.play-toggle')
this.setupEventListeners()
}
setupEventListeners() {
this._playToggle.addEventListener('click',() => {
console.log(`play button clicked on element id ${this._el.id}`)
})
}
}
If you are not sure about classes please read up on them, here we are scoping the video player elements and saving them as variables and then initialising an event listener that listens for you click event. You would store all your video player functionality inside this class
Step 2: Iterate through the page and identify all potential video players
let videoPlayers = document.querySelectorAll('.video-player')
Here we know all video players are wrapped in the parent class video-player if you console.log(videoPlayers) you should see an array of elements
Step 3. Create an instance of the VideoPlayer class for each element
videos.forEach(v => new VideoPlayer(v))
This will create a new instance of the VidePlayer class for each item you have inside videoPlayers, now if you click a play button you should see a log in your console of play button clicked on element id (whatever id)
Once again inside your video player class I would house all the logic for your buttons, here you can hook into whatever HTML5 video events you want to customize your video player.
Please note that you will have to handle removing your event listeners on your own, this is not a complete answer but should give you enough information on how to solve your problem