1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    32
    Vote Rating
    0
    planewryter is on a distinguished road

      0  

    Default Video INOP on iPhone 3G with iOS 4.2.1

    Video INOP on iPhone 3G with iOS 4.2.1


    Been trying for hours to get this simple video app to work on an iPhone 3G running iOS 4.2.1:

    v2.html is the root:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
        <title>Mobile Video</title>
            <script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
            <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="src/v.js"></script>
    </head>
    <body></body>
    </html>
    and here's the v.js file...lifted from the examples:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            var pnl = new Ext.Panel({
                layout: {
                    type: 'vbox',
                    pack: 'center'
                },
                items: [{
                    xtype: 'video',
                    url: 'FirstRun.mp4',
                    loop: false,
                    width: 480,
                    height: 320,
                    posterUrl: 'Screenshot.png'
                }],
                fullscreen: true
            })
        }
    });
    FirstRun.mp4 is in the same directory as v2.html.

    Any ideas? I've spent nearly 12 hours today trying to get this to work...any & all suggestions are warmly welcomed with appreciation.

    Plane Wryter

  2. #2
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    code looks good, did you test it in safari or chrom, if so are any errors thrown in the console? is the video decoded in way which is compatible to iphone, is the video working if you sync it with itunes to you iphone?

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    32
    Vote Rating
    0
    planewryter is on a distinguished road

      0  

    Default


    Hi mrsunshine,

    Thanks for the reply.

    The code works fine in Desktop Chrome and Desktop Safari (Win7). I've used Chrome's Developer Tools for hours trying to trace what's missing/wrong...no joy.

    So...to isolate as many variables as possible, I've created a third version...which falls back to the original Sencha Touch example video included in the Touch download...including using the 'space.mp4' video file included with the demo.

    v3.html is now:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;
        charset=utf-8">
        <title>Mobile Video</title>
            <script src="lib/touch/sencha-touch-debug.js" type=
            "text/javascript"></script>
            <link href=
            "lib/touch/resources/css/sencha-touch.css" rel=
            "stylesheet" type="text/css" />
            <script type="text/javascript" src="src/v3.js">
            </script>
    </head>
    <body></body>
    </html>
    and v3.js is now:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            var pnl = new Ext.Panel({
                layout: {
                    type: 'vbox',
                    pack: 'center'
                },
                items: [{
                    xtype: 'video',
                    url: 'space.mp4',
                    loop: false,
                    width: 480,
                    height: 320,
                    posterUrl: 'Screenshot.png'
                }],
                fullscreen: true
            })
        }
    });
    The 'Screenshot.png' has loaded fine on the iPhone 3G (in all versions of my test...v1, v2 and now v3). When I tap on the 'Screenshot.png' on the iPhone the screen goes blank.

    Have you been able to get a video to play on an iPhone 3x using Sencha Touch? If so, would you be willing to share some of your code?

    Many, many thanks...and other readers of this thread who've successfully used Sencha Touch to display video on an iPhone are welcomed & invited to join this discussion.

    Plane Wryter

  4. #4
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    32
    Vote Rating
    0
    planewryter is on a distinguished road

      0  

    Default


    I fixed it!

    It works!

    Just spent 2 hours trolling around Apple's Developer site...and found a reference to the standards for encoding video files for Safari (and iOS 4.x).

    The article is Creating Video in the Safari Web Content Guide.

    In the article, it mentions that .MOV files need to be encoded with QuickTime Pro! (Who knew?)

    This was news to me. I'd originally encoded my video file using Camtasia's .MOV for iPhone CODEC...which...turns out...iOS Safari doesn't like. So, I took the Camtasia .MOV file...imported it into QuickTime Pro...and used the Export for Web function...which produced an .M4V file...which I uploaded to my Apache webserver...change the JS to use the .M4V file...and it worked!!

    The key to this solution (for all who follow) is to re-encode your .MOV files using Apple's QuickTime Pro Export for Web function.

    Hope this helps others who struggle with the same problem.

    Best regards, Plane Wryter

Similar Threads

  1. Youtube - open video player on iphone
    By DigiDood in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 4 Oct 2010, 3:54 PM
  2. Can I play a YouTube video in Ext.Video component?
    By eDissideNT in forum Sencha Touch 1.x: Discussion
    Replies: 7
    Last Post: 27 Sep 2010, 11:00 AM
  3. Replies: 1
    Last Post: 15 Sep 2010, 2:31 PM
  4. [UNKNOWN][3.0.0] demo: "Binding Grid->Form" .. code-button inop
    By Mike Robinson in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 8 Sep 2009, 7:07 AM

Thread Participants: 1

Tags for this Thread