简体   繁体   中英

How to use a play/pause button for multiple html5 videos in javascript?

I'm currently working on a website that has a series of twelve HTML5 videos that starts playing automatically in a separate modal box for each video. Now I want to give the user the control to play and pause the video as well (along with other features but that's not relevant to my current problem).

I've gotten so far that the user are able to click the video itself in order to play and pause it. But the play/pause button i've added does not work right now and the code below will give me a "lastClicked.pause is not a function" error.

I know that the reason is because the lastClicked variable i'm using as a condition inside the if statement will contain a button when I click "play/pause" and a button does not have those functions. I've figured out that much so far, but I'm a bit lost of what my next step should be.

Should I make a reference to the specific video inside the toggleVideo function and replace it with the lastClicked variable or does a more simple solution exist?

EDIT: Added a bit of the HTML for reference

Javascript:

// VIDEO CONTROLS
const portfolio = document.querySelector(".portfolio");
const player = portfolio.querySelectorAll(".viewer");
const toggle = portfolio.querySelectorAll(".toggle");

let lastClicked

function toggleVideo () {

    lastClicked = this;

    if(lastClicked.paused) {
        lastClicked.play();    
    }

    else {
        lastClicked.pause();
    }

  }

// Two different ways to play/pause the video - Clicking the video 
// itself and clicking the play/pause button

player.forEach(video => video.addEventListener ("click", toggleVideo ));
toggle.forEach(button => button.addEventListener ("click", toggleVideo ));

HTML:

<section class="portfolio" id="portfolio">


      <div class="video-wrapper">
          <div class="video-thumbnail"><img src="./media/img/thumbnails/1.hammerfall.jpg"></div>
          <button class="video-overlay" id="player" data-modal="videoOne"></button>
      </div
      ><div class="modal-box">
        <div class="modal-content">
          <span class="close-btn">&times;</span>
          <div class="player">
            <video class="player__video viewer" src="./media/video/1.waves.mp4"></video>

            <div class="video-controller">
              <div class="progress-bar">
                <div class="progress-filled"></div>
              </div>
                <button class="video-play toggle">►</button>
                <input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
                <button class="video-volume mute">X</button>
            </div>
          </div>
        </div>
      </div

      ><div class="video-wrapper">
          <div class="video-thumbnail"><img src="./media/img/thumbnails/2.lordi.jpg"></div>
          <button class="video-overlay" data-modal="videoTwo"></button>
      </div
      ><div class="modal-box">
        <div class="modal-content">
          <span class="close-btn">&times;</span>
            <div class="player">
          <video class="player__video viewer" src="./media/video/2.words.mp4"></video>

            <div class="video-controller">
              <div class="progress-bar">
                <div class="progress-filled"></div>
              </div>
                <button class="video-play toggle">►</button>
                <input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
                <button class="video-volume mute">X</button>
            </div>
          </div>
        </div>
      </div
      >
</section>

Essentially you need to associate your buttons with your videos.

Currently toggleVideo() assumes that it's running in the context of a video element, whereas it could be a video or a button associated with a video.

You don't know show your HTML structure, but for this answer I'll use the following video-button relationship.

<div>
    <video />
    <button>Toggle</button>
</div>

...ergo in my contrived example, the button is the next sibling of the video. It doesn't matter what the precise relationship is between video and button , merely that we establish and cater for it inside toggleVideo() .

So, that now becomes:

function toggleVideo () {

    //establish video - might be @this, or might be prev sibling of @this
    let vid = this.tagName == 'VIDEO' ? this : this.previousSibling;

    lastClicked = vid;
    vid.paused ? vid.play() : vid.pause();

}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM