通过Fullscreen API实现自定义全屏按钮，先移除video的controls属性并创建按钮，用requestFullscreen()和exitFullscreen()控制全屏状态，结合fullscreenchange事件同步按钮文本，提升体验与页面风格统一性。
在HTML5中，可以通过Fullscreen API为视频添加自定义全屏按钮，实现对视频播放器的更好控制。默认的控件虽然包含全屏功能，但样式和行为受限。使用自定义控件可以提升用户体验并保持页面风格统一。
启用自定义控件并隐藏默认控件
要在视频上使用自定义控件，先移除默认控件，并创建自己的按钮：
注意不要添加controls属性，这样就不会显示浏览器默认控件。
使用Fullscreen API实现全屏切换
JavaScript通过Fullscreen API控制元素进入或退出全屏模式。以下代码实现点击按钮时切换全屏状态：
立即学习“前端免费学习笔记（深入）”；
const video = document.getElementById('myVideo');
const btn = document.getElementById('fullscreenBtn');
btn.addEventListener('click', function() {
if (!document.fullscreenElement) {
video.requestFullscreen().catch(err => {
console.error("无法进入全屏:", err);
});
} else {
document.exitFullscreen();
}
});
说明：
-
document.fullscreenElement用于判断当前是否处于全屏状态，若无元素全屏则返回null -
element.requestFullscreen()请求将指定元素全屏显示 -
document.exitFullscreen()退出全屏模式 - 建议添加
catch处理可能的错误（如用户未允许全屏）
增强体验：同步按钮文本与状态
可以根据全屏状态动态更新按钮文字，提升交互清晰度：
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
btn.textContent = '退出全屏';
} else {
btn.textContent = '全屏';
}
});
当全屏状态改变时，浏览器触发fullscreenchange事件，可借此同步UI。
基本上就这些。通过结合自定义按钮与Fullscreen API，你可以完全掌控视频全屏行为，同时保持界面美观一致。不复杂但容易忽略的是错误处理和状态同步，加上后会更稳定。
