Hostowanie Prezentacji 360° na własnym serwerze

Updated on Mar 01, 2021

Do hostowania prezentacji na własnym serwerze potrzebujesz:

dostęp do serwera (kopiowanie plików i konfiguracja serwera HTTP)
własną kopię ORBITVU VIEWER (musisz zakupić licencję lub skorzystać z ORBITVU VIEWER Free360)
Prezentacja 360°
troche wiedzy technicznej na temat HTML i administracji serwerami
musisz zrozumieć czym jest ORBITVU PRESENTATION oraz czym jest ORBITVU VIEWER.

Rozlokowanie

VIEWER
- Skopiuj ORBITVU VIEWER na Twój serwer (skopiuj folder orbitvu12/)
- Skonfiguruj swój serwer WWW tak, aby obsługiwał pliki z folderu orbitvu12/ (upewnij się, że są one publicznie dostępne pod pewnym adresem URL, np.: http://twojadomena.com/orbitvu12/)
Prezentacje
- Skopiuj Prezentacje na swój serwer (zwykle będziesz używać klienta FTP)
- Skonfiguruj swój serwer WWW tak, aby obsługiwał pliki prezentacji pod niektórymi publicznie dostępnymi adresami URL, np.: http://twojadomena.com/presentations/
Konfiguracja serwera
- Dodaj nagłówek Access-Control-Allow-Origin*; zarówno do adresu URL VIEWER jak i URL Prezentacji aby uniknąć potencjalnych problemów z CORS (Cross-origin resource sharing)
- Dodaj crossdomain.xml do domeny używanej do obsługi plików prezentacji w celu uniknięcia problemów z bezpieczeństwem Flash, np.: https://mydomain.com/crossdomain.xml
Kodowanie
- Utwórz strony internetowe, które wykorzystają Twoj ORBITVU VIEWER i Twoje adresy URL prezentacji (szczegóły poniżej).

Możesz również uzyskać i skonfigurować certyfikat SSL dla swojej domeny, który jest wymagany. np. jesli będziesz chciał dodać integrację z Facebookiem.

Kodowanie stron internetowych

Wczytaj skrypty pomocnicze ORBITVU VIEWER
Możesz dodać skrypty do sekcji<head> na stronie.

<script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>

Utwórz element kontenera do prezentacji
Utwórz element kontenera, do którego zostanie wstrzyknięta Twoja prezentacja. Konieczne jest ustawienie unikalnego identyfikatora dla tego kontenera.

<div id="presentation1-container"></div>

Jeśli chcesz mieć wiele prezentacji na swojej stronie, po prostu utwórz kontener z unikalnym identyfikatorem dla każdej z nich.

Wstrzyknięcie prezentacji
Ostatnim krokiem jest wywołanie funkcji JavaScript inject_orbitvu, która wstrzykuje prezentację do kontenera.

<script type="text/javascript">
    inject_orbitvu(
        'presentation1-container',
        'http://yourdomain.com/orbitvu12/',
        '',
        {
            ovus_folder: "http://yourdomain.com/presentations/presentation1/",
            content2: 'yes',
            width: "500",
            height: "400"
        });
</script>

Linia 3:

id elementu kontenera

Linie 4-5:

URL do plików ORBITVU VIEWER (hostowanych na Twoim serwerze)

Linia 7:

URL do katalogu prezentacji (hostowanego na Twoim serwerze)

Linia 8:

Ustaw na yes, jeśli w katalogu prezentacji znajduje się plik content2.xml, w przeciwnym razie ustaw na nie lub usuń

Linie 9-10:

Inne parametry ORBITVU VIEWER. Więcej informacji na ten temat można znaleźć w częsci lista parametrów.

Skrypt pomocniczy musi być załadowany PRZED wywołaniem inject_orbitvu.

Jeśli masz wiele prezentacji na swojej stronie, musisz wywołać inject_orbitvu dla każdej z nich.

Możesz wywołać inject_orbitv wewnątrz obsługi zdarzenia onready.

Kompletny przykład

Przykład wykorzystuje jQuery do odroczenia wykonania JavaScript do czasu załadowania 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/orbitvu.js"></script>

        <script type="text/javascript">
            $(function() {
                inject_orbitvu(
                  'presentation1-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>Some text</h1>

        <div id="presentation1-container"></div>
    </body>
</html>

Zadbaj o ustawienie odpowiedniego DOCTYPE dla Twojej strony, zwłaszcza dla przeglądarki Internet Explorer

Previous Article Osadzenie ORBITTOUR przy użyciu kodu ORBITVU SUN

Next Article Nagłówki CORS strony serwera

Orbitvu Public Support Site

Hostowanie Prezentacji 360° na własnym serwerze

Rozlokowanie

Kodowanie stron internetowych

Kompletny przykład

VIEWER, ORBITTOUR, and 360° Presentations PL

Other Resources