Safari html5 视频全屏大小

Posted 2023-02-19

【中文标题】Safari html5 视频全屏大小

【英文标题】：Safari html5 video fullscreen size

【发布时间】：2015-02-11 16:39:50

【问题描述】：

在 OSX Safari 上，全屏点击时的 html5 视频标签。如何强制视频覆盖全屏，而不是显示带有黑色背景的小尺寸（可能是原始尺寸）？

【问题讨论】：

最好提供一些您尝试过的代码。

在大多数浏览器上都可以正常工作在 OSX 上。

我有同样的问题，我的代码类似于@TheCrazyProfessor 的答案，我有@Jack 建议的max-height，但仍然有同样的问题。您找到有效的答案了吗？

【参考方案1】：

好的，找到了。设置最大高度时需要一些 CSS。答：

video:-webkit-full-screen 
   width: 100%;
   height: 100%;
   max-height: 100%;

【参考方案2】：

正如@Jack 所说，我们需要使用 CSS -webkit-full-screen

我想你想拥有自己的自定义控制器吧？在这种情况下，我们需要将控制面板和视频放在一个 div 中，并在其上使用full-screen。我们就叫它videoContainer

首先我们制作 HTML

<div class="videoContainer">
    <video id="video" allowfullscreen="allow">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <p>Your browser does not support the video tag.</p>
    </video>

    <!-- Control -->
    <div class="control">
        <a class="play mediaplayer-play"></a>
        <a class="fullscreen mediaplayer-full-screen"></a>
    </div>
</div>

CSS

.videoContainer:fullscreen, .videoContainer:-ms-fullscreen,   .videoContainer:-moz-full-screen, .videoContainer:-webkit-full-screen 
    width: 100%;
    height: 100%;

有时它可能是错误的（Safari 中的错误），因此解决此问题的方法是向默认控件添加样式。

video:-webkit-full-screen::-webkit-media-controls-panel, video:-webkit-full-screen::-webkit-media-controls, video:-webkit-full-screen::-webkit-media-text-track-container 
    display: none !important;
    opacity: 0;

这将为 Safari 的普通控制器设置样式，并确保它们不显示并使其有点尴尬。

---

这么久这么好。我们现在只需要让控制器工作即可。这可以通过使用 fullscreen API 的一些 jQuery/javascript 代码来完成

$(".fullscreen").click(function()

    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) 
        // exit full-screen
        if (document.exitFullscreen) 
            document.exitFullscreen();
         else if (document.webkitExitFullscreen) 
            document.webkitExitFullscreen();
         else if (document.mozCancelFullScreen) 
            document.mozCancelFullScreen();
         else if (document.msExitFullscreen) 
            document.msExitFullscreen();
        

    else if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) 
        var i = $("#videoContainer");

        // go full-screen
        if (i.requestFullscreen) 
            i.requestFullscreen();
         else if (i.webkitRequestFullscreen) 
            i.webkitRequestFullscreen();
         else if (i.mozRequestFullScreen) 
            i.mozRequestFullScreen();
         else if (i.msRequestFullscreen) 
            i.msRequestFullscreen();
        
               
);

如果你想知道如何添加画中画，你可以看到这个帖子here