Video and image carousel

Question

A coding noob here:)I have slick slider image carousel with both images and video. For some reason the video will only play when set to auto play. I cannot get the controls to make it play? This my code so far:

// Get the video
var video = document.getElementById("myVideo");

// Get the button
var btn = document.getElementById("myBtn");

// Pause and play the video, and change the button text
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}

.hero #myVideo{
    margin-top: 40px;
    position: absolute;
    z-index: 8000000;
}
.hero img, video{
    position: relative;
    background-size: cover;    
    background-position: center;
    margin: 0;
    height: 1600px;
    z
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 84%,
        100% 84%,
        50% 100%,
        0% 84%,
        0 84%
    );
}
.layer::after {
    content: "";
    background: rgba();
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
     clip-path: polygon(
        0 0,
        100% 0,
        100% 84%,
        100% 84%,
        50% 100%,
        0% 84%,
        0 84%
    );
}

.layer > * {
    z-index: 10;
}

<div class="hero" >
  <div class="fade">
    <!--image 1-->
        <div class="layer">
          <img src="https://fastly.picsum.photos/id/91/3504/2336.jpg?hmac=tK6z7RReLgUlCuf4flDKeg57o6CUAbgklgLsGL0UowU" style = "width:100%;height:800px;">
          <div class="hero-text">
            <h1 style="font-size:50px">I am John Doe</h1>
            <p>And I'm a Photographer</p>
            <button>Hire me</button>
          </div>
        </div>
       <!--image 2-->
        <div class="layer">
         <img src="https://fastly.picsum.photos/id/91/3504/2336.jpg?hmac=tK6z7RReLgUlCuf4flDKeg57o6CUAbgklgLsGL0UowU" style = "width:100%;height:800px;">
           <div class="hero-text">
            <h1 style="font-size:50px">I am John Doe</h1>
            <p>And I'm a Photographer</p>
            <button>Hire me</button>
           </div>
        </div>
     <!--image 3-->
        <div class="layer" id="myVideo">
          <video style = "width:100%;height:800px;" playsinline="playsinline"   width="1400" controls="true" height="400" muted="muted" loop="loop">
            <source src="https://media.geeksforgeeks.org/wp-content/uploads/20230623105019/Untitled.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video> 
        </div>  
    </div>
  </div>

The video will work if its on autoplay but not on controls? Have a feeling the play/pause needs to be more dominant but adding a z-index to the controls didn't do anything? Any help or tips on how to integrate videos and images in the slick slider would be so greatful.

Answer 1

It seems like you're trying to control the video playback with JavaScript, but there are a couple of issues with your approach. First, you haven't defined an element with the id "myBtn" in your HTML. Second, even if you did, you're not calling the myFunction() function anywhere to control the video playback.

Here's a corrected version of your code:

var video = document.getElementById("videoElement");

// Pause and play the video, and change the button text
function togglePlayPause() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}

<div class="hero">
  <div class="fade">
    <!-- Image 1 -->
    <div class="layer">
      <img src="assets/images/banner/banner.jpg" style="width:100%;height:800px;">
      <div class="hero-text">
        <h1 style="font-size:50px">I am John Doe</h1>
        <p>And I'm a Photographer</p>
        <button>Hire me</button>
      </div>
    </div>
    <!-- Image 2 -->
    <div class="layer">
      <img src="assets/images/banner/banner2.jpg" style="width:100%;height:800px;">
      <div class="hero-text">
        <h1 style="font-size:50px">I am John Doe</h1>
        <p>And I'm a Photographer</p>
        <button>Hire me</button>
      </div>
    </div>
    <!-- Video -->
    <div class="layer" id="myVideo">
      <video id="videoElement" style="width:100%;height:800px;" playsinline width="1400" controls muted loop>
        <source src="assets/images/rain.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</div>

In this corrected version:

• I've added an id "videoElement" to your video element.
• Removed the button since it wasn't necessary.
• Renamed the myFunction() to togglePlayPause() for clarity.
• Called togglePlayPause() when you want to control the video playback, you might want to call this function on a button click or some other user interaction.

Make sure to call togglePlayPause() where you need it, for example, if you want to play or pause the video on a button click, you can add an event listener to the button.

Answer 2

You can also use a button to start and pause the video with changing its innerHTML to pause or play. I also added video.onended to check when video is ended so to add play in button innerHTML. I also removed the loop attribute that you don't need. The use of play() or pause needs to be on the video tag element (not on its containing div as in your js code. You also need to add onclick='myFunction()' event listener to the button

var video = document.getElementById("theVideo");

// Get the button
var btn = document.getElementById("myBtn");
video.onended= function(){
    btn.innerHTML = "Play";
  }
// Pause and play the video, and change the button text
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  }else {
    video.pause();
    btn.innerHTML = "Play";
  }
}

.hero #myVideo{
  margin-top: 40px;
  position: absolute;
  z-index: 8000000;
}
.hero img, video{
  position: relative;
  background-size: cover;    
  background-position: center;
  margin: 0;
  height: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
      0 0,
      100% 0,
      100% 84%,
      100% 84%,
      50% 100%,
      0% 84%,
      0 84%
  );
}
.layer::after {
  content: "";
  background: rgba();
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
   clip-path: polygon(
      0 0,
      100% 0,
      100% 84%,
      100% 84%,
      50% 100%,
      0% 84%,
      0 84%
  );
}

.layer > * {
  z-index: 10;
}

<div class="hero" >
        <div class="fade">
          <!--image 1-->
              <div class="layer">
                <img src="https://fastly.picsum.photos/id/91/3504/2336.jpg?hmac=tK6z7RReLgUlCuf4flDKeg57o6CUAbgklgLsGL0UowU" style = "width:100%;height:800px;">
                 <div class="hero-text">
                <h1 style="font-size:50px">I am John Doe</h1>
                <p>And I'm a Photographer</p>
                <button>Hire me</button>
              </div>
              </div>
             <!--image 2-->
              <div class="layer">
                <img src="https://fastly.picsum.photos/id/91/3504/2336.jpg?hmac=tK6z7RReLgUlCuf4flDKeg57o6CUAbgklgLsGL0UowU" style = "width:100%;height:800px;">
                <div class="hero-text">
                <h1 style="font-size:50px">I am John Doe</h1>
                <p>And I'm a Photographer</p>
                <button>Hire me</button>
              </div>
              </div>
           <!--image 3-->
              <div class="layer myVideo">
            <video id="theVideo" style = "width:100%;height:800px;" playsinline="playsinline" width="1400" controls="true" height="400" muted="muted">
              <source src="https://media.geeksforgeeks.org/wp-content/uploads/20230623105019/Untitled.mp4" type="video/mp4">
              Your browser does not support the video tag.
            </video>   
            <button id="myBtn" onclick="myFunction()">Play</button>
            </div>
          </div>
        </div>