1. 首页
  2. 问答
  3. 在Firefox中显示自定义视频控制栏

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

2017-04-25 96 views
1

这里遇到了难题：我的视频控件栏并未在Firefox中以全屏模式显示。在Chrome，Opera，Safari中，一切都是“Gucci在Louis商店中”（由z-index: 2789034264 !important完成），但在Firefox中它忽略了z-index。主要功能名称是exitHandler(),enterFullScreen()和exitFullScreen()。全部代码在这里：在Firefox中显示自定义视频控制栏

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

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

 
//KeyPress Fuctions 
 

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

现在一些图片：

ChromeOpera SafariFirefox

来源

2017-04-25 Eugen Eray

+0

http://stackoverflow.com/a/31710969/334402 - 也许有用的参考 – Mick

+0

@Mick差不多。但是我的'绝对位置'不是'固定'我的控制栏。 –

+0

为什么不使用视频JS？ –

回答

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';

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

<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>

来源

2017-05-05 23:57:07 cjg

+0

巨大的感谢。你的剧本效果不错，但！我会在这里粘贴一些图片。希望你能更新你的答案。PS：也许会很有用：我使用运行OS X的iMac 21.5。也许你使用Windows，并且一切正常。图片：[Chrome，Opera和Safari]（http://i.imgur.com/asaDIaF.png），[Firefox]（http://i.imgur.com/8n9ZKyV.png）。 –

+0

如果您将我的答案中的最后一个代码片段复制到您在本地加载的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;'或者你正在使用的文档不同，这些样式更改不起作用。 – cjg

+0

事情是由于某种原因属性'style'在切换到全屏模式后没有添加，并且在进入正常模式后没有删除。 –

0

我还没有在这之前各地播放，但我希望这可以帮助您。

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

看到帖子的题目是： 通过设置控件属性的视频元素设定为假的，我们能够隐藏控件但对于一些原因，当进入全屏模式时，尽管它们被隐藏在正常屏幕模式下，但它们仍会重新出现。 （为什么？）

因此，Firefox实际上不是正确的或行为像它应该？

您可以做的测试是将video元素的controls属性设置为true，并查看它在所有浏览器中的功能。 vid.controls = true;

希望它给你方向或尝试。

来源

2017-05-05 10:18:20 Renier

+0

控制false是工作很好，但我需要显示我该死的自定义控件栏。 –

+0

'vid.controls = false'隐藏Firefox中的默认控制栏。 'vid.controls = true'显示它们。这是预期的。 –

+0

您是否尝试过css：.custom-video-controls {{0} {0} {{0} x} z-index：2147483647; }“将其设置为2147483646使得控件在Firefox中以全屏模式消失，并且在Chrome中有时（错误？），因此控件容器的z-index应该大于等于2147483647。” – Renier

相关问题

 相关问题