html5视频：播放/暂停自定义按钮问题

debugcn 发表于 Dev

new_frontenddev

我在网站上使用的是HTML5视频，并使用其他一些代码，这些代码从根本上使可用性变得更加客制化。

该视频旨在在观看时播放，在不观看时暂停。此外，当鼠标悬停在视频上时，它还具有播放和暂停按钮。

在视频末尾，它会变成图像，因为默认情况下html5视频会变成空白。

问题是图像最后出现了，但是播放/暂停仍会在悬停时出现，并充当播放暂停，但仅起到音频作用。您看不到视频。

我本来只想显示图片。但是，如果视频结束，则希望将播放暂停变成重新启动按钮。

我试图寻找适合我现有设置的东西，但是我不确定如何实现它，以及我将使用哪些代码。

这是该网站的链接http://minhasdistillery.com/blumersmoonshine/

  <section id="feature">


                            <div id="trail">
                                  <div id="videocontrol">
                                  <a id="play-pause" class="play"><img src="images/pause.png"/></a>
                                  </div>
                                <video id="video_background" preload="auto" volume="5"><!--or turn on loop="loop"-->
                                  <source src="videos/video.webm" type="video/webm">
                                  <source src="videos/video.mp4" type="video/mp4">
                                  <source src="videos/video.ogv" type="video/ogg ogv">
                                </video>


                                    <img id="image_background" src="images/blumer.jpg" width="100%" height="100%" />


                            </div><!--trail--> 



</section><!--feature-->

调出播放/暂停按钮的Javascript

 <script>
  window.onload = function() {

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

  var playButton = document.getElementById("play-pause");

  playButton.addEventListener("click", function() {
      if (video.paused == true) {
          video.play();

          playButton.innerHTML = "<img src='images/pause.png'/>";
      } else {
          video.pause();
          playButton.innerHTML = "<img src='images/play.png'/>";
      }
  });

  }

  </script>

该代码将视频设置为在可见时播放，否则暂停

  <script>
  //play when video is visible
  var videos = document.getElementsByTagName("video"), fraction = 0.8;

  function checkScroll() {

    for(var i = 0; i < videos.length; i++) {
      var video = videos[i];
      var x = 0,
          y = 0,
          w = video.offsetWidth,
          h = video.offsetHeight,
          r, //right
          b, //bottom
          visibleX, visibleY, visible,
          parent;

        parent = video;
        while (parent && parent !== document.body) {
          x += parent.offsetLeft;
          y += parent.offsetTop;
          parent = parent.offsetParent;
        }

        r = x + w;
        b = y + h;

        visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
        visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

        visible = visibleX * visibleY / (w * h);

        if (visible > fraction) {
            video.play();
        } else {
            video.pause();
        }
    }

  }

  window.addEventListener('scroll', checkScroll, false);
  window.addEventListener('resize', checkScroll, false);

  //check at least once so you don't have to wait for scrolling for the video to start
  window.addEventListener('load', checkScroll, false);
  checkScroll();

  </script>

最后添加这张照片。

  <script>
  var video = document.getElementById('video_background');
  var wrapper = document.getElementById('wrapper');
  var image = document.getElementById('image_background');
  video.addEventListener('ended', function() {
      video.style.display = 'none';
      image.style.display = 'inline';
  }, false);
  </script>

同一期的JSBin在此处

正如您在视频结尾看到的那样，它将继续显示暂停和播放，并且只会播放音频。如何读取视频已结束并将按钮切换为“重播”

伊戈尔·贾里亚佐夫（Igor Gilyazov）

最初的视频display样式为block，图像display样式为none。视频ended事件处理程序将video设置display为none，将image设置display为inline。您可以display在按钮click事件处理程序中检查视频样式并进行切换：

playButton.addEventListener(
  'click',
  function(event) {
    if (video.style.display === 'none') {
      image.style.display = 'none';
      video.style.display = 'block';
    }
    ...
  },
  false
);

作为替代方案，可以将boolean标志初始设置为false，ended将其在视频事件上设置为true：

var needReplay = false;

video.addEventListener(
  'ended',
  function() {
    ...
    needReplay = true;
  },
  false
);

playButton.addEventListener(
  'click',
  function(event) {
    if (needReplay) {
      image.style.display = 'none';
      video.style.display = 'block';
      needReplay = false;
    }
    ...
  },
  false
);

演示版

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。