Question

在iPhone和iPod上，如果YouTube视频嵌入网页，用户可以触摸视频，视频将开始播放 - iOS媒体播放器将滑入，视频将以横向方式全屏播放。视频播放完毕后，iOS媒体播放器会滑出，显示嵌入视频的网页。

使用HTML5 <video>标记，用户可以触摸视频，视频将“缩放”为全屏，并开始播放当前设备方向。视频播放完毕后，用户必须点击一次以调出播放器控件，然后点击“完成”以返回到网页。

不幸的是，将我的视频上传到YouTube不是此应用程序的选项，我还没有找到一个HTML5视频播放器在视频播放完毕后返回网站。我希望视频播放器表现出与YouTube嵌入式视频相同的行为，或视频播放内联视频。强制内联视频可以在自定义的UIWebView中进行，但不幸的是，这不是一个选项（因为这是一个Web应用程序，而不是本机应用程序）。此外，<video>属性webkit-playsinline不起作用。

是否有任何可以复制嵌入式YouTube视频行为的HTML5视频播放器？我错过了任何明显的Javascript解决方法吗？是否有方法告诉窗口视频在没有用户交互的情况下播放完毕？

编辑：

感谢Jan，这个问题已经解决了。随后是工作代码，以及错误/注释列表。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>scratchpad</title>
</head>
<body>
<video id="video">
    <source src="movie.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
document.getElementById('video').addEventListener('ended',function(){document.getElementById('video').webkitExitFullScreen();},false);
</script>
</body>
</html>

我犯的错误：
1.忘记在<video>标签中添加ID 2.对webkitSupportsFullscreen的测试 - 我无法将该属性测试为“真实”。 this forum post中代码中的注释表示

// note: .webkitSupportsFullscreen is false while the video is loading

但是我无法创建一个返回true的条件 3.完全错过this stackoverflow post。

Answer 1

嗯，我自己也试过了......但是你确定已经看过了吗？

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356

所以，“webkitEnterFullScreen（）”可能是你的朋友（虽然文档说它是只读的）：

http://nathanbuskirk.com/?p=1

在iPad旁边的任何iOS设备上都无法使用内联视频（目前为止）。

无论如何，您可以使用事件监听器在Javascript中检测视频的结尾：

document.getElementById('video').addEventListener('ended',videoEndListener,false);

干杯，

扬

Answer 2

来自Safari文档：

“重要说明：只有在响应用户操作时才能调用webkitEnterFullscreen（）方法，例如单击按钮。例如，您无法调用webkitEnterFullscreen（）来响应onload（）事件。”

这可以解释为什么你的webkitEnterFullscreen总是假的。

http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW13

Jan处理'已结束'事件的解决方案在您的情况下是最好的。

Safari Web Apps中iPhone和iPod上的HTML5视频播放器行为

2 个答案: