Having some trouble with an HTML 5 project where the video plays on Chrome and Safari PC browsers but not on iPad. The task at hand is to get it working in portrait mode only, with the video playing when tapped/clicked.
<!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>