html 5 视频在用户进入当前网页时自动以全屏模式打开

【问题标题】：html 5 video to automatically open in fullscreen mode when user enter the current webpagehtml 5 视频在用户进入当前网页时自动以全屏模式打开
【发布时间】：2014-06-27 12:12:24
【问题描述】：

首先，我创建了一个网页，在这个页面中有一个按钮链接到 html5 视频播放器页面（这是另一个页面）
然后，我想在单击按钮时实现，下一个页面（html5视频播放页面）可以自动全屏。
我希望它在 iPhone 上运行

我尝试使用代码

window.load=function(){
 myVideo=document.getElementById('video')[0];
 if(!myVideo.webkitDisplayingFullscreen){
    goFullscreen();
 }
 function goFullScreen(){ myVideo.webkitEnterFullscreen();}
}

chrome 说：未捕获的 InvalidStateError：无法执行 'webkitEnterFullscreen' on 'HTMLVideoElement': 这个元素只能在对用户手势的响应

那么还有其他一些解决方案可以自动获得全屏模式吗？

【问题讨论】：

标签： javascript html ios

【解决方案1】：

您可以像我的示例一样将视频作为页面背景，检查小提琴

http://jsfiddle.net/N4Lbp/4/

全屏：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;
}

【讨论】：

我希望它在 iPhone 上运行