Html Safari Web 应用程序中 iPhone 和 iPod 上的 HTML5 视频播放器行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5438520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video player behavior on iPhone and iPod in Safari Web Apps
提问by whlteXbread
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.
在 iPhone 和 iPod 上，如果网页中嵌入了 YouTube 视频，用户可以触摸视频，视频将开始播放——iOS 媒体播放器滑入，视频横向全屏播放。视频播放完毕后，iOS 媒体播放器滑出，显示嵌入视频的网页。
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.
使用 HTML5<video>标签，用户可以触摸视频，视频将“缩放”至全屏并以任何当前设备方向开始播放。视频播放完毕后，用户必须点击一次以调出播放器控件，然后点击“完成”以返回网页。
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-playsinlinedoes not work.
不幸的是，将我的视频上传到 YouTube 不是此应用程序的选项，而且我还没有找到在视频播放完毕后返回网站的 HTML5 视频播放器。我希望视频播放器表现出与 YouTube 嵌入视频相同的行为，或者视频内嵌播放。可以在自定义 中强制内联视频UIWebView，但不幸的是，这不是一个选项（因为这意味着是一个网络应用程序，而不是本机应用程序）。此外，该<video>属性webkit-playsinline不起作用。
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?
是否有任何 HTML5 视频播放器可以复制嵌入的 YouTube 视频行为？我是否缺少任何明显的 Javascript 解决方法？有没有一种方法可以在没有用户交互的情况下告诉窗口视频已播放完毕？
EDIT:
编辑：
Thanks to Jan, this problem is solved. Working code follows, along with a list of mistakes/notes.
感谢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>
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 postsays,
我犯的错误：
1. 忘记在<video>标签中添加 ID 。
2. 测试webkitSupportsFullscreen——我无法让该属性测试为“真”。此论坛帖子中的代码评论说，
// 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.
但我无法创建返回 true 的条件。
3.完全错过了这个stackoverflow帖子。
采纳答案by Jan Petzold
Hm, can't try that myself...but sure you've seen this?
嗯，我自己不能尝试……但你确定你看过这个吗？
So, "webkitEnterFullScreen()" might be your friend (although the doc says its read-only):
所以，“webkitEnterFullScreen()”可能是你的朋友（尽管文档说它是只读的）：
Inline video is not possible on any iOS device beside iPad (so far).
内联视频在 iPad 旁边的任何 iOS 设备上都不可用（到目前为止）。
Anyway, you may detect the end of a video in Javascript by using an Event Listener:
无论如何，您可以使用事件侦听器在 Javascript 中检测视频的结尾：
document.getElementById('video').addEventListener('ended',videoEndListener,false);
Cheers,
干杯，
Jan
简
回答by aeldron
From the Safari documentation:
从 Safari 文档：
"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."
“重要提示：只能在响应用户操作时调用 webkitEnterFullscreen() 方法，例如单击按钮。例如，您不能调用 webkitEnterFullscreen() 来响应 onload() 事件。”
That might explain why your webkitEnterFullscreen is always false.
这可能解释了为什么您的 webkitEnterFullscreen 始终为 false。
Jan's solution handling the 'ended' event is the best in your case.
Jan 处理“结束”事件的解决方案最适合您的情况。
