Question

http://sandbox.solutionsbydesign.com/i-screenplay/h5/

以上是我从Apple下载的示例，您可以在其中使用控件进行播放和全屏模式。在Safara / iPad中，它非常棒。然而，我想要做的是让人们点击链接，然后加载视频，然后进入全屏模式。因此，例如在上面的链接上，如果加载点完成后，它进入全屏，这将是完美的。

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html 有更多相关信息。

Answer 1

我能做到最好的就是这个。

设置您的视频代码并使用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();
});

它将在Fullscreen中播放，但当用户点击“完成”退出视频时，将继续播放屏幕（这样您就会听到音频）。

所以，我需要弄清楚如何触摸触发“完成”时触发的事件（我甚至不确定是否存在此事件）。或者，使用the method described here并每秒运行一次以查看是否正在使用全屏模式。但是我没有取得多大成功，无论我做什么我都会犯错误。

希望这可以帮助您找到答案。如果是这样，请告诉我！

Answer 2

秘诀是，在加载视频元数据之前，您无法进入全屏模式。 The Apple docs州：

如果meta，此属性[ webkitSupportsFullscreen ]也为false 加载数据或者mountmetadata事件没有触发，如果是文件只是音频。“

因此，要在正确的时间触发全屏，只需为 loadedmetadata 事件创建一个事件监听器：

videoContainer.addEventListener('loadedmetadata', function() {
    if (videoContainer.webkitEnterFullscreen) {
        videoContainer.webkitEnterFullscreen();
    }
});

有了这个，您应该能够以编程方式在iOS上添加和播放全屏视频，无论您是使用Drew提到的“屏幕外”视频容器还是动态添加视频标签。

Answer 3

我认为你的问题是试图强制非用户调用全屏，这是行不通的。用户必须通过点击按钮等来调用全屏请求。等待视频加载然后进入全屏是不一样的。

@Drew Baker 这是我昨晚做全屏的帖子：http://johncblandii.com/2011/07/html5-video-fullscreen.html。

Answer 4

我也一直在研究这个问题。尝试通过单击按钮使视频以全屏模式播放。

我可能做错了，但这是我如何让它为我工作（在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;
}

我发现订单很重要。首先是播放，然后是全屏请求。尝试一下，看看它是否适合你。可能没有必要返回false。

Web App - iPad webkitEnterFullscreen - 以编程方式进行全屏视频

4 个答案: