Newbie: Wrapping HTML5 Web App in Adobe AIR -> How to embed videos?

[Guest]

Hi Adobe AIR experts,

I developed a HTML5 based web application for our sales department. The web app is running fine on their laptops using Firefox or Chrome as a browser. I'm using the HTML5 appcache mechanism so that the application is also available in offline mode.

When trying to make the web application also available for iPads, I stumbled across the problem that Safari has a storage limit of about ~50MB for offline web apps. (The application size is ~600MB containing several videos, PDF documents, images, etc...)

I did some research on how to solve this issue and came across Adobe Air as a container for web applications. I wrapped the application, created an AIR file and was surprised that all the HTML, JavaScript, CSS automatically worked fine - except one feature: The html5 video tag I'm using which is working fine in all browsers (even Safari) unfortunately seems not to work in AIR. I tried the following workarounds:

• Using an iframe to display the video
• Using the <object> and <embed> tags
• Directly linking to the video file

None of the solutions worked in AIR. The videos (MP4 files I got from the marketing guys) simply aren't displayed at all.

I found the following solution: http://hacksnsnacks.com/hacks/playing-mp4-videos-in-the-native-ios-video-player-with-stagewebview/

However this seems to be realized using Action Script which I don't know and which I don't know how to combine it with JavaScript.

So my questions now is:

How can I embed an MP4 video file in a HTML based AIR application so that it can be played on iPads?

• According to what I found in the official AIR documentation, this should be possible. If possible, we'd really like to stick to the MP4 format and not convert the video to flash or sth. like that. Also uploading the videos to youtube, etc. is not an option (as the must be available in offline mode and some of them contain very company specific know-how we don't want to publish).
• If possible, I really would like to keep as much of the application logic as possible in JavaScript and only make a minor extension using Action Script to play the videos.

I'm sorry, if this is a dumb question, but as I said I'm a complete Adobe AIR noob and this issue is blocking me for 2 weeks now and I wasn't able to find a solution myself for this.

So any help would be greatly appreciated!

Kind regards,

Johannes

[Guest]

Im guessing you are using the HTMLLoader object to display your web application in AIR based on your problem. If that is the case, then you are a bit out of luck as your only option is using ActionScript to play videos. The reason being is that Adobe refuses to update their version of Webkit in AIR which is so old, it doesn't support HTML5 video or audio. I think on the bug page that was created about the dated webkit version had a response from Adobe of something along the lines of "low priority".

JavaScript can make calls to ActionScript methods using the ExternalInterface class, so the best route I can think of offhand would be to use this to trigger a Flash video player that would appear on top of the HTMLLoader. If this would be both an AIR app and a web app that could work in the browser, you might have to get fancy to detect which one is being used to view the web app.

Sorry I couldn't bring you good news.

[Guest]

Thank you guys for your support

My air application descriptor is pointing to the "index.html" of my web application:

[...]

	<initialWindow>
	<content>index.html</content>
	<visible>true</visible>
	<width>1024</width>
	<height>786</height>
	</initialWindow>

[...]

So I don't even know whether or not I'm using the HTMLLoader but with the help of @wadedwalker's hint, I was able to find the following link:

http://anirudhsasikumar.net/blog/2007.12.19.html

This is working! However as wadedwalker mentioned, the video is now played in a small box on top of my HTML pages left upper corner. If I understand you guy's correctly, it is not possible to embed this video box into a certain HTML element, right?

Would it be possible to make the video play in full screen, add the player controls and a button to close this pop-up?

It's okay for me to have some AIR specific JavaScript here, I can handle this in a build script and only embed the code when the AIR version for the iPads is build.

Thanks in advance,

J.

[Guest]

I partly got a solution for this by adding a pop-under under the video. The pop-under contains a HTML button that is displayed below the video.

when displaying the video I use

     window.htmlLoader.stage.addChildAt(video,1);

to place the video

When the HTML button in the pop-under is clicked, I use

     window.htmlLoader.stage.removeChildAt(1);

to remove the video.

Not sure this is a good solution, but it works so far...

I still haven't found a solution to display the video controls (play, pause, progess bar, volume, etc...)

King regards,

J.

[Guest]

*push*

Any recommendations on how this could be solved and video player controls can be displayed?

Thanks

King regards,

J.

[User_Unknow]

If you want to add controls to native html5 video tag - just add it;

<video src="" controls>

</video>

put controls without any additional chars.

[Guest]

From what I have read, if it was stagewebview it should have worked without any issues. If it is stagewebview then it is possible that the encoding is not something iOS can play. Check what the bit rate is for the videos and make sure it isn't too high and that the level/profile are within iOS specs (Google it, sorry don't know of the top of my head)