http://sandbox.solutionsbydesign.com/i-screenplay/h5/
以上是我从 Apple 下载的示例，您可以在其中使用控件进行播放和全屏模式。在 Safari/iPad 中效果很好。但是我想做的是让人们点击一个链接，它会加载一个视频，然后进入全屏模式。因此，例如在上面的链接中，如果加载点完成后它进入全屏状态，那将是完美的。
【问题讨论】：
标签： javascript ipad safari fullscreen html5-video
这是我能想到的最好的。
设置您的视频标签并使用 CSS 将其放置在屏幕之外的某个位置（不能设置为 display:none）。我使用绝对定位将其从屏幕的左上角移开。
然后使用这个JS：
$('.popup.ipad a').click(function() {
var currentID = $(this).closest('.player').find('video').attr('id');
var videoContainer = document.getElementById(currentID);
var newSrc = $(this).attr('href');
videoContainer.src = newSrc;
videoContainer.webkitEnterFullscreen();
videoContainer.play();
});
它会以全屏模式播放，但当用户点击“完成”退出时，视频将继续在屏幕外播放（因此您会听到音频）。
所以，我需要弄清楚如何侦听在触摸“完成”时触发的事件（我什至不确定是否有此事件）。或者，使用the method described here 并每秒运行一次以查看是否正在使用全屏模式。但是我没有取得太大的成功，无论我做什么都会出错。
希望这可以帮助您找到一些答案。如果有，请告诉我！
【讨论】：
秘诀在于，在加载视频元数据之前，您无法进入全屏模式。 The Apple docs状态：
这个属性 [webkitSupportsFullscreen] 如果 meta 数据已加载或已加载的元数据事件未触发，如果 文件是纯音频的。”
所以要在正确的时间触发全屏，只需为 loadedmetadata 事件创建一个事件监听器：
videoContainer.addEventListener('loadedmetadata', function() {
if (videoContainer.webkitEnterFullscreen) {
videoContainer.webkitEnterFullscreen();
}
});
有了这一点，无论您是使用 Drew 提到的“屏幕外”视频容器还是通过动态添加视频标签，您都应该能够以编程方式在 iOS 上添加和播放全屏视频。
【讨论】：
我认为您的问题在于试图强制非用户调用全屏，这不起作用。用户必须通过单击按钮等来调用全屏请求。等待视频加载然后进入全屏不是一回事。
@德鲁·贝克 这是我昨晚写的关于全屏的帖子：http://johncblandii.com/2011/07/html5-video-fullscreen.html。
【讨论】：
我也一直在解决这个问题。尝试通过单击按钮以全屏模式播放视频。
我可能做错了，但这就是我如何让它为我工作的方法（在 ipad air、iphone 5、galaxy 3、nexus 7 上……除了 ipad 2，视频不会全屏显示但是，它会播放）
为了播放视频，您必须让用户直接点击某些内容。每次我使用 JQUERY 时，它都无法在 iOS 设备上运行。我认为 iOS 对摆脱直接点击非常敏感因此，您将 onclick 处理程序直接放在您希望他们点击的项目上，如下所示：
<div onclick='openAndPlay(event);' id='video_layover' ></div>
function openAndPlay(event) {
myvideo.play();
myvideo.webkitEnterFullscreen();
return false;
}
我发现顺序很重要。先播放，再全屏请求。试试看，看看它是否适合你。 return false 可能不是必需的。
【讨论】：