Question

这是我的代码到目前为止，我想在视频暂停时显示div，并在视频恢复时隐藏它。

var video = document.getElementById('video');
video.addEventListener('click', function() {
  video.play();
},false);

<video width="1000" height="480" autoplay onclick="this.paused?this.play():this.pause();">
  <source src="../../video/operation.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Answer 1

首先，您错过了id="video"代码上的<video>属性。

<video width="1000" height="480" autoplay
       onclick="this.paused?this.play():this.pause();" id="video">
//-----------------------------------------------------^^^^^^^^^^

其次，您可以使用Media Event pause与视频绑定并显示div。

video.addEventListener('pause', function() {
  div.style.display = 'block';
}, false);

Answer 2

您可以使用视频暂停/恢复时发送的媒体事件。 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

video.addEventListener('pause', function() {
    // show div
});
video.addEventListener('play', function() {
    // hide div
});

Answer 3

＆＃13;

var video = document.getElementById('video_elm');
video.addEventListener('click', function() {
    this.paused?this.play():this.pause();
  },
  false);

video.addEventListener("pause", function() {
      document.getElementById("paused").style.display = "";
  });
video.addEventListener("play", function() {
      document.getElementById("paused").style.display = "none";
  });

＆＃13;

<video id="video_elm" width="200" autoplay>
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
<div id="paused" style="display: none">The video is paused, click it again to resume</div>

＆＃13;

视频暂停时显示div

3 个答案: