如何設置自定義控件的樣式以顯示在本機html5視頻控件旁邊

Question

我有一個帶有本機控件的基本html5視頻標簽。 我添加了3個自定義控制按鈕，其中1個用於下一個視頻，上一個視頻和一個重放視頻控制按鈕。

問題1.如何設置自定義控件的樣式以使其與本機控件串聯顯示或在其旁邊顯示？所附圖像描述了我想要實現的目標。

問題2：我知道如何在視頻結束時（使用JavaScript）顯示重播按鈕，但是如何使它發生在視頻本身而不是控件欄上？

謝謝

Answer 1

您應該將視頻和控件放在一個容器中。 禁用視頻的默認控件。 使用HTML構建自定義控件，並使用z-index將其置於視頻上方。 綁定控件單擊事件並使用JS更改視頻狀態。 有限元

<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>