blocks|key|1518524|text|您可以将宽度和高度更改为100%25，但它不会覆盖浏览器chrome或操作系统外壳。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1518525|设计决策是因为HTML存在于浏览器窗口中。Flash插件不在窗口内，所以它们可以全屏显示。|1518526|这是有意义的，否则你可以制作覆盖外壳的img标签，或者制作h1标签，这样整个屏幕就是一个字母。|1518527|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

You can change the width and height to be 100%, but it won't cover the browser chrome or the OS shell.

Design decision is because HTML lives inside the browser window. Flash plugins aren't inside the window, so they can go full screen.

This makes sense, otherwise you could make img tags that covered the shell, or make h1 tags so the whole screen was a letter.

blocks|key|1518582|text|我认为，如果我们想要在浏览器中有一种开放的方式来观看视频，而不需要任何封闭的源代码插件(以及所有与flash插件历史相关的安全漏洞……)。标签必须找到激活全屏的方法..我们可以像flash一样处理它:要做全屏，它必须通过鼠标左键点击来激活，我的意思是ActionScript不可能在加载flash时启动全屏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1518583|我希望我已经讲得足够清楚了:毕竟，我只是一个法国IT学生，而不是一个英国诗人:)|1518584|再见！|1518585|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I think that if we want to have a open way to view videos in our browsers without any closed source plugins (and all the security breaches that comes with the history of the flash plugin...). The tag has to find a way to activate full screen.. We could handle it like flash does: to do fullscreen, it has to be activated by a left click with your mouse and nothing else, I mean it's not possible by ActionScript to launch fullscreen at the loading of a flash by example.

I hope I've been clear enough: After all, I'm only a french IT student, not an english poet :)

See Ya!

blocks|key|1518634|text|另一种解决方案是，浏览器只需在上下文菜单上提供此选项。不需要Javascript来做这件事，尽管我知道它什么时候会有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1518635|同时，另一种解决方案是最大化窗口(Javascript可以提供屏幕尺寸)，然后最大化其中的视频。试一试，然后简单地看看结果是否被你的用户接受。|1518636|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

An alternative solution would be to have to browser simply provide this option on the contextual menu. No need to have Javascript to do this, though I could see when it would be useful.

In the mean time an alternative solution would simply be to maximise the window (Javascript can provide screen dimensions) and then maximise the video within it. Give it a go and then simply see if the results are acceptable to your users.

blocks|key|1518687|text|不，在html5中不可能有全屏视频。如果你想知道原因，你是幸运的，因为现在正在为全屏而战。查看视频并查找单词“WHATWG+mailing+list”。我个人希望他们在HTML5中提供全屏API。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1518688|entityMap|0|LINK|mutability|MUTABLE|url|http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-March/thread.html^0|1J|J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

No, it is not possible to have fullscreen video in html 5. If you want to know reasons, you're lucky because the argument battle for fullscreen is fought right now. See <a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-March/thread.html" rel="nofollow noreferrer">WHATWG mailing list</a> and look for the word "video". I personally hope that they provide fullscreen API in HTML 5.

blocks|key|1518801|text|火狐3.6有一个HTML5视频的全屏选项，右击视频并选择‘全屏’。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1518802|最新的Webkit还支持全屏HTML5视频，尝试使用最新的Sublime+player，按住Cmd+/ctrl键的同时选择全屏选项。|offset|length|1518803|我猜Chrome+/+Opera也会支持这样的东西。希望IE9也能支持全屏HTML5视频。|1518804|entityMap|0|LINK|mutability|MUTABLE|url|http://jilion.com/sublime/video^0|0|T|E|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

Firefox 3.6 has a full screen option for HTML5 video's, right-click on the video and select 'full screen'. 

The latest Webkit nightlies also support full screen HTML5 video, try the <a href="http://jilion.com/sublime/video" rel="nofollow noreferrer">Sublime player</a> with the latest nightly and hold Cmd / Ctrl while selecting the full screen option. 

