要在视频
全屏显示
时添加自定义
按钮，您可以使用
HTML5的
全屏API和JavaScript来实现。下面是一个简单的示例代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<style>
#
video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
#
video {
position: absolute;
width: 100%;
height: 100%;
}
#custom-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: none;
}
#
video:-webkit-full-screen #custom-button,
#
video:-moz-full-screen #custom-button,
#
video:-ms-fullscreen #custom-button,
#
video:fullscreen #custom-button {
display: block;
}
</style>
</head>
<body>
<div id="
video-container">
<
video id="
video"
controls>
<source src="your_
video.mp4" type="
video/mp4">
</
video>
<button id="custom-button">Custom Button</button>
</div>
<script>
var
video = document.getElementById('
video');
var customButton = document.getElementById('custom-button');
customButton.addEventListener('click', function() {
if (
video.requestFullscreen) {
video.requestFullscreen();
} else if (
video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (
video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (
video.msRequestFullscreen) {
video.msRequestFullscreen();
}
});
</script>
</body>
</
html>
```
在上面的示例代码中，我们将视频包装在一个 `
video-container` 容器中，并在其中添加了一个自定义
按钮 `custom-button`。使用CSS的绝对定位和`display: none;`属性，我们将
按钮放置在视频的中心，并将其初始显示设置为隐藏。
然后，通过JavaScript，我们为自定义
按钮添加了一个点击事件监听器。当
按钮被点击
时，我们使用各个浏览器提供的
全屏API，例如 `requestFullscreen()`、`mozRequestFullScreen()`、`webkitRequestFullscreen()` 和 `msRequestFullscreen()` 来请求视频元素进入
全屏模式。
请注意，
全屏API在不同浏览器中的支持程度可能会有所不同，因此您可能需要根据需要进行适当的兼容性处理。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
2354
