Блог

Я пытаюсь разместить видео на своем веб-сайте с помощью настраиваемой кнопки. Я вставил элемент видео в элемент div с идентификатором = MyVideo. Кроме того, я создал элемент изображения с идентификатором = btnVideo. Моя идея состоит в том, чтобы заставить это изображение приостановить/воспроизвести видео.

Проблема в том, что по умолчанию в видео есть кнопка воспроизведения. Когда я осматриваю элемент, я вижу, что эта кнопка является элементом SVG.

Я попытался использовать «MyVideo.parentElement.lastChild.style.непрозрачность = 0;», чтобы элемент исчез (MyVideo.parentElement.lastChild захватывает этот элемент SVG).

Это работает при загрузке страницы, но после того, как я приостановлю видео, оно вернется к непрозрачности=1, даже если я снова вызову эту строку кода.

Как я мог сделать так, чтобы этот элемент оставался скрытым? Установка непрозрачности на 0-лучший подход?

Мой код Javascript таков

 var myVideo = document.getElementById("myVideo").firstChild; 
var btnVid = document.getElementById("btnVideo");


myVideo.parentElement.lastChild.style.opacity = 0


btnVid.addEventListener('click', function playPause(e) {

  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause();
    console.log(myVideo.parentElement.lastChild.style.opacity)

  myVideo.parentElement.lastChild.style.opacity = 0;
  e.preventDefault();
});
 

Большое вам спасибо за потраченное время!