在Firefox

时间：2017-04-25 14:43:07

标签： javascript html css firefox video

这里有一个难题：我的视频控件栏没有在Firefox中以全屏模式显示。在Chrome，Opera，Safari中，一切都是“路易斯商店中的Gucci”（由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>

现在有些图片：

Chrome Opera Safari Firefox

2 个答案:

答案 0 :(得分：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';

以下是我测试的完整代码。 如果您点击“运行代码段”，它将无效。您必须复制到本地文件并在浏览器中打开。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

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

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

所以firefox实际上不是正确的，或者表现得像它应该的那样？

您可以执行的测试是将视频元素的controls属性设置为true，并查看它在所有浏览器中的作用。 vid.controls = true;

希望它能为你提供方向或尝试。

相关问题
最新问题