视频和图像轮播

Question

这里是编码菜鸟:)我有带有图像和视频的光滑滑块图像轮播。 由于某种原因，视频仅在设置为自动播放时才会播放。我无法控制使其播放？ 这是我到目前为止的代码：

     <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>
     <!--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="assets/images/rain.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>   

      
        </div>  
    </div>
  </div>

<script>
// 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";
  }
}
</script>

/css/

.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;
}

如果视频可以自动播放但不能在控件上播放，那么视频可以正常播放吗？感觉播放/暂停需要更具主导性，但向控件添加 z-index 没有任何作用？ 任何有关如何在光滑滑块中集成视频和图像的帮助或提示都会非常有用。

Answer 1

您似乎正在尝试使用 JavaScript 控制视频播放，但您的方法存在一些问题。首先，您尚未在 HTML 中定义 id 为“myBtn”的元素。其次，即使您这样做了，您也不会在任何地方调用 myFunction() 函数来控制视频播放。

这是代码的更正版本：

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>

在此更正版本中：

• 我已向您的视频元素添加了一个 id“videoElement”。
• 删除了按钮，因为没有必要。
• 为了清晰起见，将 myFunction() 重命名为togglePlayPause()。
• 当您想要控制视频播放时调用togglePlayPause()，您可能希望在单击按钮或其他用户交互时调用此函数。

确保在需要的地方调用togglePlayPause()，例如，如果您想在单击按钮时播放或暂停视频，则可以向按钮添加事件监听器。