video playback for iPhone / iPad

1,610 views
Skip to first unread message

Tre Stange

unread,
Aug 30, 2010, 2:37:10 PM8/30/10
to phonegap
Hello.

I apologize if this is a redundant post, but I've been searching high
and low in these discussions but cannot seem to find an answer.

I want to bundle my mp4 into the app that I am making with PhoneGap.
Currently I'm using HTML5 video tag to embed the video in the web app.
When I test in Safari, works like a charm, but when I create the app
in Xcode with PhoneGap and test in the iPad simulator, all I get is
the splash screen with the video play symbol with a line thru it.

Is there a PhoneGap plugin that will allow this? Do I need to use some
other protocol to achieve this?

I've seen a post by PanMan about a MediaPlayer framework, but it all
seems to talk about referencing a video online, not offline or bundled
in the app itself. Needless to say I'm a but confused. Any thoughts on
the matter?

Thanks very much one and all!

Shazron Abdullah

unread,
Aug 30, 2010, 4:04:58 PM8/30/10
to Tre Stange, phonegap
Your video is probably not encoded right. Note the last line below...

http://developer.apple.com/safari/library/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-DontLinkElementID_12

--------
Supported Media
Safari on the desktop supports any media the installed version of QuickTime can play. This includes media encoded using codecs QuickTime does not natively support, provided the codecs are installed on the user’s computer as QuickTime codec components.

Safari on iPhone OS (including iPad) currently supports uncompressed WAV and AIF audio, MP3 audio, and AAC-LC or HE-AAC audio. HE-AAC is the preferred format.

Safari on iPhone OS (including iPad) currently supports MPEG-4 video (Baseline profile) and QuickTime movies encoded with H.264 video (Baseline profile) and one of the supported audio types.

iPad and iPhone 3G and later support H.264 Baseline profile 3.1. Earlier versions of iPhone support H.264 Baseline profile 3.0.
--------

> --
> You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com

Tre Stange

unread,
Aug 31, 2010, 10:47:11 AM8/31/10
to phonegap
Hi.

Thanks for your input, but something is still amiss. The video plays
back on the iPad when it's in its 'Web App' form. But as soon as I try
to compile the 'Native App' using PhoneGap and test thru the
simulator, I'm getting the play button with the line thru it. So....if
the video is playing on the iPad via Web App, I think the video
encoding should be just fine. What could I be missing?

I really need this video to be part of the app and not calling out to
the web. What could I be missing? I did notice in Xcode that under
PhoneGapLib.xcodejroj, the file libPhoneGapLib.a is red - which I
think means its missing. Could this be an issue?

Thanks again.

On Aug 30, 3:04 pm, Shazron Abdullah <shazron.abdul...@nitobi.com>
wrote:
> Your video is probably not encoded right. Note the last line below...
>
> http://developer.apple.com/safari/library/documentation/AudioVideo/Co...

Tre Stange

unread,
Aug 31, 2010, 4:43:22 PM8/31/10
to Shazron Abdullah, phonegap


On Tue, Aug 31, 2010 at 12:59 PM, Shazron Abdullah <sha...@gmail.com> wrote:
On 2010-08-31, at 7:47 AM, Tre Stange wrote:

> Hi.
>
> Thanks for your input, but something is still amiss. The video plays
> back on the iPad when it's in its 'Web App' form. But as soon as I try
> to compile the 'Native App' using PhoneGap and test thru the
> simulator, I'm getting the play button with the line thru it. So....if
> the video is playing on the iPad via Web App, I think the video
> encoding should be just fine. What could I be missing?
>

Double check your video source. Try just modifying index.html to just be a plain webpage without phonegap.js or any phonegap calls. Slap a video tag in there with a known source to see if it plays (remote or local source that is in your www folder, relatively pathed). Try to isolate the problem to just video and nothing else...

I must be a complete idiot because I'm not certain what you are asking me to do here. Are you saying i should modify the index file within the AppName/www folder, or am i supposed to be going outside of the folder that PhoneGap made for me? I understand your want to isolate the issue and try troubleshooting, but I'm just not sure if you're saying I should go outside the area created for me by Xcode or stay within and remove all my other code to try to, as you say, isolate the issue.  

> I really need this video to be part of the app and not calling out to
> the web. What could I be missing? I did notice in Xcode that under
> PhoneGapLib.xcodejroj, the file libPhoneGapLib.a is red - which I
> think means its missing. Could this be an issue?
>

Don't know, you tell me. Try double clicking on the PhoneGapLib.xcodeproj in your app project, does it launch the project? If not you didn't install PhoneGapLib properly.

The PhoneGapLib.xcodeproj is *not* in my app folder. The instructions had me place PhoneGapLib folder in my Documents folder. I have to say the installation of PhoneGap was a bit confusing to me, but I do believe I did it correctly.

Any advice you have regarding this would be fantastic.

Thanks so much for you help.

Tre Stange

unread,
Aug 31, 2010, 5:12:55 PM8/31/10
to Shazron, phonegap
On Tue, Aug 31, 2010 at 3:46 PM, Shazron <sha...@gmail.com> wrote:
> I must be a complete idiot because I'm not certain what you are asking me to
> do here. Are you saying i should modify the index file within the
> AppName/www folder, or am i supposed to be going outside of the folder that
> PhoneGap made for me? I understand your want to isolate the issue and try
> troubleshooting, but I'm just not sure if you're saying I should go outside
> the area created for me by Xcode or stay within and remove all my other code
> to try to, as you say, isolate the issue.

How did you add your video code in PhoneGap? By modifying the
www/index.html file right? Thats where you do the test, or create a
new PhoneGap Project and do it there.

