时间戳

首页 > 解决方案 > 如何在 HTML 中的视频上添加按钮？

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

问题描述

这是我第一次使用 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>

标签： javascripthtmlcssvideosocial-networking

解决方案

首先，我看到您正在使用img带有视频源的标签。请改用video标签。

Bootstrap 是一个旨在让您在开发网站 UI 时更轻松的工具。在有用的时候使用它。为了在视频上显示一个按钮，这更像是一种矫枉过正而不是辅助。

下面，您将看到在视频上显示按钮的 HTML 和 CSS 代码。重要的是要知道：当你创建一个元素时position: relative，所有的子元素都position: absolute将被定位在父元素内。在代码中，我们利用这种行为来显示.video-contentover .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>

推荐阅读