如何在视频上添加视频控件-解网

问：

我有一个带有自定义控件的视频。

我需要随时使控件可用，但是当我打开视频的全屏版本时，控件会隐藏。

这是我的代码：

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>

代码笔：https://codepen.io/alexvambato/pen/QWYGeGV

我已经实现了外部库（bootstrap）

我需要任何答案而不使用jquery

javascript html css 视频 html5-video

您不能在全屏模式下拥有自己的控件。全屏视频由操作系统控制，而不是由 Web 浏览器控制。如果您需要保留自己的控件，请不要提供全屏选项。相反，您可以提供一个“整页”选项，该选项在网页上方以全角叠加显示您的视频。

function toggleFullScreen() 
{
  if (container_vid.requestFullscreen) 
  {
      if (document.fullScreenElement) { document.cancelFullScreen(); } 
      else { container_vid.requestFullscreen(); }
  }
  else if (container_vid.msRequestFullscreen) 
  {
      if (document.msFullscreenElement) { document.msExitFullscreen(); } 
      else { container_vid.msRequestFullscreen(); }
  }
  else if (container_vid.mozRequestFullScreen) 
  {
      if (document.mozFullScreenElement) { document.mozCancelFullScreen(); } 
      else { container_vid.mozRequestFullScreen(); }
  }
  else if (container_vid.webkitRequestFullscreen) 
  {
      if (document.webkitFullscreenElement) { document.webkitCancelFullScreen(); } 
      else { container_vid.webkitRequestFullscreen(); }
  }
  else { alert("Pantalla completa no esta soportada"); }
}

（2） 更新 HTML 代码以包含容器：<div>

<html data-bs-theme="dark" >
<head>
</head>
<div>

<div id="vid_container" > <!--open new div for containing video UI -->

<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>  <!-- close div for containing video UI -->

</div>
</html>

上一个：IBM Video Player 嵌入代码不响应自动播放代码

下一个：youtube 如何在 Chrome 中不静音的情况下自动播放视频？

如何在视频上添加视频控件

How to add video controls over the video

评论

评论