Нажатие на кнопку не воспроизводит видео

1

Я ищу чистое решение 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>
Теги:
html5-video

1 ответ

1
Лучший ответ

Ты можешь использовать

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

пример

  • 0
    Я верю, что это то, что я ищу.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню