[英]webkitRequestFullScreen not working?
I have this JSFiddle sample for webkitRequestFullScreen.我有这个用于 webkitRequestFullScreen 的 JSFiddle 示例。
I'm using Chrome 2 on Mac OSX and the example does not appear to work for me.我在 Mac OSX 上使用 Chrome 2,但该示例似乎不适用于我。 Initially I wrote my own example but the one in the link below is not written by me.
最初我编写了自己的示例,但下面链接中的示例不是我编写的。 Still it doesn't appear to work.
仍然它似乎不起作用。
http://jsfiddle.net/2uNzk/1/ http://jsfiddle.net/2uNzk/1/
var test = document.querySelector('.test');
test.addEventListener('click', function () {
if(test.requestFullScreen) {
test.requestFullScreen();
} else if(test.mozRequestFullScreen) {
test.mozRequestFullScreen();
} else if(test.webkitRequestFullScreen) {
test.webkitRequestFullScreen();
}
}, false);
however the following example does work: Only when I try to reproduce it in Plunker or JSFiddle it doesn't appear to work:但是以下示例确实有效:仅当我尝试在 Plunker 或 JSFiddle 中重现它时,它似乎不起作用:
http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/ http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/
heres my plunker example:这是我的 plunker 示例:
<!-- just to keep things in one place I put the JS here. -->
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<div class="example">
<img class="video_player" src="http://assets3.parliament.uk/iv/main-large//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg" id="player2">
<button onclick="goFullscreen('player2'); return false">Click Me To Go Fullscreen! (For real)</button>
</div>
http://plnkr.co/edit/BOhqNTEACTPmr9ebVnHs?p=preview http://plnkr.co/edit/BOhqNTEACTPmr9ebVnHs?p=preview
Any ideas?有任何想法吗? I'm baffled!
我很困惑!
webkit 版本没有将Fullscreen
的s
大写。
对于其他人,我发现这个线程说如果您为元素(div 等)调用它,它在 iPhone 上不起作用: https : //developer.apple.com/forums/thread/133248
Okay I finally found the easy answer.好的,我终于找到了简单的答案。 For iOS what will work is
webkitEnterFullscreen()
.对于 iOS 来说,
webkitEnterFullscreen()
将起作用。
const docEl = document.getElementById('player') as any; // Remove as any if not using typescript
if (!docEl) return;
if (docEl.requestFullscreen) docEl.requestFullscreen();
else if (docEl.webkitRequestFullscreen) docEl.webkitRequestFullscreen();
else if (docEl.mozRequestFullScreen) docEl.mozRequestFullScreen(); // Careful to the capital S
else if (docEl.msRequestFullscreen) docEl.msRequestFullscreen();
else if (docEl.webkitEnterFullscreen) docEl.webkitEnterFullscreen(); // Magic is here for iOS
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.