Переместить HTML5 видео панель поиска

Question

Я пытаюсь создать макет страницы в HTML, которая воспроизводит видео в полноэкранном режиме в фоновом режиме. У меня есть прозрачное изображение, которое накладывается на фоновое видео, которое имитирует кнопки воспроизведения и заголовки (все кнопки - это просто изображение, а не настоящее!)

Теперь мне нужно вставить real панель поиска и скруббер в тег видео, с регулируемой шириной и расположением, как показано ниже. Как я могу это сделать?

Вот мой простой код. Изображение c stati ЗДЕСЬ и видео ЗДЕСЬ .

video#backgroundvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-repeat: no-repeat;
}

<img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt="">
<video preload="auto" autoplay loop id="backgroundvid">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Answer 1

Вы проверили? MDN: основы оформления видеоплеера ?

Редактировать: Вот пример индикатора выполнения с вашим оверлеем. Возможно, вам придется возиться с позиционированием элементов, но вы должны правильно вкладывать / размещать элементы.

const player = document.querySelector('.video-player');
const video = player.querySelector('video');
const progressBar = player.querySelector('.progress-bar');

video.addEventListener('timeupdate', updateProgressBar, false);
progressBar.addEventListener('click', seek);

function updateProgressBar() {
  var percentage = Math.floor((100 / video.duration) * video.currentTime);
  progressBar.value = percentage;
  progressBar.innerHTML = percentage + '% played';
}

function seek(e) {
  let percent = e.offsetX / this.offsetWidth;
  video.currentTime = percent * video.duration;
  e.target.value = Math.floor(percent / 100);
  e.target.innerHTML = progressBar.value + '% played';
}

