jquery - 视频.JS : How do I add my own custom play and pause button in the middle of the video-container?

Question

对于一个任务，我需要制作一个具有暗模式、弹出模式、一个包含多个视频的 Accordion 和视频播放器需要 3 个自定义按钮的网站。要播放、暂停并“检查”您是否完成了弹出模式的教程。

如何在视频播放器和中心添加我的按钮？我似乎无法在 video.js 播放器本身中正确获取按钮(绿色按钮)。我认为制作视频 position: relative 和按钮 position absolute 可以解决问题，但它仍然覆盖整个网站，而不是包含在视频本身中

#my-player {
    position: relative;
}


.video-button {
    position: absolute;
    padding: 20px;
    display: inline-block;
    top: 0%;
    left: 0%;
    
}

#video-play {
    background-color: green;
    
}

<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="accordion">
  <h4> 
     <span> <i class="fas fa-caret-right rotate arrow"></i> Algemene       introductie </span>             
   </h4>
                            
   <div>
     <video id='my-player' class="video-js" controls data-setup='{"fluid": true}'>
       <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
       <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogv">
       <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
     </video>
   <a class="video-button" id="video-play">></a>
   </div>
</div>

<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>

Answer 1

为了正确使用 Position Absolute 和 Relative，您必须将带有“position:absolute”的元素放在“position:relative”元素中。

这样的东西应该将按钮放在视频元素中:

<div id='my-player' class="video-wrapper">
  <video  class="video-js" controls data-setup='{"fluid": true}'>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogv">
    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
  </video>
  <a class="video-button" id="video-play">></a>
</div>