Скрытие кнопки Play, если видео включено

Question

Есть 3 видео. Как скрыть кнопку play, когда видео воспроизведено и вернуть обратно когда остановлено?

// Контейнер со всеми видео
const videosWrap = document.querySelector('.programs-page__body');

// Обработчик клика
const videoEventHandler = (e) => {
  // Если у e.target нет класа video-item-programs__item, значит данный элемент не является видео
  if (!e.target.classList.contains('video-item-programs__item')) return false;
  const video = e.target,
    allVideos = document.querySelectorAll('.video-item-programs__item');
  const overlay = document.querySelectorAll('.video-item-programs__play');

  // Останавливаем все видео
  allVideos.forEach((source) => {
    if (source === video) return;
    source.classList.remove('isPlaying');
    source.pause()
  })
  // Если у видео есть класс isPlaying - тогда остановить его, если нет - запустить
  if (video.classList.contains('isPlaying')) {
    video.pause()
  } else {
    video.play()
  }
  video.classList.toggle('isPlaying')
}

// Event listener на контейнер со всеми видео
videosWrap.addEventListener('click', (e) => videoEventHandler(e))

.item-programs-page__video {
  position: relative;
  top: 0;
  left: 0;
  width: 270px;
  height: 144px;
  object-fit: cover;
  margin: 0px 0px 32px 0px;
}

.video-item-programs__play {
  position: absolute;
  z-index: 2;
  top: 53px;
  left: 116px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  background: #b20932;
  border-radius: 60px;
  pointer-events: none;
}

.video-item-programs__item {
  position: absolute;
  top: 0;
  right: 0;
  object-fit: cover;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background: #f3e1e9;
  border-radius: 8px;
}

<div class="programs-page__body">
  <div class="item-programs-page__video video-item-programs">
    <div class="video-item-programs__play"></div>
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
  </div>
  <div class="item-programs-page__video video-item-programs">
    <div class="video-item-programs__play"></div>
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
  </div>
  <div class="item-programs-page__video video-item-programs">
    <div class="video-item-programs__play"></div>
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
  </div>
</div>

https://jsfiddle.net/L4vxjfg7/14/

Answer 1

Класс isPlaying нужно задавать родительскому блоку - так можно влиять на все вложенные в него элементы:

// Контейнер со всеми видео
const videosWrap = document.querySelector(".programs-page__body");

// Обработчик клика
const videoEventHandler = (e) => {
  // Если у e.target нет класа video-item-programs__item, значит данный элемент не является видео
  if (!e.target.classList.contains("video-item-programs__item")) return false;
  const video = e.target;
  const overlay = document.querySelectorAll(".video-item-programs__play"),
    allVideos = document.querySelectorAll(".video-item-programs__item");

  // Останавливаем все видео
  allVideos.forEach((source) => {
    if (source === video) return;
    source.closest('.video-item-programs').classList.remove("isPlaying");
    source.pause();
  });
  // Если у видео есть класс isPlaying - тогда остановить его, если нет - запустить
  if (video.closest('.video-item-programs').classList.contains("isPlaying")) {
    video.pause();
  } else {
    video.play();
  }
  video.closest('.video-item-programs').classList.toggle("isPlaying");
};

// Event listener на контейнер со всеми видео
videosWrap.addEventListener("click", videoEventHandler);

.item-programs-page__video {
  position: relative;
  top: 0;
  left: 0;
  margin: 0px 0px 32px 0px;
  height: 144px;
  width: 270px;
  object-fit: cover;
}

.video-item-programs__play {
  position: absolute;
  top: 53px;
  left: 116px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  width: 38px;
  border-radius: 60px;
  background-color: #b20932;
  pointer-events: none;
}
.isPlaying .video-item-programs__play {
  display: none;
}

.video-item-programs__item {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  background-color: #f3e1e9;
  cursor: pointer;
}

<div class="programs-page__body">
  <div class="item-programs-page__video video-item-programs">
    <div class="video-item-programs__play"></div>
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
  </div>
  <div class="item-programs-page__video video-item-programs">
    <div class="video-item-programs__play"></div>
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
  </div>
  <div class="item-programs-page__video video-item-programs">
    <div class="video-item-programs__play"></div>
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
  </div>
</div>

Если немного изменить разметку, то часть логики можно переложить на CSS:

// Контейнер со всеми видео
const videosWrap = document.querySelector(".programs-page__body");

// Обработчик клика
const videoEventHandler = (e) => {
  // Если у e.target нет класа video-item-programs__item, значит данный элемент не является видео
  if (!e.target.classList.contains("video-item-programs__item")) return false;
  const video = e.target;
  const overlay = document.querySelectorAll(".video-item-programs__play"),
    allVideos = document.querySelectorAll(".video-item-programs__item");

  // Останавливаем все видео
  allVideos.forEach((source) => {
    if (source === video) return;
    source.closest('.video-item-programs').classList.remove("isPlaying");
    source.pause();
  });
  // Если у видео есть класс isPlaying - тогда остановить его, если нет - запустить
  if (video.closest('.video-item-programs').classList.contains("isPlaying")) {
    video.pause();
  } else {
    video.play();
  }
  video.closest('.video-item-programs').classList.toggle("isPlaying");
};

// Слушатель клика по видео
videosWrap.addEventListener("click", videoEventHandler);
// Слушатель окончания видео
videosWrap.addEventListener("ended", videoEventHandler, true);

.item-programs-page__video {
  position: relative;
  top: 0; left: 0;
  margin: 0px 0px 32px 0px;
  height: 144px; width: 270px;
  object-fit: cover;
}

.video-item-programs__play {
  position: absolute;
  top: 53px; left: 116px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px; width: 38px;
  border-radius: 60px;
  background-color: #b20932;
  pointer-events: none;
}
.isPlaying:not(:hover) .video-item-programs__play {
  display: none;
}
.video-item-programs__play::before {
  content: "";
  position: absolute;
  height: 20px; width: 20px;
  box-sizing: border-box;
  transition: 0.2s linear;
}
.video-item-programs__item + .video-item-programs__play::before {
  margin-left: 4px;
  border: 10px solid transparent;
  border-left: 20px solid #fff;
  border-right: 0px solid #fff;
}
.isPlaying:hover .video-item-programs__item + .video-item-programs__play::before {
  margin-left: 0px;
  border: 0px solid transparent;
  border-left: 7px solid #fff;
  border-right: 7px solid #fff;
}

.video-item-programs__item {
  position: absolute;
  top: 0; right: 0;
  height: 100%; width: 100%;
  border-radius: 8px;
  object-fit: cover;
  background-color: #f3e1e9;
  cursor: pointer;
}

<div class="programs-page__body">
  <div class="item-programs-page__video video-item-programs">
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
    <div class="video-item-programs__play"></div>
  </div>
  <div class="item-programs-page__video video-item-programs">
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
    <div class="video-item-programs__play"></div>
  </div>
  <div class="item-programs-page__video video-item-programs">
    <video class="video-item-programs__item" poster="">
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type='video/mp4'>
    </video>
    <div class="video-item-programs__play"></div>
  </div>
</div>

Так как видео не зациклено, то стоит добавить обработчик окончания воспроизведения ended (это событие не всплывает, поэтому ловим его на погружении, добавив в слушатель третий параметр - true). При этом не нужно дополнительных функций - достаточно той, которая обрабатывает клик по видео.

БЛОГ НА HUSL

Скрытие кнопки Play, если видео включено

Ответы (1 шт):