Как я могу добавить кнопку поверх видео в HTML?

Question

Я впервые работаю с HTML, за исключением базовых c веб-сайтов.

У меня есть приложение для социальных сетей, основанное на видео, и я хочу поделиться публикациями со ссылкой, например, Instagram. Эта ссылка будет веб-сайтом с видео, воспроизводимым в l oop, пока пользователь не нажмет кнопку поверх видео. После нажатия этой кнопки воспроизводится другое видео.

Как добавить кнопку поверх видео, чтобы при нажатии на нее воспроизводилось другое видео? Это то, что у меня есть.

<div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 col-lg-5 order-md-2" style="">
                        <img class="mw-100 mt-lg-0 rounded" src="https://profile_picture.jpeg" alt="image" height="110;" style="transform: translate3d(0px, 4px, 0px);">
                        <h3><strong class="">Cute cat</strong></h3>
                        <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 100 20" width="100" class="mb-30 svg-secondary"><path d="m0 9h100v2h-100z" fill-rule="evenodd"></path></svg>
                        <p class="mb-30 lead" style="">This is a card trick I learned when I was at Magic School</p>
                        <ul class="list-unstyled padding-x2-list separate-list mb-50">                    
                        </ul>
                        <a class="btn btn-outline-warning light" href="https://apps.apple.com/us/app/sampleApp" style=""><span style=""><strong class="">  Get it now</strong></span></a>
                    </div>

                    <div class="col-md-6 mr-auto order-md-1 text-center">
                        <div class="content-box d-inline-block">
                            <img class="mw-100 mt-lg-0 rounded" src="https://example000.mp4" alt="image" height="640;" style="transform: translate3d(0px, 4px, 0px);">
                        </div>
                    </div>
                </div>
            </div>

Answer 1

Вы должны использовать тег video HTML для вставки видео. Подробнее здесь . Затем вы можете указать источник видео с элементом source внутри элемента video. Установите атрибут src в source для ссылки на ваше видео и укажите его type.

Чтобы создать пользовательскую кнопку, вы можете создать контейнер, который содержит как видео, так и пользовательскую кнопку. Кнопка будет position -ed до absolute с использованием CSS, чтобы она отображалась в правильном месте в видео (настраивается с помощью CSS). Затем присоедините прослушиватель событий к нажатию кнопки, чтобы изменить источник видео.

Ниже приведен очень простой рабочий пример. Нажмите кнопку с ! при наведении курсора на видео, чтобы изменить его источник.

const video = document.querySelector('video')
const source = document.querySelector('source')

video.appendChild(source)
video.play()

const changeVideoButton = document.querySelector('#changeVideo')
changeVideo.addEventListener('click', e => {
  video.pause()
  
  source.setAttribute('src', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4')
  
  video.load()
  video.play()
})

#container {
  position: relative;
}

video {
  width: 300px;
}

#changeVideo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 25px;
  height: 25px;
  opacity: 0;
  transition: opacity .3s ease;
  cursor: pointer;
  
  /* Additional styles just to increase visual appeal */
  border-radius: 50%;
  background: #FFFFFFDD;
  color: red;
  font-weight: bold;
  line-height: 25px;
  text-align: center;
  /* End */
}

/* On hovering the video, show the button */
video:hover~#changeVideo {
  opacity: 1;
}

#changeVideo:hover {
  opacity: 1;
}

<div id="container">
  <video controls autoplay loop>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
  <div id="changeVideo">!</div>
</div>

Answer 2

Прежде всего, я вижу, что вы используете тег img с источником видео. Вместо этого используйте тег video.

Bootstrap - это инструмент, предназначенный для облегчения вашей жизни при разработке пользовательского интерфейса веб-сайта. Используйте это, когда это полезно. Для отображения кнопки поверх видео это скорее излишество, чем помощь.

Ниже вы увидите код HTML и CSS, который отображает кнопку поверх видео. Важно знать: когда вы создаете элемент position: relative, все дочерние элементы position: absolute будут расположены внутри родительского элемента. В коде мы используем это поведение для показа .video-content над .video.

.video-view {
  position: relative;
  width: 300px;
  height: 100px;
}

.video-view .video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #ccc;
}

.video-view .video-content {
  position: absolute;
  bottom: 0px;
}

<div class="video-view">
  <video class="video"></video>
  <div class="video-content">
    <button>Sample</button>
  </div>
</div>