2010-12-13 13 views
10

Nasza firma chciałaby umieścić materiały marketingowe/szkoleniowe na dyskach USB do dystrybucji dla naszych klientów.Offline (CD, Thumb Drive, itp.) No-Install HTML + Video Presentation?

Treścią jest HTML + niektóre filmy osadzone. Filmy wideo (obecnie .flv) nie są interaktywne ani nic w tym stylu, choć są ważne dla treści. Najtrudniejsze jest to, że kod HTML zawiera kod JavaScript, który należy uruchomić po zakończeniu wideo.

Naszą pierwszą myślą było zastosowanie rozwiązania do owijania wideo Flash, takiego jak Jwplayer. Działa to dobrze, gdy pliki są przechowywane na serwerze internetowym pod numerem . Jednak ze względu na zasady bezpieczeństwa Flash, local (e.g. "file://foo.js") Javascript code cannot receive callbacks from Flash objects. Ponadto użytkownicy przeglądarki Internet Explorer otrzymują nieprzyjemne ostrzeżenia o zabezpieczeniach (jak powinny one być!), Gdy lokalne pliki sieciowe zawierają obiekty ActiveX, takie jak Flash.

Pomysły?

Idealnie chcielibyśmy być w różnych przeglądarkach i jak najbardziej wieloplatformowe, bez konieczności instalowania czegokolwiek. Nie możemy jednak zagwarantować, że będą oni w stanie lub chcą wkręcić się z ustawieniami zabezpieczeń i nie możemy zagwarantować, że będą mieć przeglądarkę obsługującą HTML5-wideo.

Wydaje się, że domyślnym sposobem w branży jest zrobienie pakietu w samodzielny plik wykonywalny programu Flash Player. Zastanawiałeś się, czy można to zrobić inaczej, najlepiej przy użyciu standardów internetowych.

Titanium Appcelerator Desktop będzie blisko idealnego, chociaż wersja na komputery nie obsługuje wideo!

+0

pakowania rzeczy do góry do autonomicznego serwera WWW może być alternatywą. –

Odpowiedz

5

OK. Oto rozwiązanie, z którym mamy zamiar.

Ale najpierw, tutaj jest nie za pomocą. Zaglądałem do wersji Appcelerator Titanium, która ma umożliwić stosowanie wieloplatformowych aplikacji komputerowych zbudowanych za pomocą HTML5 + CSS przy użyciu mechanizmu renderowania WebKit. Mają one wydanie na komputery stacjonarne, ale są raczej zaniedbywane na korzyść ich wersji mobilnej. Co najważniejsze, wersja Windows ich wersji stacjonarnej nie obsługuje filmów, których potrzebujemy.Jakieś dziwne ograniczenia, ale nie zamierzam ich ogłuszać za skupienie się na szybko rozwijającym się rynku mobilnym.

Oto, o co nam chodzi: Mozilla Firefox, Portable Edition. Działa doskonale do tego celu, wprowadzając kilka poprawek.

W tym przykładzie będziemy udawać, że robimy prezentację marketingową dla produktów Acme Awesome.

  1. Zmiana nazwy plików. w przenośnym instalacji Firefoksa, zmiana nazwy FirefoxPortable/App/Firefox/firefox.exe do FirefoxPortable/APP/Firefox/Acme.exe, zmień nazwę FirefoxPortable/App/Firefox katalog do FirefoxPortable/App/Acme , a na koniec zmień nazwę na FirefoxPortable/PortableFirefox.exe na FirefoxPortable/Acme.exe. (patrz Explorer w screencap poniżej)
  2. INI Tweak. Skopiuj plik FirefoxPortable/App/DefaultData/Settings/FirefoxPortableSettings.ini na FirefoxPortable/FirefoxPortableSettings.ini, a następnie zrób poprawki widoczne na zrzucie ekranu poniżej. Spowoduje to uruchomienie aplikacji z żądanym rozmiarem okna, bez ekranu startowego przeglądarki Firefox i z wybraną przez nas stroną początkową. Będziesz także musiał zmienić niektóre ścieżki tutaj, aby powiedzieć, gdzie znaleźć pliki, których lokalizacje zmieniliśmy w kroku 1. (Patrz okno edytora w pliku screencap poniżej)
  3. Ukryj strukturę plików aplikacji Firefox. Ze względów estetycznych możesz kliknąć prawym przyciskiem myszy wszystkie pliki i foldery w pliku FirefoxPortable/ i ukryć je, z wyjątkiem Acme.exe.
  4. Zmiana paska tytułu. Uruchom program Acme.exe. Zainstaluj urządzenie "Customize Titlebar" extension lub coś podobnego. Użyj tego, aby zmienić tekst Portable Firefox na dowolny. (Alternatywnie, możesz edytować /FirefoxPortable/App/Acme/chrome/en-US.jar. Otwórz plik .jar, a zobaczysz locale/branding/brand.dtd) Zrestartuj Acme.exe, aby zobaczyć swój pasek tytułu zmiany.
  5. Wyłącz okno Chrome. Przejdź do menu Widok przenośnej przeglądarki Firefox i wyłącz wszystkie funkcje chrome - pasek nawigacji, pasek zakładek, pasek stanu itp. Pamiętaj, że możesz nacisnąć klawisz "alt" na klawiaturze, aby przywrócić pasek menu i koniec użytkownicy też mogą. (Alternatywnie, istnieje kilka "kioskowych" rozszerzeń do Firefoksa, które zablokują aplikację jeszcze bardziej, ale dla moich celów tak naprawdę mnie to nie obchodziło.)
  6. Zmiana ikony aplikacji. Użyj programu takiego jak IcoFx (doskonały i bezpłatny), aby zmienić ikonę dla FirefoxPortable/App/Acme/Acme.exe. Uwaga: IANAL, ale uważam, że musisz musi usunąć oficjalne logo Mozilli, takie jak logo Firefoksa, z Firefoksa przed jego redystrybucją.

