Как убрать у видео «Controls» до старта самого видео?

Question

[bazliiii]

Добрый вечер , может кто-то знает как убрать контроллер у видео до того момента , когда видео начнет проигрывать.
Например сейчас у меня это выглядит так:
html разметка видео

<div class="video__poster">
            <video id="video" class="video" poster="images/poster.jpg" src="video/video.mp4" width="1263" height="714" controls></video>
            <a href="#video" id="play__img" class="video__img"></a>
          </div>

js для кнопки запуска видео:

const videoPlayer = document.querySelector('.video__poster')
const video = videoPlayer.querySelector('.video')
const playButton = videoPlayer.querySelector('.video__img')

playButton.addEventListener('click', (e) => {
    if(video.paused){
      video.play()
      e.target.textContent = ''
      document.getElementById('play__img').classList.add('play__img-off');
    } else {
      video.pause()
      e.target.textContent = ''
    }
  })

css:

.video__poster{
    position: relative;
    float: right;
}
.video{
    float: right;
    max-width: 1263px;
    max-height: 714px;
}
.video__img{
    background: url('../images/play.png') no-repeat center center;
    display: flex;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.play__img-off{
    display: none;
}

У меня есть кнопка в виде ссылки и при нажатие на неё видео запускается ,а сама кнопка исчезает. Я хотел бы сделать , что бы в этот момент появлялся contorls , но если его прописать в html , тогда он появляется сразу и даже по верх постера. Надеюсь найдутся опытные спецы , которые помогут

Answer 1

[bazliiii]

Нашел решение:
В js нужно добавить video.setAttribute("controls", "controls");

в общем выглядит так:

const videoPlayer = document.querySelector('.video__poster')
const video = videoPlayer.querySelector('.video')
const playButton = videoPlayer.querySelector('.video__img')

playButton.addEventListener('click', (e) => {
    if(video.paused){
      video.play()
      e.target.textContent = ''
      document.getElementById('play__img').classList.add('play__img-off');
      video.setAttribute("controls", "controls");
    } else {
      video.pause()
      e.target.textContent = ''
    }
  })

Comments

[Сергей delphinpro]

и в чём же ваше решение заключается?

[bazliiii]

Сергей delphinpro,
video.play()
e.target.textContent = ''
document.getElementById('play__img').classList.add('play__img-off');
video.setAttribute("controls", "controls");
Когда запускаем видео у нас пропадает svg кнопка + добавляется атрибут controls