I have the video code in there [ <video src="vid/video.mp4" width="1024" height="576" poster="img/video.jpg" controls="controls"></video> ] from the web app version I created before I dumped my html into the www folder of the PhoneGap/Xcode project that Xcode created for me when I started the project. Was that where I err'd? Need I edit the html file within Xcode to add it? Is the HTML5 code I created before adding to the project wrong to use within the PhoneGap/Xcode environment?

>> > I really need this video to be part of the app and not calling out to
>> > the web. What could I be missing? I did notice in Xcode that under
>> > PhoneGapLib.xcodejroj, the file libPhoneGapLib.a is red - which I
>> > think means its missing. Could this be an issue?
>> >
>>
>> Don't know, you tell me. Try double clicking on the PhoneGapLib.xcodeproj
>> in your app project, does it launch the project? If not you didn't install
>> PhoneGapLib properly.
>>
> The PhoneGapLib.xcodeproj is *not* in my app folder. The instructions had me
> place PhoneGapLib folder in my Documents folder. I have to say the
> installation of PhoneGap was a bit confusing to me, but I do believe I did
> it correctly.
> Any advice you have regarding this would be fantastic.
> Thanks so much for you help.

It's in Xcode, in your project itself.
Ok. I see. The file is within Xcode window in my project: see attachement. But if I hover over it, it actually references a file in my ~/Documents folder -  I assume it compiles it upon build. But as you can see from the attachment, that one file is still red. Not sure what that means....

Screen shot 2010-08-31 at 4.06.23 PM.png

Shazron Abdullah

unread,
Aug 31, 2010, 5:17:32 PM8/31/10
to Tre Stange, Shazron, phonegap
> I have the video code in there [ <video src="vid/video.mp4" width="1024"
> height="576" poster="img/video.jpg" controls="controls"></video> ] from the
> web app version I created before I dumped my html into the www folder of the
> PhoneGap/Xcode project that Xcode created for me when I started the project.
> Was that where I err'd? Need I edit the html file within Xcode to add it? Is
> the HTML5 code I created before adding to the project wrong to use within
> the PhoneGap/Xcode environment?

PhoneGap loads www/index.html on startup, always.

> Ok. I see. The file is within Xcode window in my project: see attachement.
> But if I hover over it, it actually references a file in my ~/Documents
> folder -  I assume it compiles it upon build. But as you can see from the
> attachment, that one file is still red. Not sure what that means....

Compiles on build... Launch it to see if the project actually exists.

Tre Stange

unread,
Aug 31, 2010, 5:35:32 PM8/31/10
to sha...@nitobi.com, Shazron, phonegap
On Tue, Aug 31, 2010 at 4:17 PM, Shazron Abdullah <shazron....@nitobi.com> wrote:
> I have the video code in there [ <video src="vid/video.mp4" width="1024"
> height="576" poster="img/video.jpg" controls="controls"></video> ] from the
> web app version I created before I dumped my html into the www folder of the
> PhoneGap/Xcode project that Xcode created for me when I started the project.
> Was that where I err'd? Need I edit the html file within Xcode to add it? Is
> the HTML5 code I created before adding to the project wrong to use within
> the PhoneGap/Xcode environment?

PhoneGap loads www/index.html on startup, always.
 
Understood. But is my implementation of code incorrect? As I mentioned, it works just fine on the iPad as Web based App, but when I bring that web app that runs fine as is, into the PhoneGap/Xcode environment, I get the play symbol with the line thru it when I build and run in the simulator. I can only run thru the simulator at this point as I haven't paid to be in the Program at this point.

> Ok. I see. The file is within Xcode window in my project: see attachement.
> But if I hover over it, it actually references a file in my ~/Documents
> folder -  I assume it compiles it upon build. But as you can see from the
> attachment, that one file is still red. Not sure what that means....

Compiles on build... Launch it to see if the project actually exists.
As mentioned above, I build and run in the simulator and all things function great with the exception of the video. Maybe after all this its just a Simulator thing...? 

Thanks again. I really appreciate your help on this.

Shazron Abdullah

unread,
Aug 31, 2010, 5:42:17 PM8/31/10
to Tre Stange, phonegap
Looks fine to me. iPhone simulator uses the desktop quicktime, so it
may have issues there:
http://discussions.info.apple.com/message.jspa?messageID=8538445

Tre Stange

unread,
Aug 31, 2010, 6:37:23 PM8/31/10
to sha...@nitobi.com, phonegap
Wow. Thanks for the link. Boy will I be upset if its just the fact that the simulator has issues.....think its time i ponyed up and got into the Program to test it on an actual device. This could make my pains go away!

Thanks again.

|t

Jesse MacFadyen

unread,
Aug 31, 2010, 7:54:46 PM8/31/10
to Tre Stange, sha...@nitobi.com, phonegap
... and ours. Bazinga!

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com



--
--
Jesse MacFadyen
{
  blog:'blogs.nitobi.com/jesse',
  email:'jesse.m...@nitobi.com',
  company:
  {
    name:'Nitobi Software',
    site:'www.nitobi.com',
    phone:
    {
      office:'+1 (604) 685-9287',
      tollFree:'1-866-632-2777'
     }
  }
}

Tre Stange

unread,
Sep 1, 2010, 2:51:41 PM9/1/10
to phonegap
Just wanted to let everyone know that the video plays just great in
the app itself. Thanks everyone!

On Aug 31, 6:54 pm, Jesse MacFadyen <jesse.macfad...@nitobi.com>
wrote:
> > phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>
> > For more options, visit this group at
> >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > For more info on PhoneGap or to download the code go towww.phonegap.com
>
> --
> --
> Jesse MacFadyen
> {
>   blog:'blogs.nitobi.com/jesse',
>   email:'jesse.macfad...@nitobi.com <email%3A%27jesse.macfad...@nitobi.com>
Reply all
Reply to author
Forward
0 new messages