Aby hostować prezentacje bezpośrednio ze swojego serwera potrzebujesz co najmniej:
-
serwer
-
własna kopia ORBITVU VIEWER
-
prezentacje
-
trochę technicznej wiedzy odnośnie HTML i administracji serwerem
Wdrożenie
-
Skopiuj katalog z ORBITVU VIEWER, czyli orbitvu12/ na swój serwer
-
Skonfiguruj swój serwer HTTP tak by pliki z folderu orbitvu12/ były dostępne pod jakimś adresem, np: http://twojadomena.pl/orbitvu12/
-
Skopiuj foldery z prezentacjami na swój serwer
-
Skonfiguruj swój serwer tak by pliki prezentacji były dostępne pod jakimś adresem, np.: http://twojadomena.pl/presentations/
-
Dodaj nagłówek Access-Control-Allow-Origin *; do URL-i VIEWER-a i prezentacji aby uniknąć problemów z CORS
-
Jeśli zamierzasz hostować pliki Oribtvu VIEWER i pliki prezentacji z różnych domen wówczas musisz też obsłużyć kwestie zabezpieczeń Flash. Dodaj plik crossdomain.xml do domeny wskazywanej przez parametr ovus_url.
-
Utwórz strony www które używają Twojej kopii ORBITVU VIEWER i url-i Twoich prezentacji (szczegóły poniżej)
Informacja:
Aby prezentacja działała z Facebook musisz także kupić i skonfigurować certyfikat SSL dla swojej domeny
Informacja:
Aby sprawdzić ewentualne problemyz CORS powinieneś użyć wersji HTML5 VIEWER-a. Wyłącz Flash w przeglądarce lub ustaw parametr force_html5 na wartość yes
Ostrzeżenie:
Jeśli pliki prezentacji są hostowane z innej domeny niż ta której używa Twoja strona, wówczas musisz ustawić nagłówek Access-Control-Allow-Origin *; sprawdź poniżej w najczęściej zadawane pytania
Kodowanie strony www
-
Załaduj skrypty ORBITVU VIEWER
Możesz dodać skrypty do sekcji <head> strony.
<script type=„text/javascript” src=„http://yourdomain.com/orbitvu12/swfobject.js”></script>
<script type=„text/javascript” src=„http://yourdomain.com/orbitvu12/orbitvu.js”></script>Informacja:
Musisz użyć adresów URL do plików VIEWER-a znajdujących się na Twoim serwerze. -
Utwórz element będący kontenerem dla prezentacji
Utwórz element/nazwę kontenera do którego wstawiona zostanie prezentacja. Wymagane jest ustawienie unikalnego identyfikatora dla tego elementu czyli nazwa twojej prezentacji
<div id=„twojaprezentacja1-container”></div>
Informacja:
Jeśli chcesz mieć kilka prezentacji na jednej stronie wówczas dla każdej z nich utwórz element kontenera z unikalnym id. -
Zainicjuj prezentację
Ostatnim krokiem jest wywołanie funkcji JavaScript inject_orbitvu która wstawi prezentacje w element kontenera.
1 2 3 4 5 6 7 8 9 10 11 12
<script type="text/javascript"> inject_orbitvu( 'twojaprezentacja1-container', 'http://yourdomain.com/orbitvu12/orbitvuer12.swf', 'http://yourdomain.com/orbitvu12/expressInstall.swf', { ovus_folder: "http://yourdomain.com/presentations/presentation1/", content2: 'yes', width: "500", height: "400" }); </script>
- Linia 3:
-
id elementu kontenera
- Linie 4-5:
-
Adresy URL plików ORBITVU VIEWER (hostowane na Twoim serwerze)
- Linia 7:
-
URL do folderu prezentacji (hostowana na Twoim serwerze)
- Linia 8:
-
Ustaw na ‘yes’ jeśli w folderze prezentacji istnieje plik content2.xml. W przeciwnym wypadku ustaw na ‘no’ lub usuń ten parametr
- Linie 9-10:
-
Inne parametry ORBITVU VIEWER.
Ostrzeżenie:
Skrypty pomocnicze muszą być załadowane PRZED wywołaniem inject_orbitvu
Informacja:
Jeśli masz kilka prezentacji na stronie wówczas musisz wywołać inject_orbitvu dla każdej z nichInformacja:
Dobrym rozwiązaniem jest wywołanie inject_orbitvu wewnątrz handlera zdarzenia onready -
Pełny przykład
Przykład użycia jQuery do wykonywania JavaScript dopiero po załadowaniu strony:
—————————————————————————————————————————————-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://yourdomain.com/orbitvu12/swfobject.js"></script> <script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script> <script type="text/javascript"> $(function() { inject_orbitvu( 'twojaprezentacja1-container', 'http://yourdomain.com/orbitvu12/orbitvuer12.swf', 'http://yourdomain.com/orbitvu12/expressInstall.swf', { ovus_folder: "http://yourdomain.com/presentations/presentation1/", content2: "yes", width: "500", height: "400" }); }); </script> </head> <body> <h1>TWÓJ TEKST</h1> <div id="twojaprezentacja1-container"></div> </body> </html>
—————————————————————————————————————————————-
Informacja:
Ustaw odpowiedni DOCTYPE dla Twojej strony zwłaszcza dla przegladarki Internet Explorer i trybu HTML5 ORBITVU VIEWER—————————————————————————————————————————————-
Najczęściej zadawane pytania
Widzę białą stronę – ORBITVU VIEWER nie działa
Możliwą przyczyną takiego zachowania jest serwowanie plików prezentacji z oddzielnej domeny i blokowanie dostępu do nich przez mechanizmy bezpieczeństa Flash. W takim wypadku musisz dodać plik crossdomain.xml do domeny z której hostowane są prezentacje, np.: http://yourdomain.com/crossdomain.xml. Zawartość pliku crossdomain.xml powinna mieć postać:
<cross-domain-policy> <allow-access-from domain="*" secure="false"/> <site-control permitted-cross-domain-policies="all"/> <allow-http-request-headers-from domain="*" headers="*"/> </cross-domain-policy>
VIEWER nie działa na urządzeniach mobilnych / HTML5
Android i iOS używają wersji HTML5 ORBITVU VIEWER. Aby zdiagnozować problem wyłącz Flash w przeglądarce na swoim komputerze i sprawdź konsolę błędów. Najczęstszą przyczyną tego problemu jest błędna konfiguracja Twojego serwera powodująca problemy z CORS. Sprawdź czy masz odpowiednio ustawiony nagłówek Access-Control-Allow-Origin *.
Jeśli serwer www którego używasz to Apache wówczas możesz ustawić nagłówek Access-Control-Allow-Origin * używając następującego pliku (który powinien być umieszczony w folderze z plikami prezentacji)
- .htaccess:
<FilesMatch "\.(xml)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
Prezentacja nie działa na Facebook
Aby strona działała z Facebook musi ona spełniać pewne wymagania. Sprawdź dokumentację FACEBOOK aby uzyskać szczeegóły. Najczęstsze przyczyny problemów to:
-
brak meta znaczników facebook na Twojej stronie
-
brak https na Twojej stronie
Przykładowa:
Najnowsze komentarze