我有一个带有自定义控件的视频。
我需要随时提供控件。但是当我打开全屏版本的视频时，控件会隐藏。
这是我的代码：
var video = document.querySelector(".video");
var toggleButton = document.querySelector(".toggleButton");
var toggleButtonId = document.getElementById("toggleButton");
var progress = document.querySelector(".progress");
var progressBar = document.querySelector(".progress__filled");
var progressId = document.getElementById('progressId');
var volumeBar = document.getElementById('volume-bar');
function togglePlay() {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
}
function updateToggleButton() {
toggleButtonId.innerHTML = video.paused ? "►" : "❚❚";
}
function handleProgress() {
const progressPercentage = (video.currentTime / video.duration) * 100;
progressBar.style.flexBasis = `${progressPercentage}%`;
}
function scrub(e) {
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = scrubTime;
}
volumeBar.addEventListener("change", function(evt) {
video.volume = evt.target.value;
});
video.addEventListener("click", togglePlay);
video.addEventListener("play", updateToggleButton);
video.addEventListener("pause", updateToggleButton);
video.addEventListener("timeupdate", handleProgress);
progressId.addEventListener("click", scrub);
var mousedown = false;
progressId.addEventListener("mousedown", () => (mousedown = true));
progressId.addEventListener("mousemove", (e) => mousedown && scrub(e));
progressId.addEventListener("mouseup", () => (mousedown = false));
function toggleFullScreen() {
if (video.requestFullscreen) {
if (document.fullScreenElement) {
document.cancelFullScreen();
} else {
video.requestFullscreen();
}
}
else if (video.msRequestFullscreen) {
if (document.msFullscreenElement) {
document.msExitFullscreen();
} else {
video.msRequestFullscreen();
}
}
else if (video.mozRequestFullScreen) {
if (document.mozFullScreenElement) {
document.mozCancelFullScreen();
} else {
video.mozRequestFullScreen();
}
}
else if (video.webkitRequestFullscreen) {
if (document.webkitFullscreenElement) {
document.webkitCancelFullScreen();
} else {
video.webkitRequestFullscreen();
}
}
else {
alert("Pantalla completa no esta soportada");
}
}<html data-bs-theme="dark" >
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>
<div>
<video id="video" class="video w-100">
<source src="https://test.loro.ec/www/t/test.loro.ec/images/articles_blocks/608.mp4" type="video/mp4">
</video>
<div class="controls position-relative" style="top: -50px;margin-left: 8px;">
<div class="row">
<div class="col-1">
<button class="controls__button toggleButton btn" id="toggleButton" title="Toggle Play" onclick="togglePlay()">►</button>
</div>
<div class="progress col-5 p-0" id="progressId">
<div class="progress__filled" style="background: rebeccapurple;"></div>
</div>
<div class="col-4">
<i class="bi bi-volume-up"></i>
<input class="form-range" style="width: 80%;" type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1">
</div>
<div class="col-1">
<button class="btn" onclick="toggleFullScreen()"><i class="bi bi-arrows-fullscreen"></i></button>
</div>
</div>
</div></div>
</html>Codepen：https://codepen.io/alexvambato/pen/QWYGeGV
我已经实现了外部库（引导程序）
我需要任何不使用 jquery 的答案
您无法全屏拥有自己的控件。全屏视频由操作系统控制，而不是由网络浏览器控制。如果您需要保留自己的控件，请不要提供全屏选项。您可以改为提供“全页”选项，以全角覆盖方式在网页上方显示您的视频。