有没有办法使HTML5视频全屏显示？

有没有一种使用HTML5 <video>标签全屏播放视频的方法？

如果这不可能，那么有人知道这样做的原因吗？

HTML 5没有提供使视频全屏显示的方法，但是并行的全屏规范提供了requestFullScreen允许将任意元素（包括<video>元素）全屏显示的方法。

它在许多浏览器中都具有实验性支持。

原始答案：

根据HTML5规范（在撰写本文时：09年6月）：

用户代理不应提供公共API来使视频全屏显示。脚本与精心制作的视频文件结合在一起，可能会诱使用户认为已经显示了系统模式对话框，并提示用户输入密码。单击链接或导航页面时，页面会启动全屏视频，这也存在“烦恼”的危险。而是可以提供特定于用户代理的界面功能，以轻松地允许用户获得全屏播放模式。

浏览器可以提供用户界面，但不应提供可编程的界面。

请注意，以上警告已从规范中删除。

这里的大多数答案都是过时的。

现在，可以使用Fullscreen API将任何元素引入全屏模式，尽管这仍然很麻烦，因为您不仅可以div.requestFullScreen()在所有浏览器中调用，还必须使用浏览器特定的前缀方法。

我创建了一个简单的包装器screenfull.js，使使用Fullscreen API更加容易。

当前的浏览器支持为：

• 铬15+
• Firefox 10+
• Safari 5.1+

请注意，许多移动浏览器似乎还不支持全屏选项。

Safari通过提供支持webkitEnterFullscreen。

Chrome应该也支持它，因为它也是WebKit，但会出错。

Firefox的 Chris Blizzard 表示，他们将推出自己的全屏版本，该版本将允许任何元素进入全屏状态。例如帆布

Opera的 Philip Jagenstedt 表示他们将在以后的版本中提供支持。

是的，HTML5视频规范说不支持全屏显示，但是由于用户需要全屏显示，并且每个浏览器都将支持全屏显示，因此规范会发生变化。

webkitEnterFullScreen();

这需要在video标签元素上调用，例如，要全屏显示页面上使用的第一个video标签，请使用：

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

注意：这是过时的答案，不再相关。

许多现代的Web浏览器已经实现了FullScreen API，该API使您可以全屏聚焦于某些HTML元素。对于在完全身临其境的环境中显示交互式媒体（如视频）而言，这确实很棒。

要使全屏按钮正常工作，您需要设置另一个事件监听器，该事件监听requestFullScreen()器在单击按钮时将调用该函数。为确保此方法能在所有受支持的浏览器上正常运行，您还需要检查requestFullScreen()是否可用，并退回到供应商前缀版本（mozRequestFullScreen和webkitRequestFullscreen）（如果没有）。

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

参考：-https : //developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Using_full_screen_mode参考：-http : //blog.teamtreehouse.com/building-custom-controls-for-html5 -视频

我认为，如果我们想以一种开放的方式在浏览器中查看视频而没有任何封闭的源代码插件（以及Flash插件历史记录附带的所有安全漏洞...）。标签必须找到一种激活全屏的方法。我们可以像Flash一样处理它：要进行全屏，必须用鼠标左键激活它，而别无其他，这表示ActionScript无法启动例如，在加载Flash时全屏显示。

我希望我已经足够清楚：毕竟，我只是一名法国IT学生，而不是英国诗人:)

拜拜！

从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;
}

Firefox和Chrome（最新版本）现在都可以使用一种可编程的全屏方式。好消息是，这里已经起草了一个规范：

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

您现在仍然必须处理供应商前缀，但是所有实现细节都在MDN站点中进行跟踪：

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

您可以将宽度和高度更改为100％，但不会覆盖浏览器镶边或OS Shell。

设计决定是因为HTML位于浏览器窗口内。Flash插件不在窗口内，因此可以全屏显示。

这很有道理，否则您可以制作覆盖外壳的img标签，或制作h1标签，以便整个屏幕都是字母。

不，不可能在html 5中播放全屏视频。如果您想知道原因，那么您很幸运，因为现在正在为全屏进行争论。请参阅WHATWG邮件列表，并查找“视频”一词。我个人希望他们以HTML 5提供全屏API。

Firefox 3.6具有用于HTML5视频的全屏选项，右键单击视频并选择“全屏”。

最新的Webkit夜间软件还支持全屏HTML5视频，请在最新的夜间软件中尝试Sublime播放器，并在选择全屏选项时按住Cmd / Ctrl。

我猜Chrome / Opera也将支持此类功能。希望IE9也将支持全屏HTML5视频。

WebKit通过webkitEnterFullscreen支持此功能。

一种替代解决方案是必须浏览器仅在上下文菜单上提供此选项。尽管我可以看到它何时会有用，但无需使用Javascript。

同时，另一种解决方案将是最大化窗口（Javascript可提供屏幕尺寸），然后最大化其中的视频。试一试，然后简单地看看结果是否为用户所接受。

HTML 5视频在最新的夜间Safari版本中可以全屏显示，尽管我不确定它在技术上如何实现。

完整的解决方案：

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.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();
                    }
            }
    }

如果您可以选择将网站定义为渐进式Web应用程序（PWA），则manifest.jsondisplay: "fullscreen"下也可以使用。但这仅在用户将webapp添加/安装到主屏幕并从那里打开它时才有效。

是。好吧，HTML5视频发生的事情是，您只需放置<video>标签，浏览器便会为其提供自己的UI，从而可以全屏查看。它确实使我们的用户生活变得更好得多，不必看到某些开发人员使用Flash可以创造的“艺术” ：)它还为平台增加了一致性，这很好。

很简单，所有问题都可以像这样解决，

1）逃逸总是会让您退出全屏模式（这不适用于通过f11手动进入全屏模式）

2）暂时显示一条小横幅，表示已进入全屏视频模式（通过浏览器）

3）默认情况下，阻止全屏操作，就像在html5和位置api等中对弹出窗口和本地数据库所做的一样。

我看不到这种设计有任何问题。有人认为我错过了什么吗？

从Chrome 11.0.686.0 开发者频道开始， Chrome现在具有全屏视频。

如果告诉用户按F11（许多浏览器为全屏显示），然后将视频放在整个页面上，则可以执行此操作。

如果这些答案都不起作用（因为它们对我没有帮助），则可以设置两个视频。一个用于常规尺寸，另一个用于全屏尺寸。当您想切换到全屏模式时

1. 使用javascript将全屏视频的'src'属性设置为较小的视频'src'属性
2. 将全屏视频上的video.currentTime设置为与小视频相同。
3. 使用css'display：none'隐藏小视频，并通过'position：absolute'和'z-index：1000'或很大的视频显示大视频。