html5全屏视频

Posted 2023-05-07

【中文标题】html5全屏视频

【英文标题】：Html5 Full screen video

【发布时间】：2011-08-27 17:59:04

【问题描述】：

有没有办法做到这一点？我想全屏播放视频。没有浏览器。设置width:100%; height:100%; 保持浏览器可见

【问题讨论】：

Is there a way to make html5 video fullscreen?的可能重复

【参考方案1】：

不，目前还没有办法做到这一点。我希望他们在浏览器中添加这样的未来。

编辑：

现在有一个用于网络的Full Screen API 您可以在视频或画布元素上requestFullscreen 要求用户授予您权限并使其全屏显示.

让我们考虑这个元素：

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

我们可以使用这样的脚本将该视频置于全屏模式：

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();

Full documentation

【讨论】：

对于 Edge 或 IE 浏览器添加：else if (elem.msRequestFullscreen) elem.msRequestFullscreen();

@mohsen 如何删除默认控件并保持自定义控件全屏显示？

@aeid 最好的方法是将视频和您的控件包装在 div 中并全屏显示 div，这是一个粗略的示例：codepen.io/lagged/pen/ppZNeB

@dab，您的视频不会改变大小。

【参考方案2】：

来自 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】：

万岁 HTML5 _/\_

var videoElement = document.getElementById('videoId');    
videoElement.webkitRequestFullScreen();

【参考方案4】：

这是一个非常简单的方法（3行代码），使用我使用的Fullscreen API和RequestFullscreen方法，兼容所有流行的浏览器：

var elem = document.getElementsByTagName('video')[0];
var fullscreen = elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
fullscreen.call(elem); // bind the 'this' from the video object and instantiate the correct fullscreen method.

浏览器兼容性： MDN & Can I use

【参考方案5】：

你可以用 jQuery 做到这一点。

我在自己的<div> 中有我的视频和控件，如下所示：

<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   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   border="0">

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

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

            </table>

         </div>

      </div>

然后我的 .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

    

);

它需要一些清理，因为我仍在努力，但据我所知，这应该适用于大多数浏览器。

希望对你有帮助！

【参考方案6】：

您可以使用具有全屏播放选项的 html5 视频播放器。 这是一个非常好的html5播放器来看看。 http://sublimevideo.net/

【参考方案7】：

    if (vi_video[0].exitFullScreen) vi_video[0].exitFullScreen();
    else if (vi_video[0].webkitExitFullScreen) vi_video[0].webkitExitFullScreen();
    else if (vi_video[0].mozExitFullScreen) vi_video[0].mozExitFullScreen();
    else if (vi_video[0].oExitFullScreen) vi_video[0].oExitFullScreen();
    else if (vi_video[0].msExitFullScreen) vi_video[0].msExitFullScreen();
    else  vi_video.parent().append(vi_video.remove()); 

【参考方案8】：

添加 object-fit:cover 到视频的样式

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