1. #1
    Sencha User
    Join Date
    Nov 2011
    Vote Rating
    xamtur is on a distinguished road


    Default Video on iPad ad iPhone playback failure and strange graphic artifacts

    Hi there,
    I have a problem with video playback.
    I read all of your guides and tried with different video encoding tools but the result is always the same: no autoplay nor play on ipad and iphone. The only solution is to publish with the "Play controls" option flagged...but this is not what I want.
    A second issue is that I can see random black lines around the video on my Ipad and sometimes on Chrome (Windows version).

    Here you can find a small test with a single scene project produced with your latest version of Sencha 1.3.198 that contains a single animation:


    Video object properties:
    .jpg format for Poster Image
    .m4v format for H.264 src
    .webm format for WebM src,
    Preload flagged
    Autoplay flagged
    Play Controls unflagged

    Windows Google Chrome results: white page
    Safari iPad result: I can see only Poster Image + random unwanted black lines around the video box
    Safari iPhone result: I can see only Poster Image + random unwanted black lines around the video box


  2. #2
    Sencha User
    Join Date
    Apr 2012
    Vote Rating
    miro.bojic has a spectacular aura about miro.bojic has a spectacular aura about



    Hi xamtur,

    I took a look at your example, and it seems that there is something wrong with the m4v file that you included. If you try to open or download the file at http://www.aviotraceswiss.com/apps/r..._in_clouds.m4v it does not play and it shows 0 bytes. The webm video works fine it seems.

    Because the browser will try to render mp4 before webm, it seems that this causes nothing to display. I took the liberty to convert the webm file from your example back to mp4 (note that browsers can be quirky with playing m4v, while mp4 should work most of the time). If you send me your email address by private message, I will send you the project with the video that works in Chrome as intended.

    Regarding autoplay on iPhone and iPad - this is something that is not possible, at least not in an easy way. iOS is configured in such a way that any video must be manually started and will only play full screen. Quickly searching on google reveals that many are trying to go around this by simulating the user action of starting the video with JavaScript the moment the page loads, but that is a hack - there is no straightforward way to do it, and it doesn't seem that Apple will allow autoplay for videos.

    Finally, regarding the black lines around the video, I observed them at certain zoom levels - it looks to me that this is a pixel roundoff error by iOS Safari - it looks like the actual width of the video and the overlay image are calculated differently inside the viewport. I would suggest to remove the thin white border in your video, this way this artifact should be less noticeable, or to put the background of your project to black under Properties -> Scene -> Background.

Thread Participants: 1

Tags for this Thread