.video-player {
  position: relative;
  width: 66%;
  height: 66%;
}
.video-player img {
  width: 100%;
  height: 100%;
}
.video-player video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 66%;
  min-height: 66%;
  width: auto;
  height: auto;
  z-index: -100;
  background-repeat: no-repeat;
}
.video-player .controls {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.video-player .controls .progress-bar {
  position: absolute;
  margin-left: 28%;
  bottom: 10%;
  color: orange;
  font-size: 12px;
  width: 40%;
  height: 8%;
  border: none;
  background: #434343;
  border-radius: 9px;
  vertical-align: middle;
  cursor: pointer;
}
.video-player .controls progress::-moz-progress-bar {
  color: orange;
  background: #434343;
}
.video-player .controls progress[value]::-webkit-progress-bar {
  background-color: #434343;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.video-player .controls progress[value]::-webkit-progress-value {
  background-color: orange;
}

<div class="video-player">
  <video preload="auto" autoplay loop id="backgroundvid">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
  <img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt="">
  <div class="controls">
    <progress class="progress-bar" min="0" max="100" value="0">0% played</progress>
  </div>
</div>

---

Вот пример с пользовательскими элементами управления. Это зеркало видео плеера Роба Гравелла HTML5 с пользовательскими элементами управления . Большинство стилей определены здесь.

Обратите внимание на стиль индикатора выполнения.

progress {
  color: green;
  font-size: 12px;
  width: 220px;
  height: 16px;
  border: none;
  margin-right: 10px;
  background: #434343;
  border-radius: 9px;
  vertical-align: middle;
}

progress::-moz-progress-bar {
  color: green;
  background: #434343;
}

progress[value]::-webkit-progress-bar {
  background-color: #434343;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-color: green;
}

// Get a handle to the player
const player = document.getElementById('video-element');
const btnPlayPause = document.getElementById('btnPlayPause');
const btnMute = document.getElementById('btnMute');
const progressBar = document.getElementById('progress-bar');
const volumeBar = document.getElementById('volume-bar');

// Update the video volume
volumeBar.addEventListener("change", function(evt) {
  player.volume = evt.target.value;
});
document.getElementById('btnFullScreen').disabled = true;
// Add a listener for the timeupdate event so we can update the progress bar
player.addEventListener('timeupdate', updateProgressBar, false);

// Add a listener for the play and pause events so the buttons state can be updated
player.addEventListener('play', function() {
  // Change the button to be a pause button
  changeButtonType(btnPlayPause, 'pause');
}, false);

player.addEventListener('pause', function() {
  // Change the button to be a play button
  changeButtonType(btnPlayPause, 'play');
}, false);

player.addEventListener('volumechange', function(e) {
  // Update the button to be mute/unmute
  if (player.muted) changeButtonType(btnMute, 'unmute');
  else changeButtonType(btnMute, 'mute');
}, false);

player.addEventListener('ended', function() {
  this.pause();
}, false);

progressBar.addEventListener("click", seek);

function seek(e) {
  let percent = e.offsetX / this.offsetWidth;
  player.currentTime = percent * player.duration;
  e.target.value = Math.floor(percent / 100);
  e.target.innerHTML = progressBar.value + '% played';
}

function playPauseVideo() {
  if (player.paused || player.ended) {
    // Change the button to a pause button
    changeButtonType(btnPlayPause, 'pause');
    player.play();
  } else {
    // Change the button to a play button
    changeButtonType(btnPlayPause, 'play');
    player.pause();
  }
}

// Stop the current media from playing, and return it to the start position
function stopVideo() {
  player.pause();
  if (player.currentTime) player.currentTime = 0;
}

// Toggles the media player's mute and unmute status
function muteVolume() {
  if (player.muted) {
    // Change the button to a mute button
    changeButtonType(btnMute, 'mute');
    player.muted = false;
  } else {
    // Change the button to an unmute button
    changeButtonType(btnMute, 'unmute');
    player.muted = true;
  }
}

// Replays the media currently loaded in the player
function replayVideo() {
  resetPlayer();
  player.play();
}

// Update the progress bar
function updateProgressBar() {
  // Work out how much of the media has played via the duration and currentTime parameters
  var percentage = Math.floor((100 / player.duration) * player.currentTime);
  // Update the progress bar's value
  progressBar.value = percentage;
  // Update the progress bar's text (for browsers that don't support the progress element)
  progressBar.innerHTML = percentage + '% played';
}

// Updates a button's title, innerHTML and CSS class
function changeButtonType(btn, value) {
  btn.title = value;
  btn.innerHTML = value;
  btn.className = value;
}

function resetPlayer() {
  progressBar.value = 0;
  // Move the media back to the start
  player.currentTime = 0;
  // Set the play/pause button to 'play'
  changeButtonType(btnPlayPause, 'play');
}

function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

function toggleFullScreen() {
  //var player = document.getElementById("player");

  if (player.requestFullscreen)
    if (document.fullScreenElement) {
      document.cancelFullScreen();
    } else {
      player.requestFullscreen();
    }
  else if (player.msRequestFullscreen)
    if (document.msFullscreenElement) {
      document.msExitFullscreen();
    } else {
      player.msRequestFullscreen();
    }
  else if (player.mozRequestFullScreen)
    if (document.mozFullScreenElement) {
      document.mozCancelFullScreen();
    } else {
      player.mozRequestFullScreen();
    }
  else if (player.webkitRequestFullscreen)
    if (document.webkitFullscreenElement) {
      document.webkitCancelFullScreen();
    } else {
      player.webkitRequestFullscreen();
    }
  else {
    alert("Fullscreen API is not supported");
  }
}

body {
  font-family: Verdana, Geneva, sans-serif;
  background-color: lightgray;
}

p {
  font-size: 0.9em;
}

h1 {
  font-size: 16px;
  color: #333;
}

#player {
  float: left;
  padding: 1em 1em .5em;
  background-color: black;
  border: 2px solid darkgreen;
  border-radius: 9px;
}

#controls {
  border: 1px solid darkgreen;
  width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 5px;
  padding-bottom: 3px;
  border-radius: 7px;
}

video {
  border: 1px solid darkgreen;
  width: 420px;
  height: 231px;
  background: black;
}

button {
  text-indent: -9999px;
  width: 16px;
  height: 16px;
  border: none;
  cursor: pointer;
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0;
  /* url('buttons.png') */
}

.pause {
  background-position: -19px 0;
}

.stop {
  background-position: -38px 0;
}

#volume-bar {
  width: 50px;
  vertical-align: middle;
  padding: 0px;
}

.mute {
  background-position: -95px 0;
}

.unmute {
  background-position: -114px 0;
}

.replay {
  background-position: -133px 0;
}

.fullscreen {
  text-indent: 0px;
  color: #00c600;
  background-color: black;
  background-image: none;
  padding: 0px;
  font-weight: bold;
  padding-bottom: 3px;
}

progress {
  color: green;
  font-size: 12px;
  width: 220px;
  height: 16px;
  border: none;
  margin-right: 10px;
  background: #434343;
  border-radius: 9px;
  vertical-align: middle;
}

progress::-moz-progress-bar {
  color: green;
  background: #434343;
}

