- 首先,我创建一个网页,在这个页面中有一个按钮链接到 html5视频播放器页面(这是另一个页面)
- 然后,我想实现当单击按钮时,下一步
页面(html5视频播放页面)可以自动全屏。
我希望它在 iPhone 中运行
我尝试使用代码
window.load=function(){
myVideo=document.getElementById('video')[0];
if(!myVideo.webkitDisplayingFullscreen){
goFullscreen();
}
function goFullScreen(){ myVideo.webkitEnterFullscreen();}
}
and the chrome said: Uncaught InvalidStateError:Failed to execute'webkitEnterFullscreen' on 'HTMLVideoElement': This element may only enter fullscreen mode in response to a user gesture
还有其他一些解决方案可以自动获得全屏模式吗?
最佳答案
你可以像我的例子一样做一个视频作为你页面的背景,检查 fiddle
全屏:https://jsfiddle.net/N4Lbp/4/embedded/result/
HTML:
<video autoplay loop poster="http://peach.blender.org/wp-content/uploads/bbb-splash.png" id="video_bg">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_720p_stereo.ogg" type="video/ogg">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
CSS:
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body {
height: 100%;
}
#video_bg {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -100;
background: url(http://peach.blender.org/wp-content/uploads/bbb-splash.png) no-repeat;
background-size: cover;
}
关于javascript - 当用户进入当前网页时,html 5 视频以全屏模式自动打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24451566/