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!
}
Click Me To Go Fullscreen! (For real)
这样就可以实现全屏显示了,但是DOM元素的尺寸不会改变。别担心,下面会帮你解决这个问题。
.player:-webkit-full-screen {
width: 100%;
height: 100%;
}
.player:-moz-full-screen {
width: 100%;
height: 100%;
}
Click Me To Go Fullscreen! (All the way)
这样对大部分DOM元素都起作用,但是对于iframe元素,还需添加allowFullScreen这个属性。
ok,大功告成!
reference: http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/