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

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

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.

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

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?

是否有任何可以复制嵌入式YouTube视频行为的HTML5视频播放器？我错过了任何明显的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 post says,

我犯的错误：1。忘了在

// 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 * post.

但我无法创建一个返回true的条件。 3.完全错过了这个*帖子。

2 个解决方案

#1

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):

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

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

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

一月

#2

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。

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.

Jan处理'已结束'事件的解决方案是您的最佳选择。

#1