Question

我正在尝试制作自定义视频播放器，显然我想要一个全屏按钮。当我点击它时，它会进入全屏，但不会填满整个屏幕。顺便说一下，我只是想尝试使用javascript，css3和html5。任何帮助将不胜感激。感谢。

所有设置方式都是：

divider：video，range，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>

Answer 1

你的CSS中有一个video.fullscreen，但你在JS中没有分配该类。你将在全屏函数中做一些class.add / class.remove。

这是一个正确捕捉ESC按钮的工作示例，等等。

    <!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      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: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

    </style>
 </head>
  <script>
    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);
      document.addEventListener("fullscreenchange", exitHandler, false);
      document.addEventListener("webkitfullscreenchange", exitHandler, false);
      document.addEventListener("mozfullscreenchange", exitHandler, 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 exitHandler() {
    var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
    if (fullscreenElement == null) {
      vid.classList.remove('fullscreen');
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
}

    function toggleFullScreen(e) {
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    vid.classList.add('fullscreen');
    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);
    }
  }
}
  </script>
  <body>
    <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="testvid.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" title="fullscreen"></button>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 2

尝试将100vh用于height，100vw用于宽度而不是100%

全屏按钮不起作用

2 个答案: