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

Posted 2023-02-24

【中文标题】如何在 HTML 中的视频上添加按钮？

【英文标题】：How can I add a button over a video in HTML?

【发布时间】：2020-02-29 15:55:03

【问题描述】：

这是我第一次使用 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"   style="transform: translate3d(0px, 4px, 0px);">
                        <h3><strong class="">Cute cat</strong></h3>
                        <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 20"  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"   style="transform: translate3d(0px, 4px, 0px);">
                        </div>
                    </div>
                </div>
            </div>

【参考方案1】：

首先，我看到您在视频源中使用了img 标签。请改用video 标签。

Bootstrap 是一款旨在让您在开发网站 UI 时更轻松的工具。在有用的时候使用它。要在视频上显示按钮，与其说是辅助，不如说是矫枉过正。

下面，您将看到在视频上显示按钮的 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>

【讨论】：

下面我的回答 (***.com/a/60467246/9060223) 能解决您的问题吗？

【参考方案2】：

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

要创建自定义按钮，您可以创建一个同时包含视频和自定义按钮的容器。该按钮将使用 CSS 将 position 编辑为 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;
  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>