我有这个WebkitRequestFullScreen的JSFiddle示例。
我在Mac OSX上使用Chrome 2,这个例子似乎不适合我。最初我自己写了一个例子,但下面链接中的那个不是我写的。仍然看起来不适合我。
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);
但是下面的例子确实有效!只是当我试图在Plunker或JSFiddle中重现它时,它似乎不起作用:
http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/
这里我的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
有什么主意吗?我不明白!
4条答案
按热度按时间aelbi1ox1#
webkit版本没有将
Fullscreen
的s
大写。fwzugrvs2#
对于其他人来说,我发现这个线程说,如果你为一个元素(div等)调用它,它在iPhone上不起作用:https://developer.apple.com/forums/thread/133248
muk1a3rh3#
好吧,我终于找到了简单的答案。对于iOS来说,可行的是
webkitEnterFullscreen()
。llmtgqce4#
下面是我如何成功地全屏进入和退出。测试了Chrome,Safari,Firefox和Opera浏览器。
我使用一个切换按钮来进入/退出全屏的难题。