Javascript HTML5视频的自定义播放按钮

我有一个包含多个视频的网页。以下是我努力实现的目标：

• 一个自定义的播放按钮，其中每一个
• 单击“播放”按钮时，我希望该按钮消失
• 视频结束后，我希望播放按钮再次出现

---

我还没有找到关于这个特殊需求的信息。我对JS也不是很熟悉，因此非常感谢您的帮助您可以通过调用html和css样式来实现自定义按钮。对于onclick，只需使用

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'；
}

#按{
背景颜色：蓝色；
颜色：红色；
}

播放视频

默认情况下，

标记具有

控件

属性您可以使用它，您不知道它或者您想创建自己的控件吗？下面是一个示例：``谢谢：'）我确实想创建一个自定义播放按钮我将添加一个工作示例，稍等一下：）@Matan您需要澄清您的问题吗“正在创建自定义播放按钮”。（1）您是否已准备好单击现有图形，并且只想知道如何触发某些视频元素的播放功能？…（2）或者你在问如何实际绘制图形？这就是为什么要标记

css

，因为你正在使用css形状或其他东西吗？如果这对你有帮助，请向上投票。询问任何问题，我都会尽力回答。谢谢！也许我遗漏了什么-但是我如何自定义原始的HTML5播放按钮？使用css更改背景颜色，例如nt颜色、边框等，如果这是您的要求。您还可以通过更改每个视频的边框半径使边缘圆形或更圆，您还可以为每个视频添加一个按钮one@Matan“我如何定制原始的HTML5播放按钮？”这不是一个好主意，因为您必须根据每个浏览器的规则进行更改（iOS的HTML5播放按钮需要与Edge中的HTML5播放按钮不同的代码等）。最简单的事情是创建自己的图标（图像？）因此，删除HTML5

控件

，给你的图像一个ID和一个click listener来运行一些JS功能，然后在JS中，你有一个根据点击的图像ID按ID播放视频元素的功能。