2010-12-13 40 views
10

Notre société souhaite mettre du contenu de marketing/formation sur des clés USB à distribuer à nos clients.En mode hors connexion (CD, lecteur de disquette, etc.) Non-Install HTML + Video Presentation?

Le contenu est au format HTML + certaines vidéos intégrées. Les vidéos (actuellement .flv) ne sont pas interactives ou quelque chose comme ça, même si elles sont importantes pour le contenu. Le bit délicat est que le HTML contient du Javascript qui doit fonctionner quand la vidéo est finie.

Notre première pensée était d'utiliser une solution wrapper vidéo Flash comme Jwplayer. Cela fonctionne très bien lorsque les fichiers sont hébergés sur un serveur Web. Cependant, en raison des politiques de sécurité de Flash, local (e.g. "file://foo.js") Javascript code cannot receive callbacks from Flash objects. De plus, les utilisateurs d'Internet Explorer reçoivent des avertissements de sécurité désagréables (comme ils le devraient!) Lorsque des fichiers web locaux contiennent des objets ActiveX comme Flash.

Des idées?

Idéalement, nous aimerions être aussi cross-browser et comme multiplateforme possible sans obliger les utilisateurs à installer quoi que ce soit. Mais nous ne pouvons pas garantir qu'ils seront en mesure ou désireux de se débrouiller avec les paramètres de sécurité et nous ne pouvons pas garantir qu'ils auront un navigateur compatible HTML5-vidéo, soit.

On dirait que la façon dont l'industrie par défaut pour ce faire est d'emballer simplement les choses dans l'exécutable autonome de Flash Player. Je me demandais si cela pouvait être fait autrement, de préférence avec des standards web.

Titanium Appcelerator Desktop serait proche de la perfection, bien que la version de bureau ne prend pas en charge la vidéo!

+0

choses d'emballage en un serveur Web autonome peut être une alternative. –

Répondre

5

OK. Voici la solution que nous proposons. Mais d'abord, voici ce que nous sommes pas utilisant. J'ai regardé dans Appcelerator Titanium, qui promet d'autoriser les applications de bureau multiplateformes construites avec HTML5 + CSS, en utilisant le moteur de rendu WebKit. Ils ont une édition de bureau, mais il est assez négligé en faveur de leur édition mobile. Fondamentalement, la version Windows de leur édition de bureau ne supporte pas la vidéo, dont nous avons besoin.Une sorte de limitation étrange, mais je ne vais pas les frapper pour se concentrer sur le marché mobile en pleine expansion.

Alors, voici ce que nous proposons: Mozilla Firefox, Portable Edition. Fonctionne très bien dans ce but avec quelques réglages.

Dans cet exemple, nous ferons semblant de faire une présentation marketing pour les produits Acme Awesome.

  1. Renommer les fichiers. Dans la portable installation de Firefox, renommer FirefoxPortable/App/Firefox/firefox.exe-FirefoxPortable/App/Firefox/Acme.exe, renommer le répertoire FirefoxPortable/App/Firefox-FirefoxPortable/App/Acme , et enfin renommer FirefoxPortable/PortableFirefox.exe en FirefoxPortable/Acme.exe. (Voir explorateur dans le screencap ci-dessous)
  2. INI Tweak. Copier FirefoxPortable/App/DefaultData/Paramètres/FirefoxPortableSettings.ini à FirefoxPortable/FirefoxPortableSettings.ini, et effectuez les modifications indiquées dans la capture d'écran ci-dessous. Cela permettra à l'application de se lancer avec la taille de fenêtre souhaitée, sans écran de démarrage Firefox Portable, et avec la page de démarrage de notre choix. Vous devrez également modifier certains des chemins ici pour lui indiquer où trouver les fichiers dont nous avons changé les emplacements à l'étape 1. (Voir la fenêtre de l'éditeur dans le screencap ci-dessous)
  3. Masquer la structure du fichier de l'application Firefox. Pour des raisons esthétiques, vous pouvez cliquer avec le bouton droit de la souris sur tous les fichiers et dossiers dans FirefoxPortable/ et les masquer, sauf pour Acme.exe.
  4. Modifier la barre de titre. Lancez Acme.exe. Installez le "Customize Titlebar" extension ou quelque chose de similaire. Utilisez-le pour changer le texte de Portable Firefox en celui que vous voulez. (Alternativement, vous pouvez éditer /FirefoxPortable/App/Acme/chrome/-US.jar. Ouvrez le fichier .jar et vous verrez locale/branding/brand.dtd) Redémarrez Acme.exe pour voir votre barre de titre changements.
  5. Désactiver la fenêtre Chrome. Allez dans le menu Affichage portable de Firefox et désactivez tout le chrome - la barre de navigation, la barre de favoris, la barre d'état, etc. Gardez à l'esprit que vous pouvez appuyer sur la touche "alt" de votre clavier pour revenir à la barre de menu les utilisateurs peuvent aussi. (Alternativement, il existe plusieurs extensions de type "kiosque" pour Firefox qui verrouillent l'application plus loin, mais pour mes fins, je m'en fichais vraiment.)
  6. Changer l'icône de l'application. Utilisez un programme comme IcoFx (excellent et gratuit) pour changer l'icône pour FirefoxPortable/App/Acme/Acme.exe. Remarque: IANAL, mais je crois que vous devez effectivement supprimer l'image de marque officielle de Mozilla, comme le logo Firefox, de Firefox avant de le redistribuer.

