Offline (CD, Thumb Drive, etc) No-Install HTML + Video Presentation?

Question

Our company would like to put some marketing/training content onto USB thumb drives to distribute to our clients.

The content is HTML + some embedded videos. The videos (currently .flv's) are not interactive or anything like that, though they are important to the content. The tricky bit is that the HTML contains Javascript that needs to run when the video is finished.

Our first thought was to use a Flash video wrapper solution like Jwplayer. This works fine when the files are hosted on a web server. However, due to Flash's security policies, local (e.g. "file://foo.js") Javascript code cannot receive callbacks from Flash objects. Additionally, Internet Explorer users get nasty security warnings (as they darn well should!) when local web files contain ActiveX objects like Flash.

Ideas?

Ideally, we'd like to be as cross-browser and as cross-platform as possible without requiring users to install anything. But we can't guarantee they ll be able or willing to screw around with security settings and we can't guarantee they'll have an HTML5-video capable browser, either.

Seems like the default industry way to do this is to simply package things up into standalone Flash Player executable. Was wondering if it could be done otherwise, preferably with web standards.

Titanium Appcelerator Desktop would be close to perfect, though the desktop version doesn't support video!

Answer 1

OK. Here's the solution we're going with.

But first, here's what we're not using. I looked into Appcelerator Titanium, which promises to allow cross-platform desktop applications built with HTML5+CSS, using the WebKit rendering engine. They have a desktop edition, but it's pretty much neglected in favor of their mobile edition. Crucially, the Windows version of their desktop edition doesn't support video, which we need. Kind of a weird limitation, but I'm not going to knock them for focusing on the rapidly-expanding mobile market.

So, here's what we are going with: Mozilla Firefox, Portable Edition. Works great for this purpose with a few tweaks.

In this example we'll pretend we're making a marketing presentation for Acme Awesome Products.

1. Rename Files. In the Portable Firefox installation, rename FirefoxPortable/App/Firefox/firefox.exe to FirefoxPortable/App/Firefox/Acme.exe, rename the FirefoxPortable/App/Firefox directory to FirefoxPortable/App/Acme, and finally rename FirefoxPortable/PortableFirefox.exe to FirefoxPortable/Acme.exe. (see Explorer in screencap below)
2. INI Tweak. Copy FirefoxPortable/App/DefaultData/Settings/FirefoxPortableSettings.ini to FirefoxPortable/FirefoxPortableSettings.ini, and make the tweaks shown in the screenshot below. This will make the app launch with the desired window size, with no Firefox Portable splash screen, and with the start page of our choosing. You'll also need to change some of the paths in here to tell it where to find the files whose locations we changed in step #1. (See editor window in screencap below)
3. Hide Firefox App File Structure. For aesthetic reasons, you might want to right-click on all the files and folders in FirefoxPortable/ and make them hidden, except for Acme.exe.
4. Change Titlebar. Launch Acme.exe. Install the "Customize Titlebar" extension or something similar. Use that to change Portable Firefox's text to whatever you like. (Alternately, you can edit /FirefoxPortable/App/Acme/chrome/en-US.jar. Open the .jar and you'll see locale/branding/brand.dtd) Restart Acme.exe to see your titlebar changes.
5. Turn Off The Window Chrome. Go into Portable Firefox's View menu and turn off all of the chrome - the navbar, bookmark bar, status bar, etc. Keep in mind you can hit the "alt" key on your keyboard to get the menu bar back, and your end users can too. (Alternately, there are several "kiosk" style extensions for Firefox that will lock the app down farther. But for my purposes I didn't really care.)
6. Change The Application Icon. Use a program like IcoFx (excellent and free) to change the icon for FirefoxPortable/App/Acme/Acme.exe. Note: IANAL, but I believe you actually must remove official Mozilla branding, such as the Firefox logo, from Firefox before redistributing it.

At this point you have something fairly indistinguishable from a native application. Obviously an inventive user can peak around in your app's directory structure and see that you're using Firefox, and all Firefox's keyboard shortcuts would still be active. If this is an issue for you, "kiosk"-style extensions for Firefox do exist, some of which are fairly bulletproof, though I haven't tested any of them so I won't link to them here. Again, for me this wasn't an issue.

This approach has a lot of room for improvement. Future things I'd like to explore are

1. Various configuration tweaks to speed loading time
2. An autorun.inf to launch Acme.exe automatically
3. Of course OSX and Linux versions.
4. Way to disable Portable Firefox's keyboard shortcuts. (What's the best way? .ini/about:config tweaks? Extension? .ini/about:config tweaks should be faster)
5. Figure out how to change the icon for /FirefoxPortable/Acme.exe. According to this a recompile might be needed, unlike most .exe files.

Answer 2

Look into Microsoft HTA's - HTML Applications. They were specifically designed with your purpose in mind and can even be setup as the auto-run target on media insertion. You don't need to change your markup or html structure - just add the <HTA:Application> tag to any html file, rename to .hta and then you can reference the file path like you have it file:///xxx and it will use the logged in user's permissions to access the filesystem without warning.

If you need cross-platform compatibility then I recommend looking into Adobe AIR - similar concept but a bit more markup to get it running.

References:

HTA's

http://msdn.microsoft.com/en-us/library/ms536496(v=vs.85).aspx http://en.wikipedia.org/wiki/HTML_Application

Adobe AIR

http://www.adobe.com/products/air/