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

标签 iphone html video webkit mobile-safari

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

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

不幸的是,将我的视频上传到 YouTube 不是这个应用程序的选项,而且我还没有找到在视频播放完毕后返回网站的 HTML5 视频播放器。我更希望视频播放器表现出与 YouTube 嵌入式视频相同的行为,或者视频以内联方式播放。在自定义中可以强制内嵌视频 UIWebView ,但不幸的是,这不是一个选项(因为这是一个网络应用程序,而不是 native 应用程序)。此外,<video>属性(property)webkit-playsinline不起作用。

有没有可以复制嵌入式 YouTube 视频行为的 HTML5 视频播放器?我是否遗漏了任何明显的 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 stackoverflow post .

最佳答案

嗯,我自己不能尝试...但是你确定你已经看到了吗?

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356

所以,“webkitEnterFullScreen()”可能是你的 friend (尽管文档说它是只读的):

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

除了 iPad(到目前为止),任何 iOS 设备都无法使用内联视频。

无论如何,您可以使用事件监听器检测 Javascript 中的视频结束:

document.getElementById('video').addEventListener('ended',videoEndListener,false);

干杯,

一月

关于iphone - Safari Web Apps 中 iPhone 和 iPod 上的 HTML5 视频播放器行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5438520/

相关文章:

iphone - 这个 Objective-C 嵌套 NSArray 会导致 iPhone 上的内存泄漏吗?

javascript - JQuery:在我的页面中查找并替换 HTML 实例

ios - 如何在 Swift3 iOS 中的特定持续时间内在 AVPlayer 中播放视频

image - 将 numpy 图像列表转换为 mp4 视频

iphone - 了解 Cocoa Touch 中的 MVC 设计模式

iphone - 为什么 launchd 会杀死我的应用程序,它只使用 2 MB 的 RAM?

c# - C# Request.Files[n].FileName 的哪个文件表单字段

html - 网页 - 以毫米为单位的图像大小

css - 全屏视频背景 - <video> vs YouTube/Vimeo-&lt;iframe&gt;?

ios - 如何从 2 个嵌入式不同项目中运行一个项目