Screenshot of the final app

À ce stade, vous avez quelque chose d'assez indiscernable d'une application native. Évidemment, un utilisateur inventif peut pointer dans la structure du répertoire de votre application et voir que vous utilisez Firefox, et tous les raccourcis clavier de Firefox seraient toujours actifs.S'il s'agit d'un problème pour vous, il existe des extensions de type "kiosque" pour Firefox, dont certaines sont assez à l'épreuve des balles, bien que je n'en ai testé aucune, je ne les lierai donc pas ici. Encore une fois, pour moi ce n'était pas un problème.

Cette approche a beaucoup de place pour l'amélioration. les choses futures que je voudrais explorer sont

  1. Divers réglages de configuration en temps de chargement de vitesse
  2. Un autorun.inf pour lancer automatiquement Acme.exe
  3. Bien sûr versions OSX et Linux.
  4. Permet de désactiver les raccourcis clavier de Portable Firefox. (Quelle est la meilleure façon? .ini/about: config tweaks? Extension? .ini/about: config tweaks devrait être plus rapide)
  5. Figure dehors comment changer l'icône pour /FirefoxPortable/Acme.exe. Selon this une recompilation pourrait être nécessaire, contrairement à la plupart des fichiers .exe.
1

Regardez dans Microsoft HTA - Applications HTML. Ils ont été spécialement conçus en fonction de votre objectif et peuvent même être configurés en tant que cibles à exécution automatique sur l'insertion de média. Vous n'avez pas besoin de changer votre balisage ou la structure html - il suffit d'ajouter le < HTA: Application > étiquette à un fichier html, RENAME pour .hta et vous pouvez référencer le chemin du fichier comme vous l'avez file: /// xxx et il utilisera les autorisations de l'utilisateur connecté pour accéder au système de fichiers sans avertissement.

Si vous avez besoin de compatibilité multi-plateforme alors je vous recommande de regarder dans Adobe AIR - concept similaire mais un peu plus de balisage pour le faire fonctionner.

Références:

de HTA

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/

+0

Merci pour la réponse! AIR fonctionnerait, mais nous aimerions l'éviter car les utilisateurs auraient besoin d'installer le moteur d'exécution AIR s'ils ne l'avaient pas déjà installé. –

0

Si cela est juste du marketing/contenu de formation, pourquoi ne pas l'intégrer dans un fichier PowerPoint où vous pouvez toujours avoir vid eo?

+0

Je vois ce que vous dites. Mais être autonome et multiplateforme est l'un des grands objectifs. –

0

Je travaille sur un projet similaire. Je suis allé avec FF portable aussi, mais n'était pas satisfait de la vitesse. J'ai trouvé cet autre petit navigateur compatible avec Mac et Linux. Vous devez d'abord copier le fichier .exe sur un disque inscriptible pour modifier les paramètres et créer les dossiers de cache et de paramètres nécessaires (désactivez tous les paramètres d'écriture dans le navigateur pour éviter les erreurs), puis vous pouvez le graver sur CD.

Très bon travail jusqu'à maintenant!

QT Web Browser