I guess Chrome / Opera will also support something like this. Hopefully IE9 will also support full screen HTML5 video.

blocks|key|1518887|text|在最新的Safari夜间版本中，HTML5视频确实是全屏的，尽管我不确定它是如何在技术上实现的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1518888|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

HTML 5 video does go fullscreen in the latest nightly build of Safari, though I'm not sure how it is technically accomplished.

blocks|key|1518911|text|这是通过webkitEnterFullscreen在WebKit中支持的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1518912|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.apple.com/safari/library/documentation/appleapplications/reference/WebKitDOMRef/HTMLVideoElement_idl/Classes/HTMLVideoElement/index.html^0|4|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This is supported in WebKit via <a href="http://developer.apple.com/safari/library/documentation/appleapplications/reference/WebKitDOMRef/HTMLVideoElement_idl/Classes/HTMLVideoElement/index.html" rel="nofollow noreferrer">webkitEnterFullscreen</a>.

blocks|key|1304020|text|是。HTML5视频发生的事情是，你只需要放上<video>标签，浏览器就会给出它自己的UI，从而实现全屏观看。它真的让我们用户的生活变得更好，不用看到一些玩Flash的开发人员可以做的“艺术”:)它还增加了平台的一致性，这很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1304021|entityMap^0|M|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Yes. Well what happens with HTML5 video is that you just put the <code>&lt;video&gt;</code> tag and the browser will give it's own UI, and thus the ability for full screen viewing. It really makes life much better on us users to not have to see the "art" some developer playing with Flash could make :) It also adds consistency to the platform, which is nice.

blocks|key|1519047|text|很简单，所有的问题都可以这样解决，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1519048|1)让退出总是让你退出全屏模式(这不适用于通过f11手动进入全屏)|1519049|2)临时显示进入全屏视频模式的小横幅(通过浏览器)|1519050|3)默认拦截全屏动作，就像html5、location+api等中对弹出窗口、本地数据库的拦截一样。|1519051|我不认为这个设计有任何问题。有人觉得我漏掉了什么吗？|1519052|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

it's simple, all the problems can be solved like this, 

1) have escape always take you out of fullscreen mode
 (this doesn't apply to manually entering fullscreen through f11)

2) temporarily display a small banner saying fullscreen video mode is entered (by the browser)

3) block fullscreen action by default, just like has been done for pop-ups and local database in html5 and location api and etc, etc.

i don't see any problems with this design. anyone think i missed anything?

blocks|key|1519108|text|从Chrome11.0.686.0开始，dev+channel+Chrome现在支持全屏视频。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1519109|entityMap|0|LINK|mutability|MUTABLE|url|http://www.chromium.org/getting-involved/dev-channel^0|K|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

As of Chrome 11.0.686.0 <a href="http://www.chromium.org/getting-involved/dev-channel" rel="nofollow">dev channel</a> Chrome now has fullscreen video.

blocks|key|1304171|text|你可以这样做，如果你告诉用户按下F11(对于许多浏览器来说是全屏的)，并且你把视频放在整个页面上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1304172|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can do this if you tell to user to press F11(full screen for many browsers), and you put video on entire body of page.

blocks|key|1304199|text|一种可编程的全屏方式现在在Firefox和Chrome+(最新版本)中都有效。好消息是这里已经起草了一个规范：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1304200|http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html|offset|length|1304201|现在，您仍然需要处理供应商前缀，但所有实现细节都在MDN站点中跟踪：|1304202|https://developer.mozilla.org/en/DOM/Using_full-screen_mode|1304203|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1N|0|0|0|0|1N|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|I]]]]

A programmable way to do fullscreen is working now in both Firefox and Chrome (in their latest versions). The good news is that a spec has been draft here:

<a href="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html" rel="noreferrer">http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html</a>

You will still have to deal with vendor prefixes for now but all the implementation details are being tracked in the MDN site:

