Html5全屏视频

有没有办法做到这一点？我想全屏播放视频。没有浏览器。设置<代码>宽度：100%；身高：100%保持浏览器可见不，现在还没有办法。我希望他们在浏览器中添加这样的未来

编辑：

现在有了一个web应用程序，您可以

在视频或画布元素上请求全屏

，要求用户给予您许可并使其全屏显示

让我们考虑这个元素：

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

---

您可以使用jQuery来完成

我有自己的

视频和控件，如下所示：

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}

<div id="videoPlayer" style="width:520px; -webkit-border-radius:10px; height:420px; background-color:white; position:relative; float:left; left:25px; top:55px;" align="center">

    <video controls width="500" height="400" style="background-color:black; margin-top:10px; -webkit-border-radius:10px;">
         <source src="videos/gin.mp4" type="video/mp4" />
    </video>

    <script>  
        video.removeAttribute('controls');  
    </script> 

    <div id="vidControls" style="position:relative; width:100%; height:50px; background-color:white; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; padding-top:10px; padding-bottom:10px;">

         <table width="100%" height="100%" border="0">

             <tr>
                 <td width="100%" align="center" valign="middle" colspan="4"><input class="vidPos" type="range" value="0" step="0.1" style="width:500px;" /></td>
             </tr>

             <tr>
                 <td width="100%" align="center" valign="middle"><a href="javascript:;" class="playVid">Play</a></td>
                 <td width="100%" align="center" valign="middle"><a href="javascript:;" class="vol">Vol</a></td>
                 <td width="100%" align="left" valign="middle"><p class="timer"><strong>0:00</strong> / 0:00</p></td>
                 <td width="100%" align="center" valign="middle"><a href="javascript:;" class="fullScreen">Full</a></td>
              </tr>

            </table>

         </div>

      </div>

video.removeAttribute（“控件”）；
0:00/0:00

然后我对.fullscreen类的jQuery是：

var fullscreen = 0;

$(".fullscreen").click(function(){
  if(fullscreen == 0){
    fullscreen = 1;
    $("video").appendTo('body');
    $("#vidControls").appendTo('body');
    $("video").css('position', 'absolute').css('width', '100%').css('height', '90%').css('margin', 0).css('margin-top', '5%').css('top', '0').css('left', '0').css('float', 'left').css('z-index', 600);
    $("#vidControls").css('position', 'absolute').css('bottom', '5%').css('width', '90%').css('backgroundColor', 'rgba(150, 150, 150, 0.5)').css('float', 'none').css('left', '5%').css('z-index', 700).css('-webkit-border-radius', '10px');

}
else
    {

        fullscreen = 0;

        $("video").appendTo('#videoPlayer');
        $("#vidControls").appendTo('#videoPlayer');

        //change <video> css back to normal

        //change "#vidControls" css back to normal

    }

});

var全屏=0；
$（“.fullscreen”）。单击（函数（）{
如果（全屏==0）{
全屏=1；
$（“视频”）。附录（“正文”）；
$（“#vidControls”）.appendTo（'body'）；
$（“视频”）.css（'position'，'absolute'）.css（'width'，'100%'）.css（'height'，'90%'）.css（'margin'，'0'）.css（'margin-top'，'5%'）.css（'top'，'0'）.css（'left'，'0'）.css（'float'，'left'）.css（'z-index'，600）；
$（“#vidControls”）.css（'position'，'absolute'）.css（'bottom'，'5%'）.css（'width'，'90%'）.css（'backgroundColor'，'rgba（150，150，150，0.5'））.css（'float'，'none'）.css（'left'，'5%'）.css（'z-index'，700.css（'-webkit border radius'，'10px'）；
}
其他的
{
全屏=0；
$（“视频”）。附加到（“#视频播放器”）；
$（“#VideControls”）.appendTo（“#videoPlayer”）；
//将css更改回正常状态
//将“#vidControls”css更改回正常状态
}
});

它需要一点清理，因为我还在处理它，但就我所见，这应该适用于大多数浏览器

---

希望有帮助

您可以使用具有全屏播放选项的html5视频播放器。 这是一个非常好的html5播放器来看看
所有人都欢迎HTML5_/\_

来自CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

下面是一个非常简单的方法（3行代码），使用我使用的and方法，它兼容所有流行浏览器：

var elem=document.getElementsByTagName（'video'）[0]；
var fullscreen=elem.webkitRequestFullscreen | | elem.mozRequestFullScreen | | elem.msRequestFullscreen；
全屏。呼叫（elem）；//从视频对象绑定“this”，并实例化正确的全屏方法。

将对象匹配：封面添加到视频样式中

<video controls style="object-fit: cover;" >

对于Edge或IE浏览器，可能也会添加以下内容：

否则如果（elem.msRequestFullscreen）{elem.msRequestFullscreen（）；}

@mohsen如何删除默认控件并将自定义控件保持全屏？@aeid最好的方法是将视频和控件包装在div中并全屏显示div，下面是一个粗略的示例：

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

<video controls style="object-fit: cover;" >