Как я могу следить за видео всплеск страницы в HTML с помощью кнопки?

В качестве трюка я пытаюсь иметь короткое видео автоматическое воспроизведение, когда страница загружается, за которым должна следовать кнопка «Enter». Я понял в HTML, как получить видео для автоматического воспроизведения, но я изо всех сил, чтобы переключиться на кнопку после того, как он заканчивается.

Мой код, чтобы получить видео для автоматического воспроизведения:

<video class="video" width="320" height="240" autoplay>
  <source src="Toei.mp4" type="video/mp4">

(CSS класс был добавлен, чтобы иметь его играть полный экран)

Я добавил событие JS, когда он заканчивается

var video = document.querySelector("video");

video.addEventListener("ended", function(){
	video.setAttribute("button", "newButton")
});

Я получаю, что метод setAttribute, вероятно, не будет работать для того, чтобы изменить свойство элемента, но мне трудно найти, как:

  • иметь событие (видео заканчивается) и изменить свойство элемента, который закончился с ‘video’ на ‘button’

— Выберите это событие / свойство в css для редактирования стиля.

Это очень простое и короткое видео, которое должно сопровождаться кнопкой «enter», чтобы перейти на фактическую домашнюю страницу.

1 ответ

  1. Почему бы вам просто не иметь div с кнопкой, наложенной (например, абсолютно расположенной) над видео. По умолчанию скрыть его, а затем в вашем обработчике «фильм закончился» показать div с кнопкой.

    Вот код, который должен это сделать. Вам придется внести коррективы для точного позиционирования и укладки, и конечно же сделать так, чтобы кнопка что-то делала/куда-то шла.

    var video = document.querySelector("video");
    
    video.addEventListener("ended", function() {
    	document.getElementById("myBtn").style.display = "block";
    });
    #myBtn {
      position: absolute;
      top: 0;
      left: 0;
      width: 320px;
      height: 240px;
      text-align: center;
      background-color: #ff0000;
      display: none;
    }
    
    #myBtn > button {
      margin-top: 100px;
    }
    <video id="myVid" class="video" width="320" height="240" autoplay>
      <source src="Toei.mp4" type="video/mp4">
    </video>
    <div id="myBtn">
      <button type="button">Go Somewhere</button>
    </div>

    Новый #myBtndiv абсолютно расположен над тем местом, где находится видео, но #myBtnскрыт по умолчанию ( display: none). В обработчике событий video ended свойство displaystyle изменяется blockтак, что #myBtnстановится видимым и покрывает видеоплеер.