问题描述
在 iPhone 和 iPod 上，如果网页中嵌入了 YouTube 视频，用户可以触摸视频，视频就会开始播放——iOS 媒体播放器滑入，视频以横向全屏播放.视频播放完毕后，iOS 媒体播放器滑出，显示嵌入视频的网页.
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.
使用 HTML5 <video> 标签，用户可以触摸视频，视频将缩放"至全屏并以任何当前设备方向开始播放.视频播放完毕后，用户必须点击一次以调出播放器控件，然后点击完成"才能返回网页.
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.
不幸的是，我的视频上传到 YouTube 不是这个应用程序的选项，我还没有找到一个 HTML5 视频播放器在视频播放完毕后返回网站.我希望视频播放器表现出与 YouTube 嵌入视频相同的行为，或者视频内嵌播放.可以在自定义的 UIWebView 中强制嵌入视频，但不幸的是，这不是一个选项(因为这意味着是一个网络应用程序，而不是本机应用程序).此外， 属性 webkit-playsinline 不起作用.
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.
是否有任何 HTML5 视频播放器可以复制嵌入的 YouTube 视频行为?我是否缺少任何明显的 Javascript 解决方法?有没有一种方法可以在没有用户交互的情况下告诉窗口视频播放完毕?
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?
感谢 Jan，这个问题解决了.工作代码如下，以及错误/注释列表.
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>
我犯的错误:
1.忘记在标签中添加ID.
2. 测试 webkitSupportsFullscreen——我无法让该属性测试为真".这个论坛帖子中的代码评论说，>
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
但我无法创建返回 true 的条件.
3. 完全错过了这篇stackoverflow帖子.
but I was unable to create a condition in which it returned true.
3. Completely missed this stackoverflow post.
推荐答案
嗯，我自己不能尝试……但你确定你看过这个吗?
Hm, can't try that myself...but sure you've seen this?
所以，webkitEnterFullScreen()"可能是你的朋友(尽管文档说它是只读的):
So, "webkitEnterFullScreen()" might be your friend (although the doc says its read-only):
内联视频在 iPad 旁边的任何 iOS 设备上都不可用(到目前为止).
Inline video is not possible on any iOS device beside iPad (so far).
无论如何，您可以使用事件侦听器在 Javascript 中检测视频的结尾:
Anyway, you may detect the end of a video in Javascript by using an Event Listener:
document.getElementById('video').addEventListener('ended',videoEndListener,false);
干杯，
一月
这篇关于Safari Web 应用程序中 iPhone 和 iPod 上的 HTML5 视频播放器行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！