javascript - Web 应用程序 - iPad webkitEnterFullscreen - 以编程方式播放全屏视频

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();
});

它可以全屏播放，但当用户单击“完成”退出时，视频将继续在屏幕外播放(因此您会听到音频)。

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

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