<a href="https://developer.mozilla.org/en/DOM/Using_full-screen_mode" rel="noreferrer">https://developer.mozilla.org/en/DOM/Using_full-screen_mode</a>

blocks|key|1519220|text|来自CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1519221|video+{
++++position:+fixed;+right:+0;+bottom:+0;
++++min-width:+100%25;+min-height:+100%25;
++++width:+auto;+height:+auto;+z-index:+-100;
++++background:+url(polina.jpg)+no-repeat;
++++background-size:+cover;
}|code-block|syntax|javascript|1519222|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

From CSS

<pre><code>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;
}
</code></pre>

blocks|key|1304301|text|许多现代web浏览器都实现了HTML，它允许您将全屏焦点放在某些FullScreen元素上。这对于在完全身临其境的环境中显示交互式媒体(如视频)非常有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1304302|要使full+screen按钮工作，您需要设置另一个事件侦听器，该侦听器将在单击按钮时调用requestFullScreen()函数。为了确保这在所有支持的浏览器上都有效，您还需要检查requestFullScreen()是否可用，如果不可用，则回退到供应商的前缀版本(mozRequestFullScreen和webkitRequestFullscreen)。|offset|length|style|CODE|1304303|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();
}|code-block|syntax|javascript|1304304|参考：-+https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode参考：-+http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos|1304305|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode|1|http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos^0|0|19|J|2K|J|3R|K|4C|N|0|0|5|29|0|2J|1Z|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]|$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]|$D|1D|E|1E|1|1F]]|A|$]]|$1|O|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

Many modern web browsers have implemented a FullScreen API that allows you to give full screen focus to certain HTML elements. This is really great for displaying interactive media like videos in a fully immersive environment.

To get the full screen button working you need to set up another event listener that will call the <code>requestFullScreen()</code> function when the button is clicked. To ensure that this will work across all supported browsers you are also going to need to check to see if the <code>requestFullScreen()</code> is available and fallback to the vendor prefixed versions (<code>mozRequestFullScreen</code> and <code>webkitRequestFullscreen</code>) if it is not.

<pre><code>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();
}
</code></pre>

Reference:- <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode</a>
Reference:- <a href="http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos" rel="noreferrer">http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos</a>

blocks|key|1304318|text|完整的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1304319|++++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();
++++++++++++++++++++}
++++++++++++}
++++}|code-block|syntax|javascript|1304320|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The complete solution:

<pre><code> function bindFullscreen(video) {
 $(video).unbind('click').click(toggleFullScreen);
 }

 function toggleFullScreen() {
 if (!document.fullscreenElement &amp;&amp; // alternative standard method
 !document.mozFullScreenElement &amp;&amp; !document.webkitFullscreenElement &amp;&amp; !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();
 }
 }
 }
</code></pre>

blocks|key|1519358|text|如果您可以选择将站点定义为渐进式web应用程序(PWA)，那么也可以选择在manifest.json下使用display:+"fullscreen"。但只有当用户将你的webapp添加/安装到主屏幕并从那里打开它时，这才能起作用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1519359|entityMap|0|LINK|mutability|MUTABLE|url|https://web.dev/add-manifest/#display^0|1H|L|11|D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

If you have option to define your site as progressive web app (PWA), then there is also option to use <code>display: &quot;fullscreen&quot;</code> under <a href="https://web.dev/add-manifest/#display" rel="nofollow noreferrer">manifest.json</a>. But this will only work if user adds/installs your webapp to home screen and opens it up from there.

Is there a way to play a video fullscreen using the HTML5 <code>&lt;video&gt;</code> tag?

And if this is not possible, does anybody know if there is a reason for this decision?

Is there a way to make HTML5 video fullscreen?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

有没有办法使用HTML5 <video>标签全屏播放视频？如果这是不可能的，有没有人知道这一决定是否有原因？

问有没有办法让HTML5视频全屏显示？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法让HTML5视频全屏显示？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法让HTML5视频全屏显示？
EN