progress[value]::-webkit-progress-bar {
  background-color: #434343;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-color: green;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.8px 0;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
  background: #205928;
  border-radius: 1px;
  border: 1.1px solid #18d501;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
  border: 2.5px solid #83e584;
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #439643;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.9px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #276c30;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
  background: #205928;
  border-radius: 1px;
  border: 1.1px solid #18d501;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
  border: 2.5px solid #83e584;
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #439643;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #194620;
  border: 1.1px solid #18d501;
  border-radius: 2px;
  box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}

input[type=range]::-ms-fill-upper {
  background: #205928;
  border: 1.1px solid #18d501;
  border-radius: 2px;
  box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}

input[type=range]::-ms-thumb {
  box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
  border: 2.5px solid #83e584;
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #439643;
  cursor: pointer;
  height: 4.4px;
}

input[type=range]:focus::-ms-fill-lower {
  background: #205928;
}

input[type=range]:focus::-ms-fill-upper {
  background: #276c30;
}

ground-color: lightgray;

}
p {
  font-size: 0.9em;
}
h1 {
  font-size: 16px;
  color: #333;
}
#player {
  float: left;
  padding: 1em 1em .5em;
  background-color: black;
  border: 2px solid darkgreen;
  border-radius: 9px;
}
#controls {
  border: 1px solid darkgreen;
  width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 5px;
  padding-bottom: 3px;
  border-radius: 7px;
}
video {
  border: 1px solid darkgreen;
  width: 420px;
  height: 231px;
  background: black;
}
button {
  text-indent: -9999px;
  width: 16px;
  height: 16px;
  border: none;
  cursor: pointer;
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0;
  /* url('buttons.png') */
}
.pause {
  background-position: -19px 0;
}
.stop {
  background-position: -38px 0;
}
#volume-bar {
  width: 50px;
  vertical-align: middle;
  padding: 0px;
}
.mute {
  background-position: -95px 0;
}
.unmute {
  background-position: -114px 0;
}
.replay {
  background-position: -133px 0;
}
.fullscreen {
  text-indent: 0px;
  color: #00c600;
  background-color: black;
  background-image: none;
  padding: 0px;
  font-weight: bold;
  padding-bottom: 3px;
}
progress {
  color: green;
  font-size: 12px;
  width: 220px;
  height: 16px;
  border: none;
  margin-right: 10px;
  background: #434343;
  border-radius: 9px;
  vertical-align: middle;
}
progress::-moz-progress-bar {
  color: green;
  background: #434343;
}
progress[value]::-webkit-progress-bar {
  background-color: #434343;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
  background-color: green;
}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.8px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
  background: #205928;
  border-radius: 1px;
  border: 1.1px solid #18d501;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
  border: 2.5px solid #83e584;
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #439643;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #276c30;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
  background: #205928;
  border-radius: 1px;
  border: 1.1px solid #18d501;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
  border: 2.5px solid #83e584;
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #439643;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #194620;
  border: 1.1px solid #18d501;
  border-radius: 2px;
  box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-fill-upper {
  background: #205928;
  border: 1.1px solid #18d501;
  border-radius: 2px;
  box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-thumb {
  box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
  border: 2.5px solid #83e584;
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #439643;
  cursor: pointer;
  height: 4.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #205928;
}
input[type=range]:focus::-ms-fill-upper {
  background: #276c30;
}

<h1>Custom HTML5 Video Player Demo</h1>
<div id='player'>
  <video id='video-element'>
    <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'>
    <source src='https://www.w3schools.com/html/mov_bbb.ogg' type='video/ogg'>
  </video>
  <div id='controls'>
    <progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
    <button id='btnReplay' class='replay' title='replay' accesskey="R" onclick='replayVideo();'>Replay</button>
    <button id='btnPlayPause' class='play' title='play' accesskey="P" onclick='playPauseVideo();'>Play</button>
    <button id='btnStop' class='stop' title='stop' accesskey="X" onclick='stopVideo();'>Stop</button>
    <input type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1">
    <button id='btnMute' class='mute' title='mute' onclick='muteVolume();'>Mute</button>
    <button id='btnFullScreen' class='fullscreen' title='toggle full screen' accesskey="T" onclick='toggleFullScreen();'>[&nbsp;&nbsp;]</button>
  </div>
</div>
<div style="clear:both"></div>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
<p>Volume bar styled using <a href="http://danielstern.ca/range.css/#/" target="_blank">range.css</a>.</p>