暂停按钮不适用于背景视频

Question

我正在尝试创建一个漂亮的背景视频，顶部有一些文本以及一个我可以用来暂停和取消暂停视频的按钮，视频工作正常并循环播放，但我无法暂停视频。

<html>

<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>

<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="dudleyByDrone.mp4" type="video/mp4">
</video>
<div id="polina">
    <h1>dudley</h1>
    <p>Directed by joe bloggs
        <p><a href="">original article</a>
          <p>blah blah</p>
            <button>Pause</button>
</div>
</body>

</html>

js（我从 here 得到这段代码，虽然它说“// 只有在删除 "loop" 时才起作用”，但我已经尝试删除 "loop" 但它仍然没有暂停：

var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");

function vidFade() {
    vid.classList.add("stopfade"); 
}

vid.addEventListener('ended', function()
{
// only functional if "loop" is removed 
   vid.pause();
// to capture IE10
   vidFade();
}); 
pauseButton.addEventListener("click", function() {
   vid.classList.toggle("stopfade");
 if (vid.paused) {
   vid.play();
   pauseButton.innerHTML = "Pause";
} else {
   vid.pause();
   pauseButton.innerHTML = "Paused";
  }
})

Answer 1

以下代码应该允许您暂停视频

$(function() {
    $('#polina button').on("click", function() {
        $('video')[0].pause();
    });
});

编辑：将 pause(); 更改为 play(); 将完全按照您的想法进行。

Answer 2

您需要更具体地引用按钮。

 var playPause = document.querySelector("#playPause");

整个源代码都有变化 playButton 更改为 playPause 这不是问题，只是偏好。间接选择器可能会或可能不会很好地与 document.querySelector() 一起工作，因为它倾向于更容易地接受简单的选择器（根据经验，不确定是否有记录。）

片段

var vid = document.getElementById("bgvid");
var playPause = document.querySelector("#playPause");

function vidFade() {
  vid.classList.add("stopfade");
}

vid.addEventListener('ended', function() {
  // only functional if "loop" is removed 
  vid.pause();
  // to capture IE10
  vidFade();
});
playPause.addEventListener("click", function() {

  if (vid.paused) {
    vid.play();
    playPause.innerHTML = "Pause";
  } else {
    vid.pause();
    playPause.innerHTML = "Paused";
  }
})

<html>

<head>
  <script src="js/script.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="css/custom.css">
</head>

<body>
  <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  </video>
  <div id="polina">
    <h1>dudley</h1>
    <p>Directed by joe bloggs
      <p><a href="">original article</a>
        <p>blah blah</p>
        <button id="playPause">Play/Pause</button>
  </div>
</body>

</html>

暂停按钮不适用于背景视频

Pause button not working on background video

javascript

html5-video

片段