2
我想製作一個自定義的視頻播放器，顯然我想要一個全屏按鈕。當我點擊它時，它會全屏顯示，但不會填滿整個屏幕。順便說一句，我只是想使用JavaScript，css3和html5。任何幫助將不勝感激。謝謝。全屏按鈕不工作
而且一切的辦法是設置是：
除法：視頻，範圍，DIV，enddiv，endiv
我希望第一個分壓器與裏面的一切全屏走。 請檢查我下面的代碼：
var vid, playbtn, seekslider, mutebtn, volumeslider, oldvol, fullscreenbtn, vidplr, cross, warning, isFullscreen;
function initializePlayer(){
//Set object references
vid = document.getElementById("video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
fullscreenbtn = document.getElementById("fullscreenbtn");
vidplr = document.getElementById("videoplayer");
cross = document.getElementById("cross");
warning = document.getElementById("warning");
isFullscreen = false;
//Add event listeners
playbtn.addEventListener("click", playPause, false);
seekslider.addEventListener("change", vidSeek, false);
vid.addEventListener("timeupdate", seektimeupdate, false);
mutebtn.addEventListener("click", vidmute, false);
volumeslider.addEventListener("change", setvolume, false);
fullscreenbtn.addEventListener("click", toggleFullScreen, false);
cross.addEventListener("click", removewarning, false);
vid.addEventListener("click", playPause, false);
//IfChrome
var isChromium = window.chrome,
winNav = window.navigator,
vendorName = winNav.vendor,
isOpera = winNav.userAgent.indexOf("OPR") > -1,
isIEedge = winNav.userAgent.indexOf("Edge") > -1,
isIOSChrome = winNav.userAgent.match("CriOS");
if(isIOSChrome){
// is Google Chrome on IOS
warning.parentNode.removeChild(warning);
} else if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false && isIEedge == false) {
// is Google Chrome
warning.parentNode.removeChild(warning);
} else {
// not Google Chrome
//ERROR! DISPLAY WARNING
}
}
window.onload = initializePlayer;
function removewarning() {
warning.parentNode.removeChild(warning);
}
function playPause() {
if (vid.paused) {
vid.play();
playbtn.style.background = "url(pause.png)";
} else {
vid.pause();
playbtn.style.background = "url(play.png)";
}
}
function vidSeek(){
var seekto = vid.duration * (seekslider.value/700);
vid.currentTime = seekto;
}
function seektimeupdate(){
var nt = vid.currentTime * (700/vid.duration);
seekslider.value = nt;
}
function vidmute() {
if(vid.muted){
volumeslider.value = oldvol;
vid.muted = false;
mutebtn.style.background = "url(unmuted.png)";
} else {
oldvol = volumeslider.value;
volumeslider.value = 0;
vid.muted = true;
mutebtn.style.background = "url(muted.png)";
}
}
function setvolume(){
vid.volume = volumeslider.value/100;
}
function toggleFullScreen() {
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (vidplr.requestFullscreen) {
vidplr.requestFullscreen();
} else if (vidplr.msRequestFullscreen) {
vidplr.msRequestFullscreen();
} else if (vidplr.mozRequestFullScreen) {
vidplr.mozRequestFullScreen();
} else if (vidplr.webkitRequestFullscreen) {
vidplr.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}video::-webkit-media-controls {
display: none;
}
div#videocontroller {
background: #dedbc4;
}
body {
background:#e4e4e4;
}
div#videoplayer {
width:640px;
height:401px;
}
input#seekslider {
width:640px;
background: #93C97E;
height:4px;
}
input#seekslider::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:url(seekersliderhandle.png);
height:19px;
width:19px;
border-radius:3px;
cursor:pointer;
border:0px solid #000000;
}
button#playpausebtn{
background:url(pause.png);
border:none;
width:33px;
height:25px;
cursor:pointer;
opacity:0.5;
}
button#playpausebtn:hover{ opacity:1; }
input#volumeslider{ width: 80px;}
input[type='range'] {
-webkit-appearance: none !important;
background: #000;
border:#666 1px solid;
height:4px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: #FFF;
height:15px;
width:15px;
border-radius:100%;
cursor:pointer;
}
input#volumeslider{
top: 50%;
}
button#mutebtn{
background:url(unmuted.png);
border:none;
width:20px;
height:25px;
cursor:pointer;
opacity:0.5;
}
button#fullscreenbtn{
background:url(isfullscreen.png);
border:none;
width:29px;
height:25px;
cursor:pointer;
opacity:0.5;
}
div#warning{
border-style:solid;
border-color:#7F0000;
background:#FFADAD;
padding:0px;
}
p#chromewarningtext{
color:#FF0000;
font-family: "Arial", "Verdana";
font-weight: bold;
font-size: 12px;
}
button#cross{
font-family: "Arial", "Verdana";
font-size: 16px;
position: absolute;
right: 20px;
top:20px;
background:#FFADAD;
border:none;
cursor:pointer;
opacity:0.5;
}
video{
width:640px;
height:360px;
}
div#videoplayer.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
video.fullscreen{
z-index: 9999;
width: screen.width;
height: screen.height-41px;
position: fixed;
top: 0;
left: 0;
}<div id="warning">
<p id="chromewarningtext">This site works best on Google Chrome. Broken features won't be fixed on other browsers.<a id="chromelink" href="https://www.google.com/intl/en/chrome/browser/">Download Google Chrome now.</a></p><button id="cross">x</button>
</div>
<div id="videoplayer">
<video id="video" preload autoplay>
<source src="../theuploads.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
<div id="controlbar">
<input id="seekslider" type="range" min="0" max="700" value="0" step="1">
<div id="videocontroller">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<button id="fullscreenbtn"></button>
</div>
</div>
</div>
不要添加所有的代碼在這裏，但更好的方法是嘗試加入不同的部分，並與標題您的代碼並分成 – M98