3 Replies Latest reply: May 21, 2013 7:20 PM by patixa
Polm Level 1 Level 1 (0 points)

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
  • gadgetgurl42 Level 2 Level 2 (175 points)

    Although I haven't yet tried it myself, there seems to be a common issue with videos in the HTML5 widget specifically. Whether this is a bug in iBA or whether the iBA HTML5 widget just doesn't support video at the moment (even it the video file is mp4) - maybe someone else here can shed light on the issue.

     

    However, the media widget allows an mp4 video to be included in an ibook with no problems. Perhaps this other widget would cater to your requirements?

  • Polm Level 1 Level 1 (0 points)

    Unfortunately, I have to do some other things, so the video is only a little but important part of my widget. All the other functionalities of the widget, fortunately, works perfectly.

    I hope Apple is going to fix very soon the bug.

    If no other can give some code that let me allow to reproduce some media content (video and/or audio) in my widget, I will look for some workaround but it will not be the same :-(

  • patixa Level 2 Level 2 (455 points)

    I've noted in a couple of other threads that this sometimes works for me.

     

    Find the original video file in Finder, select it, then

    Finder > Services > Encode Selected Video Files

     

    I haven't experimented with all of the settings to know which is "best", but try something appropriate to your content. When it's done, re-import the new file into your widget or iAd Producer project.