我已经构建了一个Web应用程序,它使用HTML5标记和JavaScript代码,使其他内容与正在运行的视频同步.它在桌面浏览器中运行良好:Firefox,Chrome和Safari.在iPhone或DroidX上,原生视频播放器会弹出并占据屏幕,从而模糊了我想要与视频同时显示的其他动态内容.
有没有办法解决？如果有必要的话,我会弄清楚如何为这两个平台编写原生应用程序,但如果我能坚持使用HTML5/JavaScript,它将为我节省大量的精力.
在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帖子.