whl*_*ead 14 iphone video html5 webkit mobile-safari
在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>
Run Code Online (Sandbox Code Playgroud)
我犯的错误:
1.忘记在<video>标签中添加ID .
2.测试webkitSupportsFullscreen-I无法将该属性测试为"真实".该论坛帖子中的代码评论说,
// note: .webkitSupportsFullscreen is false while the video is loading
Run Code Online (Sandbox Code Playgroud)
但我无法创建一个返回true的条件.
3.完全错过了这个stackoverflow帖子.
嗯,不能自己试试......但你肯定看过这个吗?
所以,"webkitEnterFullScreen()"可能是你的朋友(虽然文档说它是只读的):
在iPad旁边的任何iOS设备上都无法使用内联视频(目前为止).
无论如何,您可以使用事件监听器在Javascript中检测视频的结尾:
document.getElementById('video').addEventListener('ended',videoEndListener,false);
Run Code Online (Sandbox Code Playgroud)
干杯,
一月
| 归档时间: |
|
| 查看次数: |
31124 次 |
| 最近记录: |