Web应用程序 - iPad的webkitEnterFullscreen - 编程方式去全屏视频

http://sandbox.solutionsbydesign.com/i-screenplay/h5/Web应用程序 - iPad的webkitEnterFullscreen - 编程方式去全屏视频

以上是一个例子，我从苹果下载，你可以使用控制播放和全屏模式。在Safara/iPad中，它非常棒。但是我想要做的是让用户点击一个链接并加载视频，然后进入全屏模式。因此，例如在上面的链接，如果加载点完成后它进入全屏，这将是完美的。

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

来源

2011-01-13 Rezen

你有没有想过这个？我很想知道如何做到这一点。谢谢！ –

http://sandbox.solutionsbydesign.com/i-screenplay/zepto-3.html是我制作的最终演示。因此，从我在Apple网站上阅读的全屏视频只能在视频播放时触发。我无法以编程方式全屏显示。看来你可以用Sencha，我不确定，但我想看看他们的设置。 – Rezen

我已经能够拿出这个最好的。

设置您的视频标签并使用CSS将其从屏幕上的某处放置（不能设置为显示：无）。我用绝对定位将它从屏幕的左上角移开。

然后用这个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并每秒运行一次以查看是否使用全屏模式。但是我没有获得太多的成功，不管我做什么我都会犯错误。

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

来源

2011-03-07 21:52:40

您想要分别在用户进入和退出全屏时收听'webkitbeginfullscreen'和'webkitendfullscreen'事件。 – syaz

你有工作演示/样本吗？ – Rezen

我相信这会解决您的问题http://www.intheloftstudios.com/blog/detecting-html5-video-fullscreen-and-events –

我认为你的问题是试图强制非用户调用全屏，这将无法正常工作。用户必须通过点击按钮调用全屏请求等。等待视频加载然后全屏显示并不是一回事。

@德鲁贝克这里是我昨晚做了全屏的帖子：http://johncblandii.com/2011/07/html5-video-fullscreen.html。

来源

2011-07-29 17:42:23 johncblandii

秘诀是，直到视频元数据加载完毕才能进入全屏模式。 The Apple docs状态：

此属性[webkitSupportsFullscreen]也是假的，如果元数据加载或等待loadedmetadata事件还没有发射，如果文件只有音频的“

。

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

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

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

来源

2013-12-19 23:10:12 kiddailey

+1 - 这是唯一对我有用的东西，谢谢。 –

我也一直在处理这个问题。尝试通过点击按钮让视频以全屏模式播放。（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; 
}

我发现的顺序很重要。首先播放，然后是全屏请求。试试看，看看它是否适合你。返回错误可能不是必需的。

来源

2014-01-09 22:11:51

将.play（）更改为webkitEnterFullscreen之前解决了我的问题。 –

Web应用程序 - iPad的webkitEnterFullscreen - 编程方式去全屏视频

回答

相关问题