在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-I无法将该属性测试为"真实".该论坛帖子中的代码评论说,
// note: .webkitSupportsFullscreen is false while the video is loading
但我无法创建一个返回true的条件.
3.完全错过了这个stackoverflow帖子.
我想在iPhone上播放HTML5视频,但每当我尝试时,当视频'.play()'被调用时,iPhone会自动全屏弹出.如何在不改变iPhone的UI的情况下内联播放视频:
http://www.easy-bits.com/iphone-inline-video-autostart
http://www.takeyourdose.com/en(点击"开始360体验")
编辑:这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iPhone Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="document.getElementById('vid').play()">Start</button>
<video id="vid">
<source src="/videos/tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>