HTML5 视频的自定义播放按钮 [关闭]

Question

我有一个包含多个视频的网页。这是我想要实现的目标：

• 每个人都有一个自定义播放按钮。
• 点击播放按钮时，我希望按钮消失。
• 视频结束后，我希望播放按钮再次出现。

我还没有找到有关此特定需求的信息。我对 JS 也不是很熟悉，因此非常感谢您的帮助????

Answer 1

您可以通过调用html和css样式来实现自定义按钮。对于消失的 onclick，只需为 javascript 添加一个事件监听器使用

document.getElementById('BUTTON ID').addEventListener('click',function(){ document.getElementById('BUTTON ID').style.display = 'none';}); 

重新出现onclick将不得不利用视频标签等内置控件

document.getElementById('VIDEO ID').onended = function(){
document.getElementById('VIDEO ID').style.display = 'block';
} 

编辑可运行片段--

document.getElementById('press').addEventListener('click', function(){
document.getElementById('vid').play();
document.getElementById('press').style.display = 'none';
});
document.getElementById('vid').onended = function(){
document.getElementById('press').style.display = 'block';
}

#press{
background-color: blue;
color: red;
}

<video id="vid" width="320" height="240" controls>
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video><br>
<button id='press'>Play Video</button>