Question

我一直在尝试使自己的切换暂停/播放按钮最长，但无济于事。有人请帮帮我。我不知道我在做什么错。这是下面的代码：

  const wrapper = document.querySelector('.wrapper');
  const video = wrapper.querySelector('.dvid');
  const togglePause = wrapper.querySelector('.toggle-pause');
  const toggleSound = wrapper.querySelector('.toggle-sound');


function togglePlay() {
    const isPlaying = video.paused ? play : pause;
    video[isPlaying]();
}


function toggleBtn() {

  if (this.paused) {
      togglePause.innerHTML= '<img src="play.png">';
  }
  else {
      togglePause.innerHTML= '<img src="pause.png">';
  }
}

function toggleS() {

}

video.addEventListener('click', togglePlay);
video.addEventListener('pause', toggleBtn);
video.addEventListener('play', toggleBtn);

  <div class="wrapper">

      <video class="dvid" autoplay loop muted>
          <source src="2am freestyle.mp4" type="video/mp4"/>
          <p>This browser does not support this video</p>
      </video>


  <footer class="indexfooter">
    <div class="video-controls">
        <button class="toggle-pause">
          <img src="pause.png"> 
        </button>
        <button class="toggle-sound">
          <img onClick src="mute.png"> 
        </button>

    </div>

任何建议将不胜感激。预先感谢。

Answer 1

此函数中有问题，您将值添加为变量而不是字符串。如果您打开devtools，则会出现错误，提示Uncaught ReferenceError: pause is not defined

function togglePlay() {
    const isPlaying = video.paused ? 'play' : 'pause';
    video[isPlaying]();
}

工作示例

const wrapper = document.querySelector('.wrapper');
const video = wrapper.querySelector('.dvid');
const togglePause = wrapper.querySelector('.toggle-pause');
const toggleSound = wrapper.querySelector('.toggle-sound');


function togglePlay() {
  const isPlaying = video.paused ? 'play' : 'pause';
  video[isPlaying]();
}


function toggleBtn() {
  if (this.paused) {
    togglePause.innerHTML = '&#9616;&nbsp;&#9612;';
  } else {
    togglePause.innerHTML = '&#9658;';
  }
}

video.addEventListener('click', togglePlay);
video.addEventListener('pause', toggleBtn);
video.addEventListener('play', toggleBtn);

togglePause.addEventListener('click', togglePlay);

<div class="wrapper">
  <video class="dvid" autoplay loop muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    <p>This browser does not support this video</p>
  </video>


  <footer class="indexfooter">
    <div class="video-controls">
      <button class="toggle-pause">&#9658;</button>
      <button class="toggle-sound">Toggle Sound</button>
    </div>
  </footer>
</div>

已更新

点击按钮时调用相同的功能

togglePause.addEventListener('click', togglePlay);

如何使自己的切换暂停/播放按钮与视频一起使用？

1 个答案: