本文介绍了如何在全屏模式下显示自定义视频控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新:无法在Firefox中正常运行:(

Update: Can't see to get things working in Firefox : (

在现代浏览器中以全屏模式显示时，如何显示自定义视频控件?

How can I display custom video controls when the in fullscreen mode in modern browsers?

一旦我全屏显示，它们就会消失.我希望它们可以使用，然后编写一些JavaScript以在不活动时将其隐藏，并在有人摇动鼠标时将其显示.

They disappear as soon as I go fullscreen. I'd like them to be available, and then I'll write some JavaScript to hide them on inactivity and show them once someone wiggles their mouse around.

HTML:

<video#video src="vid.mp4" preload poster="/images/poster.jpg">
  <iframe src="https://youtube.com/embed/id" frameborder="0" allowfullscreen>
</video>

JS:

var bigPlayButton = document.getElementById('big-play-button')
var video = document.getElementById('video')
var playPauseButton = document.getElementById('play-pause')
var fullscreen = document.getElementById('fullscreen')

function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

fullscreen.addEventListener('click', function (event) {
  if (!video.classList.contains('fullscreen')) {
    video.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}, false)

// Detect FullScreen changes and adjust button
document.addEventListener('fullscreenchange', function (event) {
  if (document.fullscreenElement) {
    fullscreen.children[0].src = '/images/nofullscreen.svg'
    video.classList.add('fullscreen')
  } else {
    fullscreen.children[0].src = '/images/fullscreen.svg'
    video.classList.remove('fullscreen')
  }
}, false)

CSS

video::-webkit-media-controls {
  display: none !important;
}
#custom-video-controls {
  z-index: 2147483648;
}

我正在使用此polyfill: https://github.com/neovov/Fullscreen-API -填充

I'm using this polyfill: https://github.com/neovov/Fullscreen-API-Polyfill

编辑

重大变化是针对父标记:.vidFrame用于全屏显示，而不是按照Kaido的评论显示的<video>标记.

Edit

The significant change was targeting the parent tag: .vidFrame for fullscreen instead of the <video> tag as per Kaido's comment.

如果要覆盖HTML5视频控件，则需要进行特殊处理.我假设您要这样做，因为控件已经具有内置于控件中的全屏功能.该演示实现:

HTML5 video's controls need special handling if you want to override them. I'm assuming you want to do that since the controls already have the full screen feature built in the controls. This demo implements:

classList用于切换.on和.off的button#fullScreen状态以及.play和.pause的button#playPause状态.
:fullscreen伪类，以确保在全屏模式下，.vidBar位于底部.
Shadow DOM覆盖本机播放器控件所需的CSS样式.
Fullscreen API特定于供应商的进入和退出全屏模式的方法.
没有音量滑块，静音按钮或洗涤器，只有全屏按钮(button#fullScreen)和播放按钮(button#playPause).如果您需要它们，请问另一个问题.
详细信息在源中带有注释.

classList for toggling the button#fullScreen states of .on and .off and button#playPause states of .play and .pause.
:fullscreen pseudo-class to insure .vidBar is on the bottom when in full screen mode.
Shadow DOM CSS Styles that are needed to override the native player's controls.
Fullscreen API vendor specific methods to enter and exit full screen mode of course.
There's no volume slider, mute button, or scrubber, just the full screen button (button#fullScreen) and play button (button#playPause). If you want them, ask another question.
Details are commented in source.

该代码段似乎未完全正常运行，因此这是一个正常运行的柱塞 .如果无法达到该版本，请查看 嵌入式柱塞 ，然后单击全屏按钮:

It looks as if the Snippet isn't fully functional, so here's a functional Plunker. If that version cannot be reached, then review the embedded Plunker and click the full view button:

注意:SO沙箱已更改，因此该演示无法完全正常运行，请转到前面提到的链接，或将演示复制并粘贴到文本编辑器上.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Full Screen Video Toggle</title>
<style>
.vidFrame { position: relative; top: 10%; width: 320px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidBar { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; }

#fullScreen { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; }

#fullScreen:hover { border: 1px groove #0ef; }
.on, .off { background: url('https://i.imgur.com/0FTwh6M.png') no-repeat; width: 36px; height: 36px; }
.off { background-position: 0 0 }
.on { background-position: -1px -50px }

#playPause { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; }
#playPause.play:before { content: '\25b6'; }
#playPause.pause:before { content: '\275a\275a'; }

.vid { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
/* 
Fullscreen Pseudo-class: 
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen 
*/
.vidBar:-moz-full-screen { position: fixed; }
.vidBar:-webkit-full-screen { position: fixed; }
.vidBar:-ms-fullscreen { position: fixed; }
.vidBar:fullscreen { position: fixed; }
/* 
Special Shadow DOM Settings to Override Default Controls: 
https://css-tricks.com/custom-controls-in-html5-video-full-screen/ 
*/
video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar { z-index: 2147483648; }
</style>
</head>

<body>
<figure class="vidFrame">
  <video id="vid1" class="vid" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  <figcaption class="vidBar">
    <button id='playPause' class="play" title="Play/Pause Video"></button>
    <button id='fullScreen' class="on" title="Enter/Exit Full Screen"></button>
  </figcaption>
</figure>
<script>

/* 
Toggle Button with classList: 
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList 
*/
var fullBtn = document.getElementById('fullScreen');
var playBtn = document.getElementById('playPause');

playBtn.addEventListener('click', function(event) {
  var player = document.getElementById('vid1');

  if(player.paused) {
    playBtn.classList.remove('play');
    playBtn.classList.add('pause');
    player.play();
  } else {
    playBtn.classList.add('play');
    playBtn.classList.remove('pause');
    player.pause();
  }
}, false);

fullBtn.addEventListener('click', function(event) {
  var tgtEle = document.querySelector('.vidFrame');
  var  onOrOff = fullBtn.classList.contains('on');

  if (onOrOff) {
    enterFS(tgtEle);
    fullBtn.classList.remove('on');
    fullBtn.classList.add('off');
  } else {
    exitFS();
    fullBtn.classList.add('on');
    fullBtn.classList.remove('off');
  }
}, false);

/*
Fullscreen API:
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
*/
function enterFS(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

function exitFS() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}
</script>
</body>
</html>

这篇关于如何在全屏模式下显示自定义视频控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

FullScreen

如何在全屏模式下显示自定义视频控件

问题描述

推荐答案

编辑

Edit