Screenshot of the final app

W tym momencie masz coś całkiem nie do odróżnienia od natywnej aplikacji. Oczywiście wynalazcy mogą osiągnąć szczyt w strukturze katalogów aplikacji i zobaczyć, że korzystasz z Firefoksa, a wszystkie skróty klawiaturowe Firefoksa będą nadal aktywne.Jeśli jest to dla ciebie problem, istnieją rozszerzenia w stylu "kiosku" dla Firefoksa, z których niektóre są dość odporne na kule, ale nie testowałem żadnego z nich, więc nie będę ich tutaj łączył. Ponownie, dla mnie to nie był problem.

Takie podejście ma wiele do zrobienia. Przyszłe rzeczy, które chciałbym do zbadania są

  1. Różne szczypie konfiguracyjne, aby przyspieszyć czas ładowania
  2. autorun.inf, aby uruchomić Acme.exe automatycznie
  3. Oczywiście wersje OSX i Linux.
  4. Sposób wyłączania skrótów klawiaturowych w przenośnej przeglądarce Firefox. (Jaka jest najlepsza metoda? .ini/about: config tweaks? Rozszerzenie? .ini/about: zmiany konfiguracji powinny być szybsze)
  5. Dowiedz się, jak zmienić ikonę dla /FirefoxPortable/Acme.exe. Według this może być konieczne ponowne przekompilowanie, w przeciwieństwie do większości plików .exe.
1

Zajrzyj do aplikacji Microsoft HTA - HTML Applications. Zostały zaprojektowane specjalnie z myślą o twoim celu, a nawet można je skonfigurować jako cel automatycznego uruchamiania przy wstawianiu mediów. Nie musisz zmieniać struktury znaczników ani html - po prostu dodaj znacznik HTA: Application > do dowolnego pliku html, zmień nazwę na .hta, a następnie odnieś ścieżkę do pliku tak, jak masz plik: /// xxx i użyje uprawnień zalogowanego użytkownika, aby uzyskać dostęp do systemu plików bez ostrzeżenia.

Jeśli potrzebujesz kompatybilności między platformami, to polecam zajrzeć do środowiska Adobe AIR - podobna koncepcja, ale trochę więcej znaczników, aby go uruchomić.

Referencje:

HTA na

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

Dziękuję za odpowiedź! Środowisko AIR działałoby, ale chcielibyśmy go ominąć, ponieważ użytkownicy musieliby zainstalować środowisko wykonawcze AIR, jeśli jeszcze go nie zainstalowali. –

0

Jeśli jest to tylko marketing/treść szkolenia, dlaczego nie umieszczasz go w pliku PowerPoint, gdzie nadal możesz mieć vid eo?

+0

Widzę, co mówisz. Ale bycie samodzielnym i wieloplatformowym jest jednym z wielkich celów. –

0

Pracuję nad podobnym projektem. Poszedłem też z FF portable, ale nie byłem zadowolony z szybkości. Znalazłem tę inną malutką przeglądarkę zgodną z Mac i Linux. Najpierw musisz skopiować pojedynczy plik .exe na dysk zapisywalny, aby edytować ustawienia i utworzyć niezbędne foldery z pamięcią podręczną i ustawieniami (wyłączyć wszelkie ustawienia zapisu w przeglądarce, aby uniknąć błędów), a następnie nagrać je na płytę CD.

Świetne jak na razie!

QT Web Browser