javascript - 如何设置自定义控件的样式以显示在原生 html5 视频控件旁边

Question

我有一个带有本机控件的基本 html5 视频标签。我添加了 3 个自定义控制按钮，1 个用于下一个视频、上一个视频和一个回放视频控制按钮。

问题 1.如何设置自定义控件的样式，使其与本机控件内嵌或旁边显示？所附图像描述了我想要实现的目标。

问题 2.我知道如何在视频结束时显示重播按钮（使用 JavaScript），但我怎样才能在视频本身而不是控制栏上实现这一点？

谢谢

标签： javascripthtml5-video

Answer 1

您应该将视频和控件放在一个容器中。禁用视频的默认控件。使用 HTML 构建您的自定义控件，并使用 z-index 放置在视频上方。绑定控件点击事件，用JS改变视频状态。FE

<div id="video-container">
  <video id="video" controls="false">
  <div id="video-controls">
    <button type="button" id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
  </div>
</div>