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