iPhone 和 iPod 上 Safari Web Apps 中的 HTML5 视频播放器行为
在 iPhone 和 iPod 上，如果网页中嵌入了 YouTube 视频，用户可以触摸该视频，视频就会开始播放 - iOS 媒体播放器滑入，视频会以横向全屏播放。视频播放完毕后，iOS 媒体播放器会滑出，显示嵌入视频的网页。
使用 HTML5 标签，用户可以触摸视频，视频将“缩放”到全屏并开始以当前设备方向播放。视频播放完毕后，用户必须点击一次以调出播放器控件，然后点击“完成”才能返回网页。
不幸的是，此应用程序无法选择将我的视频上传到 YouTube，而且我还没有找到在视频播放完毕后返回到网站的 HTML5 视频播放器。我希望视频播放器表现出与 YouTube 嵌入视频相同的行为，或者视频内嵌播放。在自定义的 UIWebView 中可以强制内嵌视频，但不幸的是，这不是一个选项（因为这是一个 Web 应用程序，而不是本机应用程序）。此外， 属性 webkit-playsinline 不起作用。
是否有任何 HTML5 视频播放器可以复制嵌入的 YouTube 视频行为？我是否遗漏了任何明显的 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. 忘记在标签中添加ID。
2. 测试 webkitSupportsFullscreen - 我无法将该属性测试为“true”。 此论坛帖子中的代码评论说，
// note: .webkitSupportsFullscreen is false while the video is loading
但我无法创建返回 true 的条件。
3. 完全错过了这篇 stackoverflow 帖子。
On the iPhone and iPod, if a YouTube video is embedded in a web page, the user can touch the video and the video will start playing—the iOS media player slides in and the video plays full screen in landscape orientation. Once the video has finished playing, the iOS media player slides back out, revealing the web page where the video was embedded.
Using the HTML5 <video> tag, the user can touch the video and the video will "zoom" to full screen and start playing in whatever the current device orientation is. Once the video has finished playing, the user must tap once to bring up the player controls, and then tap "Done" in order to return to the web page.
Unfortunately, uploading my videos to YouTube is not an option for this application, and I haven't found an HTML5 video player that returns to the website after the video is finished playing. I would prefer either that the video player exhibits the same behavior as the YouTube embedded videos, or that the video plays inline. Forcing inline video is possible in a customized UIWebView, but unfortunately that is not an option (as this is meant to be a web app, not a native app). Additionally, the <video> property webkit-playsinline does not work.
Are there any HTML5 video players that can replicate the embedded YouTube video behavior? Am I missing any obvious Javascript workarounds? Is there a method to tell the window that the video is finished playing without user interaction?
EDIT:
Thanks to Jan, this problem is solved. Working code follows, along with a list of mistakes/notes.
<!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>
Mistakes I made:
1. Forgot to add an ID in the <video> tag.
2. Testing for webkitSupportsFullscreen—I couldn't ever get that property to test as "true." A comment in code in this forum post says,
// note: .webkitSupportsFullscreen is false while the video is loading
but I was unable to create a condition in which it returned true.
3. Completely missed this stackoverflow post.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
嗯，我自己不能尝试……但你确定你见过这个吗？
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 中视频的结束：
干杯，
Jan
Hm, can't try that myself...but sure you've seen this?
http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356
So, "webkitEnterFullScreen()" might be your friend (although the doc says its read-only):
http://nathanbuskirk.com/?p=1
Inline video is not possible on any iOS device beside iPad (so far).
Anyway, you may detect the end of a video in Javascript by using an Event Listener:
Cheers,
Jan
来自 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 的解决方案根据您的情况，处理“结束”事件是最好的。
From the Safari documentation:
"Important: The webkitEnterFullscreen() method can be invoked only in response to a user action, such as clicking a button. You cannot invoke webkitEnterFullscreen() in response to an onload() event, for example."
That might explain why your webkitEnterFullscreen is always false.
http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW13
Jan's solution handling the 'ended' event is the best in your case.