在 Firefox 中显示自定义视频控制栏

【问题标题】：Show custom video control bar in Firefox在 Firefox 中显示自定义视频控制栏
【发布时间】：2017-09-22 15:44:44
【问题描述】：

这里有个难题：我的视频控制栏在 Firefox 中没有以全屏模式显示。在 Chrome、Opera、Safari 中，一切都是“Gucci in the Louis store”（由 z-index: 2789034264 !important 完成），但在 Firefox 中它忽略了 z-index。主要的函数名称是exitHandler(),enterFullScreen()和exitFullScreen()。完整代码在这里：

var vid, playPauseButton, seekSlider, currentTime, vidDuration, muteButton, volumeSlider, fullScreenToggler, loop, fullscreenHider;

function intializePlayer(){
"use strict"; 
// Set object references	
vid = document.getElementById("vid");
playPauseButton = document.getElementById("playPauseButton");
seekSlider = document.getElementById("seekSlider");
currentTime = document.getElementById("done");
vidDuration = document.getElementById("duration");
muteButton = document.getElementById("muteUnmute");
volumeSlider = document.getElementById("volumeSlider");
fullScreenToggler = document.getElementById("toggleFullScreen");
loop = document.getElementById("loop");
fullscreenHider = document.getElementById("exitFullScreen");
// Add event listeners
playPauseButton.addEventListener("click",playPauseVideo,false);
seekSlider.addEventListener("input",timeSlider,false);
vid.addEventListener("timeupdate",videoTimeUpdate,false);
muteButton.addEventListener("click",muteUnmute,false);
volumeSlider.addEventListener("input",volumeChange,false);
volumeSlider.addEventListener("input",toggleIcon,false);
fullScreenToggler.addEventListener("click",enterFullScreen,false);
fullscreenHider.addEventListener("click",exitFullScreen,false);
document.addEventListener('webkitfullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);	
loop.addEventListener("click",loopVideo,false);
//Add some other settings
vid.controls = false;
vid.oncontextmenu = function(){return false;};
}

window.onload = intializePlayer;

//Video Functions
function exitHandler(){
"use strict";
  if (document.webkitIsFullScreen === false || document.mozFullScreen === false || document.msFullscreenElement === false){
   document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");	
    fullscreenHider.style.display = "none";
	fullScreenToggler.style.display = "inline-block";}
}
function playPauseVideo(){
"use strict";
	if(vid.paused){
		document.title = "►" + " " + document.title;
		vid.play();
		playPauseButton.innerHTML = '<i class="fa fa-pause" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>';}
	else {
		vid.pause();
		playPauseButton.innerHTML = '<i class="fa fa-play" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>';}
}
function timeSlider(){
"use strict";
	var slideTo = vid.duration * (seekSlider.value / 100);
	vid.currentTime = slideTo;
}
function videoTimeUpdate(){
"use strict";
	var timeInterval = vid.currentTime * (100 / vid.duration);
	seekSlider.value = timeInterval;
	var currentMinutes = Math.floor(vid.currentTime / 60);
	var currentSeconds = Math.floor(vid.currentTime - currentMinutes * 60);
	var durationMinutes = Math.floor(vid.duration / 60);
	var durationSeconds = Math.floor(vid.duration - durationMinutes * 60);
	if(currentSeconds < 10) {currentSeconds = "0"+ currentSeconds;}
	if(durationSeconds < 10) {durationSeconds = "0"+ durationSeconds;}
	if(currentMinutes < 10) {currentMinutes = "0"+ currentMinutes;}
	if(durationMinutes < 10) {durationMinutes = "0"+ durationMinutes;}
    currentTime.innerHTML = currentMinutes + ":" + currentSeconds; 
	vidDuration.innerHTML = durationMinutes + ":" + durationSeconds;
}
function volumeChange(){
"use strict";
	vid.volume = volumeSlider.value / 100;
}
function enterFullScreen(){
"use strict";
	if(vid.requestFullScreen){
		vid.requestFullScreen();}
	else if(vid.webkitRequestFullScreen){
		vid.webkitRequestFullScreen();}
	else if(vid.mozRequestFullScreen){
		vid.mozRequestFullScreen();}
	else if(vid.oRequestFullScreen){
		vid.oRequestFullScreen();}
	else if(vid.msRequestFullScreen){
		vid.msRequestFullScreen();}
	document.getElementsByClassName("videoControls")[0].classList.add("fullscreen");
	document.getElementsByClassName("fullscreen")[0].setAttribute("draggable","true");
    fullScreenToggler.style.display = "none";
	fullscreenHider.style.display = "inline-block";
	}
function exitFullScreen(){
"use strict";	
	if(document.cancelFullScreen){
		document.cancelFullScreen();}
	else if(document.webkitCancelFullScreen){
		document.webkitCancelFullScreen();}
	else if(document.mozCancelFullScreen){
		document.mozCancelFullScreen();}
	else if(document.oCancelFullScreen){
		document.oCancelFullScreen();}
	else if(document.msCancelFullScreenn){
		document.msCancelFullScreen();}
    document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");
    fullscreenHider.style.display = "none";
	fullScreenToggler.style.display = "inline-block";	
}
function loopVideo(){
"use strict"; 
	if(!loop.hasAttribute("style")){
		loop.setAttribute("style","opacity: 1; color: rgba(22,206,170,1.00);");
		vid.setAttribute("loop","");  
	}
	else {
		loop.removeAttribute("style");
		vid.removeAttribute("loop");
	}
}
function toggleIcon(){
"use strict";	
if(vid.volume <= 0.01){
		muteButton.innerHTML = '<i class="fa fa-volume-off" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';}
else if(vid.volume <= 0.42){
	muteButton.innerHTML = '<i class="fa fa-volume-down" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';}	
else {
	muteButton.innerHTML = '<i class="fa fa-volume-up" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';
}
}
var prev_level;

function muteUnmute(){
"use strict";
	if(vid.volume >= 0.03){
		prev_level = volumeSlider.value;
		volumeSlider.value = 0;
		vid.volume = volumeSlider.value;
		toggleIcon();
	}
    else if(vid.volume <= 0.05){
		volumeSlider.value= prev_level;
		vid.volume = volumeSlider.value / 100;
		toggleIcon();
	}
}

//KeyPress Fuctions

function pressSpaceToStart(e){
 "use strict"; 
	if(e.keyCode === 32){
	   e.preventDefault();
       playPauseVideo();}
}
window.onkeypress = function(o){"use strict"; pressSpaceToStart(o);};
window.onkeydown = function(o){"use strict"; pressSpaceToStart(o);};
@charset "UTF-8";
/* CSS Document */

/* Video Box Styling */
video::-webkit-media-controls, video::-webkit-media-controls-enclosure {display:none !important;}
section.videoSection {width: 100%; margin: auto; margin-top: 30px;}
div.mainVideo {text-align: center; width: 454px; margin: auto;}	
div.mainVideo video {width: 450px; border: 2px solid black; border-bottom: 0;}
div.videoControls {width: 450px; margin: -5px auto 0px; background-color: rgba(67,41,82,0.97); padding: 10px 0px 8px 0px; border: 2px solid black; color: snow; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
div.videoControls button {background-color: transparent; border: 0; opacity: 0.8;}
div.videoControls span {position: relative;}
div.videoControls button:hover {opacity: 1;}
/* Slider Styling */	
input[type=range] {-webkit-appearance: none; margin: 5.8px 0;}

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

input[type=range]::-webkit-slider-runnable-track {cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none; margin-top: -7.8px;}

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

input[type=range]::-moz-range-track {width: 100%; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}

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

input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}

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

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

/* Non fullscreen track and thumb width and height */

/* Track */
.videoControls input[type=range]::-webkit-slider-runnable-track {height: 6.4px;}
.videoControls input[type=range]::-moz-range-track {height: 6.4px;}
.videoControls input[type=range]::-ms-track {height: 6.4px;}

/* Thumb */
.videoControls input[type=range]::-webkit-slider-thumb {height: 20px; width: 8px;}
.videoControls input[type=range]::-moz-range-thumb {height: 20px; width: 8px;}
.videoControls input[type=range]::-ms-thumb {height: 20px; width: 8px;}

/* Video Controls Buttons Styling */
#playPauseButton {float: left; margin: -3px 1px 0px 3px;}
#loop {float: left; margin: 4px 5px 25px 3px;}
#seekSlider {width: 150px; float: left; margin: 10px 5px 0px -1px;}
div.mainVideo span {color: snow; font-size: 0.97em; display: inline-block; float: left; margin: 2.5px 0px 0px 1px;}
#muteUnmute {margin-top: -5px; float: left;}
#volumeSlider {width: 64px; margin: 10px 0px 0px 0px; float: left;}
#toggleFullScreen {margin: 0px 0px 0px 4px;}

/* Fullscreen settings -START-*/

.fullscreen {z-index: 2789034264 !important; position: absolute !important; width: 80% !important; bottom: 5.7% !important; left: 10% !important; right: 10% !important; height: 35px !important;}
.fullscreen button i {font-size: 2.5em !important;}
.fullscreen button#playPauseButton {margin-left: 0.2% !important; float: left !important;}
.fullscreen input#seekSlider {width: 48% !important; margin-left: 2px !important;} 
.fullscreen button#muteUnmute {margin-left: 0.5%; font-size: 0.98em; margin-top: -10px;}
.fullscreen span {font-size: 1.2em !important;}
.fullscreen input#volumeSlider {width: 12%; margin-left: 1%;}
#exitFullScreen {margin-left: 0.5%; margin-top: -3px;}

/* Fullscreen track and thumb width and height */

/* Track */
.fullscreen input[type=range]::-webkit-slider-runnable-track {height: 12.8px;}
.fullscreen input[type=range]::-moz-range-track {height: 12.8px;}
.fullscreen input[type=range]::-ms-track {height: 12.8px;}

/* Thumb */
.fullscreen input[type=range]::-webkit-slider-thumb {height: 32px; width: 12px; margin-top: -10px;}
.fullscreen input[type=range]::-moz-range-thumb {height: 32px; width: 12px; margin-top: -10px;}
.fullscreen input[type=range]::-ms-thumb {height: 32px; width: 12px; margin-top: -10px;}

/* Responsibility -START- */



/* Responsibility -END- */
/* Fullscreen setting -END- */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<section class="videoSection">
<div class="mainVideo">
	<video preload="auto" id="vid" onContextMenu="return false;">
		<source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
		<source type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"/>
		<img src="media/images/videoErr.png" alt="Your browser doesn't support HTML5 video." title="Your browser doesn't support HTML5 video."/>
	</video>	
  <div class="videoControls">
  	<button id="playPauseButton" title="Play/Pause">
  	<i class="fa fa-play" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>
  	</button>
  	<span id="timer">
  	<span id="done" title="Time couter from the start of the video">00:00</span>
  	<span>/</span>
  	<span id="duration" title="Video duration">00:00</span>
  	</span>
  	<button id="loop" title="Loop">
  	<i class="fa fa-repeat" aria-hidden="true" style="color: #09BF99; font-size: 1.5em"></i>
  	</button>
  	<input type="range" step="1" min="0" max="100" value="0" id="seekSlider" title="Slider" style=""/>
  	<button id="muteUnmute" title="Mute/Unmute">
  	<i class="fa fa-volume-up" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>
  	</button>
  	<input type="range" step="1" min="0" max="100" value="100" id="volumeSlider" title="Volume level"/>
  	<button id="exitFullScreen" style="display: none; font-size: 0.95em" title="Exit fullscreen">
  	<i class="fa fa-sign-out" aria-hidden="true" style="color: whitesmoke;"></i>
  	</button>
  	<button id="toggleFullScreen" title="Enter fullscreen">
  	<i class="fa fa-arrows-alt" aria-hidden="true" style="color: whitesmoke; font-size: 2em;"></i>
  	</button>
  </div>
</div>	
</section>

现在还有一些图片：

【问题讨论】：

  • stackoverflow.com/a/31710969/334402 - 可能有用的参考
  • @Mick 差不多。但是我的控件栏有position absolute 而不是fixed。
  • 为什么不用视频JS？
  • 顺便说一句，它在这里工作正常，您使用的是哪个版本？
  • @IsmailFarooq 你知道，我正在尝试学习如何自己创建一个网络播放器。我正在使用最新版本的 Firefox。

标签： javascript html css firefox video


【解决方案1】：

酷项目！

根据我的经验，Firefox 全屏模式有很多怪癖。一般来说，对于 Firefox，您最好在包含 DIV 上设置全屏模式，而不是在感兴趣的元素本身上设置。在这种情况下，您可以将其设置为class=mainVideo 而不是id=vid。可能有更简单的方法可以做到这一点，但以下似乎对我有用（我已经在 Chrome 和 Firefox 中测试过——不确定其他浏览器）：

在脚本顶部添加全局变量以存储对mainVideo div 的引用，以及mainVideo 和vid 的尺寸：

var mainVideo, mainVideoHeight, mainVideoWidth, vidHeight, vidWidth;

分配给initializePlayer()中的这些变量：

vid = document.getElementById("vid");
mainVideo = document.getElementsByClassName('mainVideo')[0];
vidHeight = vid.clientHeight;
vidWidth = vid.clientWidth;
mainVideoHeight = mainVideo.clientHeight;
mainVideoWidth = mainVideo.clientWidth;

修改enterFullScreen()，指定vid和mainVideo的宽高等于屏幕宽高，并在mainVideo而不是vid上请求全屏： 

function enterFullScreen(){
"use strict";

  if(mainVideo.requestFullScreen){
    mainVideo.requestFullScreen();}
  else if(mainVideo.webkitRequestFullScreen){
    mainVideo.webkitRequestFullScreen();}
  else if(mainVideo.mozRequestFullScreen){
    mainVideo.mozRequestFullScreen();}
  else if(mainVideo.oRequestFullScreen){
    mainVideo.oRequestFullScreen();}
  else if(mainVideo.msRequestFullScreen){
    mainVideo.msRequestFullScreen();}
  document.getElementsByClassName("videoControls")[0].classList.add("fullscreen");
  document.getElementsByClassName("fullscreen")[0].setAttribute("draggable","true");

  fullScreenToggler.style.display = "none";
  fullscreenHider.style.display = "inline-block";

  vid.style.width = screen.width + 'px';
  vid.style.height = screen.height + 'px';
  mainVideo.style.width = screen.width + 'px';
  mainVideo.style.height = screen.height + 'px';
}

在exitFullScreen() 的末尾添加附加代码，将vid 和mainVideo 的宽度和高度重置为原始存储的宽度和高度：

   vid.style.width = vidWidth + 'px';
   vid.style.height = vidHeight + 'px';
   mainVideo.style.width = mainVideoWidth + 'px';
   mainVideo.style.height = mainVideoHeight + 'px';

以下是我测试的完整代码。 如果您单击“运行代码 sn-p”，它将不起作用。您必须复制到本地文件并在浏览器中打开。

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <style>
  @charset "UTF-8";
/* CSS Document */

/* Video Box Styling */
video::-webkit-media-controls, video::-webkit-media-controls-enclosure {display:none !important;}
section.videoSection {width: 100%; margin: auto; margin-top: 30px;}
div.mainVideo {text-align: center; width: 454px; margin: auto} 
div.mainVideo video {width: 450px; border: 2px solid black; border-bottom: 0}
div.videoControls {width: 450px; margin: -5px auto 0px; background-color: rgba(67,41,82,0.97); padding: 10px 0px 8px 0px; border: 2px solid black; color: snow; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
div.videoControls button {background-color: transparent; border: 0; opacity: 0.8;}
div.videoControls span {position: relative;}
div.videoControls button:hover {opacity: 1;}
/* Slider Styling */  
input[type=range] {-webkit-appearance: none; margin: 5.8px 0;}

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

input[type=range]::-webkit-slider-runnable-track {cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none; margin-top: -7.8px;}

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

input[type=range]::-moz-range-track {width: 100%; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}

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

input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}

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

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

/* Non fullscreen track and thumb width and height */

/* Track */
.videoControls input[type=range]::-webkit-slider-runnable-track {height: 6.4px;}
.videoControls input[type=range]::-moz-range-track {height: 6.4px;}
.videoControls input[type=range]::-ms-track {height: 6.4px;}

/* Thumb */
.videoControls input[type=range]::-webkit-slider-thumb {height: 20px; width: 8px;}
.videoControls input[type=range]::-moz-range-thumb {height: 20px; width: 8px;}
.videoControls input[type=range]::-ms-thumb {height: 20px; width: 8px;}

/* Video Controls Buttons Styling */
#playPauseButton {float: left; margin: -3px 1px 0px 3px;}
#loop {float: left; margin: 4px 5px 25px 3px;}
#seekSlider {width: 150px; float: left; margin: 10px 5px 0px -1px;}
div.mainVideo span {color: snow; font-size: 0.97em; display: inline-block; float: left; margin: 2.5px 0px 0px 1px;}
#muteUnmute {margin-top: -5px; float: left;}
#volumeSlider {width: 64px; margin: 10px 0px 0px 0px; float: left;}
#toggleFullScreen {margin: 0px 0px 0px 4px;}

/* Fullscreen settings -START-*/

.fullscreen {z-index: 2789034264 !important; position: absolute !important; width: 80% !important; bottom: 5.7% !important; left: 10% !important; right: 10% !important; height: 35px !important;}
.fullscreen button i {font-size: 2.5em !important;}
.fullscreen button#playPauseButton {margin-left: 0.2% !important; float: left !important;}
.fullscreen input#seekSlider {width: 48% !important; margin-left: 2px !important;} 
.fullscreen button#muteUnmute {margin-left: 0.5%; font-size: 0.98em; margin-top: -10px;}
.fullscreen span {font-size: 1.2em !important;}
.fullscreen input#volumeSlider {width: 12%; margin-left: 1%;}
#exitFullScreen {margin-left: 0.5%; margin-top: -3px;}

/* Fullscreen track and thumb width and height */

/* Track */
.fullscreen input[type=range]::-webkit-slider-runnable-track {height: 12.8px;}
.fullscreen input[type=range]::-moz-range-track {height: 12.8px;}
.fullscreen input[type=range]::-ms-track {height: 12.8px;}

/* Thumb */
.fullscreen input[type=range]::-webkit-slider-thumb {height: 32px; width: 12px; margin-top: -10px;}
.fullscreen input[type=range]::-moz-range-thumb {height: 32px; width: 12px; margin-top: -10px;}
.fullscreen input[type=range]::-ms-thumb {height: 32px; width: 12px; margin-top: -10px;}

/* Responsibility -START- */



/* Responsibility -END- */
/* Fullscreen setting -END- */
  </style>
</head>
<body>
  <section class="videoSection">
  <div class="mainVideo">
    <video preload="auto" id="vid" onContextMenu="return false;">
      <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
      <source type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"/>
      <img src="media/images/videoErr.png" alt="Your browser doesn't support HTML5 video." title="Your browser doesn't support HTML5 video."/>
    </video>  
    <div class="videoControls">
      <button id="playPauseButton" title="Play/Pause">
      <i class="fa fa-play" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>
      </button>
      <span id="timer">
      <span id="done" title="Time couter from the start of the video">00:00</span>
      <span>/</span>
      <span id="duration" title="Video duration">00:00</span>
      </span>
      <button id="loop" title="Loop">
      <i class="fa fa-repeat" aria-hidden="true" style="color: #09BF99; font-size: 1.5em"></i>
      </button>
      <input type="range" step="1" min="0" max="100" value="0" id="seekSlider" title="Slider" style=""/>
      <button id="muteUnmute" title="Mute/Unmute">
      <i class="fa fa-volume-up" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>
      </button>
      <input type="range" step="1" min="0" max="100" value="100" id="volumeSlider" title="Volume level"/>
      <button id="exitFullScreen" style="display: none; font-size: 0.95em" title="Exit fullscreen">
      <i class="fa fa-sign-out" aria-hidden="true" style="color: whitesmoke;"></i>
      </button>
      <button id="toggleFullScreen" title="Enter fullscreen">
      <i class="fa fa-arrows-alt" aria-hidden="true" style="color: whitesmoke; font-size: 2em;"></i>
      </button>
    </div>
  </div>  
  </section>
</body>
<script>

var vid, playPauseButton, seekSlider, currentTime, vidDuration, muteButton, volumeSlider, fullScreenToggler, loop, fullscreenHider;
var mainVideo, mainVideoHeight, mainVideoWidth, vidHeight, vidWidth;



function intializePlayer(){
"use strict"; 



// Set object references  
vid = document.getElementById("vid");
mainVideo = document.getElementsByClassName('mainVideo')[0];
vidHeight = vid.clientHeight;
vidWidth = vid.clientWidth;
mainVideoHeight = mainVideo.clientHeight;
mainVideoWidth = mainVideo.clientWidth;

playPauseButton = document.getElementById("playPauseButton");
seekSlider = document.getElementById("seekSlider");
currentTime = document.getElementById("done");
vidDuration = document.getElementById("duration");
muteButton = document.getElementById("muteUnmute");
volumeSlider = document.getElementById("volumeSlider");
fullScreenToggler = document.getElementById("toggleFullScreen");
loop = document.getElementById("loop");
fullscreenHider = document.getElementById("exitFullScreen");
// Add event listeners
playPauseButton.addEventListener("click",playPauseVideo,false);
seekSlider.addEventListener("input",timeSlider,false);
vid.addEventListener("timeupdate",videoTimeUpdate,false);
muteButton.addEventListener("click",muteUnmute,false);
volumeSlider.addEventListener("input",volumeChange,false);
volumeSlider.addEventListener("input",toggleIcon,false);
fullScreenToggler.addEventListener("click",enterFullScreen,false);
fullscreenHider.addEventListener("click",exitFullScreen,false);
document.addEventListener('webkitfullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);  
loop.addEventListener("click",loopVideo,false);
//Add some other settings
vid.controls = false;
vid.oncontextmenu = function(){return false;};
}

window.onload = intializePlayer;

//Video Functions
function exitHandler(){
"use strict";
  if (document.webkitIsFullScreen === false || document.mozFullScreen === false || document.msFullscreenElement === false){
   document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");  
    fullscreenHider.style.display = "none";
  fullScreenToggler.style.display = "inline-block";}
}
function playPauseVideo(){
"use strict";
  if(vid.paused){
    document.title = "►" + " " + document.title;
    vid.play();
    playPauseButton.innerHTML = '<i class="fa fa-pause" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>';}
  else {
    vid.pause();
    playPauseButton.innerHTML = '<i class="fa fa-play" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>';}
}
function timeSlider(){
"use strict";
  var slideTo = vid.duration * (seekSlider.value / 100);
  vid.currentTime = slideTo;
}
function videoTimeUpdate(){
"use strict";
  var timeInterval = vid.currentTime * (100 / vid.duration);
  seekSlider.value = timeInterval;
  var currentMinutes = Math.floor(vid.currentTime / 60);
  var currentSeconds = Math.floor(vid.currentTime - currentMinutes * 60);
  var durationMinutes = Math.floor(vid.duration / 60);
  var durationSeconds = Math.floor(vid.duration - durationMinutes * 60);
  if(currentSeconds < 10) {currentSeconds = "0"+ currentSeconds;}
  if(durationSeconds < 10) {durationSeconds = "0"+ durationSeconds;}
  if(currentMinutes < 10) {currentMinutes = "0"+ currentMinutes;}
  if(durationMinutes < 10) {durationMinutes = "0"+ durationMinutes;}
    currentTime.innerHTML = currentMinutes + ":" + currentSeconds; 
  vidDuration.innerHTML = durationMinutes + ":" + durationSeconds;
}
function volumeChange(){
"use strict";
  vid.volume = volumeSlider.value / 100;
}

function enterFullScreen(){
"use strict";
  
  if(mainVideo.requestFullScreen){
    mainVideo.requestFullScreen();}
  else if(mainVideo.webkitRequestFullScreen){
    mainVideo.webkitRequestFullScreen();}
  else if(mainVideo.mozRequestFullScreen){
    mainVideo.mozRequestFullScreen();}
  else if(mainVideo.oRequestFullScreen){
    mainVideo.oRequestFullScreen();}
  else if(mainVideo.msRequestFullScreen){
    mainVideo.msRequestFullScreen();}
  document.getElementsByClassName("videoControls")[0].classList.add("fullscreen");
  document.getElementsByClassName("fullscreen")[0].setAttribute("draggable","true");

  fullScreenToggler.style.display = "none";
  fullscreenHider.style.display = "inline-block";
  vid.style.width = screen.width + 'px';
  vid.style.height = screen.height + 'px';
  mainVideo.style.width = screen.width + 'px';
  mainVideo.style.height = screen.height + 'px';
}

function exitFullScreen(){
"use strict"; 
  if(document.cancelFullScreen){
    document.cancelFullScreen();}
  else if(document.webkitCancelFullScreen){
    document.webkitCancelFullScreen();}
  else if(document.mozCancelFullScreen){
    document.mozCancelFullScreen();}
  else if(document.oCancelFullScreen){
    document.oCancelFullScreen();}
  else if(document.msCancelFullScreenn){
    document.msCancelFullScreen();}
    document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");
    fullscreenHider.style.display = "none";
   fullScreenToggler.style.display = "inline-block";

   vid.style.width = vidWidth + 'px';
   vid.style.height = vidHeight + 'px';
   mainVideo.style.width = mainVideoWidth; + 'px'
   mainVideo.style.height = mainVideoHeight + 'px';
}

function loopVideo(){
"use strict"; 
  if(!loop.hasAttribute("style")){
    loop.setAttribute("style","opacity: 1; color: rgba(22,206,170,1.00);");
    vid.setAttribute("loop","");  
  }
  else {
    loop.removeAttribute("style");
    vid.removeAttribute("loop");
  }
}
function toggleIcon(){
"use strict"; 
if(vid.volume <= 0.01){
    muteButton.innerHTML = '<i class="fa fa-volume-off" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';}
else if(vid.volume <= 0.42){
  muteButton.innerHTML = '<i class="fa fa-volume-down" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';}  
else {
  muteButton.innerHTML = '<i class="fa fa-volume-up" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';
}
}
var prev_level;

function muteUnmute(){
"use strict";
  if(vid.volume >= 0.03){
    prev_level = volumeSlider.value;
    volumeSlider.value = 0;
    vid.volume = volumeSlider.value;
    toggleIcon();
  }
    else if(vid.volume <= 0.05){
    volumeSlider.value= prev_level;
    vid.volume = volumeSlider.value / 100;
    toggleIcon();
  }
}

//KeyPress Fuctions

function pressSpaceToStart(e){
 "use strict"; 
  if(e.keyCode === 32){
     e.preventDefault();
       playPauseVideo();}
}
window.onkeypress = function(o){"use strict"; pressSpaceToStart(o);};
window.onkeydown = function(o){"use strict"; pressSpaceToStart(o);};
</script>

</html>

【讨论】：

  • 非常感谢。您的脚本效果很好，但是！我会在这里贴一些图片。希望你能更新你的答案。 PS：也许会有用：我使用的是运行 OS X 的 iMac 21.5。也许你使用的是 Windows，一切正常。图片：Chrome,Opera and Safari、Firefox.
  • 如果您将我的答案中的最后一个代码 sn-p 复制到本地加载的 html 文档中，您会得到预期的外观吗？它适用于 Mac 上的 Chrome 和 Firefox 以及 Linux 上的 Chrome 和 Firefox。如果enterFullScreen 中的以下代码行不知何故不起作用，您显示的图像将与会发生的情况一致：` vid.style.width = screen.width; vid.style.height = screen.height; mainVideo.style.width = screen.width; mainVideo.style.height = screen.height;` 或者您正在使用的文档不同，因此这些样式更改不起作用。
  • 问题是由于某种原因属性style在切换到全屏模式后没有添加，并且在进入常规模式后没有删除。
  • 您能否分享您正在使用的完整页面，以便我们进行故障排除？它与我创建的演示一起使用但与您正在使用的代码一起使用这一事实表明存在一些差异，阻止了 style 更改应用于您的案例。但是如果不能使用损坏的代码，就很难知道。
  • 我可以将 HTML 文件上传到流行的文件共享服务吗？这会是一个好的决定吗？
【解决方案2】：

我以前没有玩过这个，但我希望这可以帮助你。

我看过以下帖子：https://css-tricks.com/custom-controls-in-html5-video-full-screen/

查看帖子中的主题： 通过将 video 元素的 controls 属性设置为 false，我们可以隐藏控件，但由于某种原因，当进入全屏模式时，它们会重新出现，尽管在普通屏幕模式下被隐藏。 （为什么？）

那么 firefox 真的不是正确的，或者表现得像它应该的那样吗？

您可以做的一个测试是将 video 元素的 controls 属性设置为 true，然后查看它在所有浏览器中的作用。 vid.controls = true;

希望它能给你方向或尝试。

【讨论】：

  • Controls false 运行良好，但我需要显示我该死的自定义控件栏。
  • vid.controls = false 隐藏 Firefox 中的默认控制栏。 vid.controls = true 显示它们。这是意料之中的。
  • 你试过 css: .custom-video-controls { z-index: 2147483647; } “将它设置为 2147483646 会使控件在 Firefox 上以全屏模式消失，有时（一个错误？）在 Chrome 中，因此控件容器的 z-index 应该 >= 2147483647。”
  • 是的，适用于 Chrome、Opera 和 Safari。但不适用于 Firefox 和基于 Firefox 的浏览器。
  • 从 Firefox 查看时，用户代理样式表提供的 z-index 是什么？
猜你喜欢
  • 1970-01-01
  • 2012-09-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-13
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode