HTML 5视频在iPad上不起作用,iPad布局的侧面有黑色部分
HTML 5 Video not working on Ipad and ipad layout has black portions on the side
我被困在一个HTML 5项目上,其中视频可以在Chrome和Safari PC浏览器上运行,但在iPad上则不能。要求是仅在纵向模式下执行此操作,并且当点击/单击视频时,视频将播放。
<!doctype html>
<!--[if lt IE e 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Page 1</title>
<meta name="description" content="">
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
<style>
#container{
width:768px;
margin:150px auto;
position: relative;
}
#container video {
position:relative;
z-index:0;
}
.overlay {
position:absolute;
top:170px;
left:380px;
z-index:1;
}
</style>
<script>
function play(){
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
}
</script>
<script>
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
</script>
</head>
<body>
<div id="container">
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motionv4-1.m4v" />
</video>
<div class="overlay">
<div style="color:#356AFA; text-align:center; font-weight:bold; font-size:45px; line-height:60px; font-family:arial">
Tap the <br /> DoughBoy<br />to Join<br /> JavaWorld<br /> Wi-Fi!
</div>
</div>
</div>
</body>
</html>
我在
做这种类型的项目时遇到了同样的问题。
我使用jwplayer来解决这个问题。
http://www.longtailvideo.com/players/jw-flv-player/
好吧,
iPad有一个错误,它只查看提供的第一个MIME时间,因此您需要先添加.mp4文件,然后只有它才能工作。
更多信息在这里。http://diveintohtml5.info/video.html
相关文章:
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 对iPad上的点击事件反应缓慢
- jQuery(this).Pparent().Pparente().Prent().find()在iPad上不起作用
- iPad没有加载所有HTML5元素
- iPad虚拟键盘-哪一个-javasctript解决方案
- 提供“;onClick"适用于iPad(触摸屏)和桌面用户的默认功能
- 防止在移动Safari(iPad/iPhone)中长按/长按默认上下文菜单
- Javascript-iPad Tab键检测,带蓝牙键盘
- 在iPad上查看时忽略CSS
- jquery scrollTO iPhone/iPad没有't向右滚动
- mootools点击:继电器没有在ipad/iphone上启动
- 无法延迟iPhone/iPad上的两个JavaScript操作
- iOS iPad平板电脑渲染视口不正确
- 将画布图像保存在Ipad上
- 两个amCharts图与iPad上的jQueryMobile框架不显示在同一页面上
- 使用javascript,我怎么能在ipad上看到你的页面
- 在 iPad 上调试 trigger.io 应用
- 如何防止提交表单时iPad键盘失效
- 在iPad Web App上拖放 - 同时保留滚动功能
- HTML 5视频在iPad上不起作用,iPad布局的侧面有黑色部分