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

它将在Fullscreen中播放很棒,但是当用户点击"完成"退出视频时,将继续播放屏幕(这样您就会听到音频).

因此,我需要弄清楚如何触摸触发"完成"时触发的事件(我甚至不确定是否存在此事件).或者,使用此处描述的方法并每秒运行一次以查看是否正在使用全屏模式.但是我没有取得多大成功,无论我做什么我都会得到错误.

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