javascript - 单击按钮本身不会播放视频

Question

我正在为这个问题寻找一个纯 CSS 解决方案，因为我记得我过去曾这样做过，但我不记得我到底做了什么。

问题很明显，如果您单击按钮本身，它不会触发脚本(视频不会播放)。但是如果你点击它周围的任何其他地方，那将起作用并且视频将播放。有什么想法吗？

代码:

var videoWrappers = document.getElementsByClassName('video-wrapper'),
  i,
  ln = videoWrappers ? videoWrappers.length : 0,
  video,
  videoPlayButton,
  videoMethods = {
    renderVideoPlayButton: function() {
      for (i = 0; i < ln; i++) {
        this.formatVideoPlayButton(videoWrappers[i]);
        video = videoWrappers[i].querySelector('video');
        if (video && videoWrappers[i]) {
          video.classList.add('has-media-controls-hidden');
          videoPlayButton = videoWrappers[i].getElementsByClassName('video-overlay-play-button')[0];
          videoPlayButton.addEventListener('click', this.hideVideoPlayButton);
        }
      }
    },

    formatVideoPlayButton: function(videoWrapper) {
      videoWrapper.insertAdjacentHTML('beforeend', '\
                  <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
                  <polygon points="70, 55 70, 145 145, 100" fill="#f00f00"/>\
                  </svg>\
                ');
    },

    hideVideoPlayButton: function(e) {
      console.log(e.target);
      video = e.target.parentNode.querySelector('video');
      video.play();
      e.target.style.display = 'none';
      video.classList.remove('has-media-controls-hidden');
      video.setAttribute('controls', 'controls');
    }
  }

videoMethods.renderVideoPlayButton();

.video-wrapper {
  position: relative;
  max-width: 500px;
  margin-bottom: 10px;
}

.video-wrapper>video {
  width: 100%;
  vertical-align: middle;
}

.video-wrapper>video.has-media-controls-hidden::-webkit-media-controls {
  display: none;
}

.video-overlay-play-button {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px calc(50% - 50px);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0.95;
  cursor: pointer;
  background-image: linear-gradient(transparent, #000);
  transition: opacity 150ms;
}

.video-overlay-play-button:first-child {
  pointer-events: none;
}

.video-overlay-play-button:hover {
  opacity: 1;
}

.video-overlay-play-button.is-hidden {
  display: none;
}

<div class="main">
  <div class="video-wrapper">
    <video src="//clips.vorwaerts-gmbh.de/VfE_html5.mp4" poster="//s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png"></video>
  </div>
</div>

Answer 1

你可以使用

.video-overlay-play-button > polygon {
  pointer-events: none;
}

Example