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

在iPhone和iPod上,如果YouTube视频嵌入在网页中,用户可以触摸视频,视频将开始播放,iOS媒体播放器将进入幻灯片,视频以横向方式播放全屏.一旦视频播放完毕,iOS媒体播放器就会滑回来,显示视频嵌入的网页.

使用HTML5< video>标签,视频将“缩放”到全屏,并开始播放任何当前的设备方向.一旦视频播放完毕,用户必须点击一次才能播放播放器控件,然后点击“完成”以返回到网页.

不幸的是,将我的视频上传到YouTube不是这个应用程序的选择,我没有发现一个HTML5视频播放器在视频播放完毕后返回到网站.我希望视频播放器与YouTube嵌入式视频相同,或视频内嵌播放.在定制的UIWebView中强制内联视频是可能的,但不幸的是,这不是一个选项(因为这是一个Web应用程序,而不是本机应用程序).另外,< 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 – 我无法让该属性测试为“true”. this forum post的代码中的评论说,

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

但是我无法创建一个返回true的条件.
完全错过了this stackoverflow post.

解决方法

嗯,不能尝试自己…但是确定你看过这个？

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

干杯,

一月

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

解决方法

相关文章