Video/Audio Widget Trouble
Hi,
I've created a widget with a video embedded in it. I've followed these instructions (http://support.apple.com/kb/HT5068) so, my video has the correct extension (mp4) and the correct code (H264). Moreover, its name is short, withoutspace and with only alphanumeric characters.
If I try the widget on Safari, it works properly but if I try it on the iPad, it doesn't work. In particular, there is no way to start the video: in fact, there in his center, the play button is covered by a grey cross and it is not possible to press it and start the video. Also the controls don't allow to start the video.
There are no error messaging and the rest of the widget works properly.
I've tried using an audio file (and the audio tag and a correct audio file) with the same negative result.
I report here the core code of the widget. It works on Safari but it doesn't on the iPad. I hope someone could help me! :-)
Thank you in advance.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Paolo">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body style="margin:0px;">
<div id="all" >
<div id="top"> </div>
<div id="txtv" class="txtp">
<video id="video" controls="controls" width="1024" height="666" poster="img/poster.jpg" src="video/intro.mp4" type='video/mp4'>
</video>
</div>
</div>
</body>
</html>
Here there is the code I use in the stylesheet file. There's nothing else strange in it (or, so I believe :-) ).
#all{
border: none;
width: 1024px;
height: 768px;
}
#top{
z-index: 999;
position: relative;
width: 1022px;
height: 50px;
border-bottom: 1px solid #aaa;
text-align: center;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 5px 5px 0 0;
-webkit-box-shadow: inset 0px 1px 0px 0px #f5f5f5;
background-color: #ebebeb;
background-image: -webkit-linear-gradient(top, #f5f5f5, #aaaaaa);
background-repeat: repeat-x;
background: -webkit-linear-gradient(#1b1b1b, #111);
background: -moz-linear-gradient(#1b1b1b, #111);
background: -o-linear-gradient(#1b1b1b, #111);
background: -ms-linear-gradient(#1b1b1b, #111);
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
box-shadow: inset 0 0 0 1px #272727;
display: inline-block;
color: #fff;
}
#txtp{} /*not usefull here, but I report here: it shouldn't create problems..*/
div.txtp{
z-index:10;
margin:0px;
width:1022px;
height: 664px;
background:white;
border: 1px solid #000;
font-size: 20;
margin-top: -1;
}
#video{
width: 1022px;
height: 664px;
}
iBook
