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

【问题标题】：HTML5 video player behavior on iPhone and iPod in Safari Web AppsSafari Web Apps 中 iPhone 和 iPod 上的 HTML5 视频播放器行为
【发布时间】：2026-01-16 04:25:01
【问题描述】：

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

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

很遗憾，将我的视频上传到 YouTube 不是此应用程序的选项，而且我还没有找到在视频播放完毕后返回网站的 HTML5 视频播放器。我希望视频播放器表现出与 YouTube 嵌入式视频相同的行为，或者视频内联播放。在自定义的UIWebView 中可以强制内联视频，但不幸的是，这不是一个选项（因为这意味着它是一个网络应用程序，而不是本机应用程序）。此外，<video> 属性 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.忘记在<video>标签中添加ID。
2. 测试webkitSupportsFullscreen——我无法将该属性测试为“真”。 this forum post 中的代码注释说，

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

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

【问题讨论】：

标签： iphone html video webkit mobile-safari

【解决方案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);

干杯，

一月

【讨论】：

不，我没找到。感谢您的链接。我会编写一些代码来看看我是否可以做到这一点，然后接受你的回答并用代码更新我的问题。
太棒了。非常感谢您的帮助！
如果您尝试处理“完成”按钮推送事件，但请注意 iOS > 4.3 中不再触发“结束”事件。现在唯一触发的事件是“暂停”，这根本没有帮助，因为这与按下播放和暂停按钮时触发的事件相同。
在这个例子中，我不想处理“完成”按钮按下事件。我刚刚在 iOS 5.0 中测试了列出的代码，它像宣传的那样工作。也就是说ended事件是在视频播放完毕，视频播放器退出时触发的。
@whlteXbread：我也能获得视频的“暂停”事件吗？当用户在 iPhone 的默认视频播放器上按下暂停时，我想退出全屏。

【解决方案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 处理“结束”事件的解决方案是您的最佳解决方案。

【讨论】：