覆盖自定义视频播放器

Question

我正在尝试创建一个自定义视频播放器，我想在大多数视频播放器上实现该功能，允许您将鼠标悬停在框架上以弹出视频控制按钮。事实证明，悬停部分很容易，但我无法找到如何覆盖视频底部的按钮。我知道有很多线程在询问这个问题，但他们似乎都使用Webkit视频或Video.js。

我想要的只是一种用纯html / css / js覆盖视频上的按钮的方法。 例如，我想在下面的视频中叠加此播放/暂停按钮和此进度条：

进度条：

 <div>
                    <progress
                        id='progress-bar'
                        min='0'
                        max='100'
                        value='0'
                        ref={(pb) => this.progressBar = pb}
                    />
                </div>

播放按钮：

<button
                    id='play-pause-button'
                    className='play'
                    title='play'
                    ref = {(btn) => this.playPauseButton = btn}
                    onClick={(e) => this.togglePlayPause(e)}
                >
                    Play
                </button>

视频

<video
                    id='media-video'
                    ref={(mv) => this.mediaVideo = mv}
                    controls
                >
                    <source src='http://techslides.com/demos/sample-videos/small.mp4' type='video/mp4'></source>
                </video>