如何在HTML视频上添加按钮？

Question

这是我第一次使用HTML而不是基本网站。

我有一个基于视频的社交媒体应用，我想通过instagram之类的链接共享帖子。该链接将是一个循环播放视频的网站，直到用户单击视频上的按钮。按下此按钮后，将播放另一个视频。

如何在视频上方添加按钮，所以当我单击该按钮时，会播放另一个视频？这就是我所拥有的。

<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

首先，我看到您正在将img标签与视频源一起使用。请使用video标签。

Bootstrap是一种旨在简化网站UI开发的工具。有用时使用它。为了在视频上显示按钮，与其说是辅助，不如说是矫kill过正。

[下面，您将看到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>

Answer 2

您应该使用video HTML标签插入视频。阅读更多here。然后，您可以在元素source内使用元素video指定视频的来源。将src中的source属性设置为视频的链接，并指定其type。

要创建自定义按钮，您可以创建一个包含视频和自定义按钮的容器。该按钮将使用CSS从position -ed至absolute，以使其出现在视频的正确位置（使用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;
  border-radius: 50%;
  background: #FFFFFFDD;
  opacity: 0;
  transition: opacity .3s ease;
  cursor: pointer;
}

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>