Вбудовування плеєра krpano в сторінку сайту максимально автоматизовано і спрощено до
• додавання в код сторінки одного скрипта і
• одного рядка коду з параметрами вбудовування.
У функції скрипта входить визначення типу движка, який буде використовуватися (flash або html5) і обробка обмежень по функціональності (вони пов'язані з ОС, браузером і способами введення) Як правило, цей скрипт і плеєр знаходяться в одному JS-файлі, найчастіше він називається tour.js. У збірці krpano він зберігається окремо в файлі embedpano.js.
Функції скрипта embedpano.js
- Ініціація плеєра і вбудовування його в веб-сторінку;
- Автоматичне визначення типу движка (flash або html5);
- Виправлення функціональності колеса миші, пов'язане з прокруткою сторінки, зумуванням, підтримкою Mac OS, з тачпадом і нормалізацією швидкості обертання);
- Виправлення обмежень флеш-плеєра при використанні непрозорості і перекриття шарів, якщо wmode = transparent / opaque;
- Підключення можливості переходу в повноекранний режим для flash;
- Вбудовування свого коду в код плеєра віртуального туру.
вбудовування скрипта
Вбудовування осуществляеть в будь-якому місці коду веб-сторінки один раз так:
або, коли скрипт суміщений з html5-плеєром, так:
вбудовування плеєра
Для вбудовування плеєра в потрібному місці коду веб-сторінки додається елемент
Усередині цього елемента потрібно прописати виклик методу embedpano (), який створить плеєр:
Функція вбудовування в якості аргументу приймає об'єкт з параметрами вбудовування.
параметри вбудовування
Метод embedpano () вимагає на вході тільки один об'єкт, через який в довільному порядку передаються всі параметри у вигляді parametername: value.
Всі параметри, крім target, можна опустити, і тоді замість них будуть підставлені значення за замовчуванням:
Ім'я та шлях до файлу плеєра flash. Значення за замовчуванням "krpano.swf", найчастіше замість нього використовується "tour.swf"
Ім'я та шлях до файлу плеєра html5. За замовчуванням буде використаний параметр swf, в якому розширення буде змінено на .js. Цей параметр ігнорується, коли плеєр вбудований в скрипт вбудовування.
Файл з початкової xml-специфікацією і шлях до неї. За замовчуванням використовується той же ім'я, що і для плеєрів. Найчастіше замість нього використовується "tour.xml".
Ідентифікатор елемента розмітки, в який буде вбудований плеєр. Якщо параметр не встановлений, буде викликана помилка "alert ()".
Колір фону плеєра в форматі html. За замовчуванням чорний (# 000000).
Визначення параметра Window Mode для флеш-плеєра. Можливі параметри:
• window - значення за замовчуванням, компроміс між можливостями і швидкістю роботи. У багатьох браузерах і системах елементи розмітки не можуть перекривати вікно плеєра;
• opaque - дозволити перекриття вікна плеєра (працює повільніше);
• transparent - на додаток до перекриття дозволяє зробити видимими елементи розмітки за вікном плеєра (працює ще повільніше);
• direct - режим оптимальної роботи, з використанням апаратного прискорення. Немає можливості перекриття, обмежена сумісність зі старими системами і браузерами.
Примітка для html5: Параметр wmode = transparent буде оброблений движком плеєра, що дозволить зробити його напівпрозорим. Перекриття вікна плеєра є завжди.
Визначає пріоритет використання для движка html5.
• auto - вибирає html5 тільки в разі, якщо не підтримується flash;
• prefer - по можливості використовувати html5, flash буде використаний тільки якщо html5 не підтримує;
• fallback - режим переваги flash, в якому html5 розглядається як запасний варіант;
• only - завжди використовувати html5. Якщо він не підтримується, буде видана помилка;
• always - завжди використовувати html5 незалежно від наявності підтримки. Використовується тільки для налагодження і тестування;
• never - не використовувати html5.
Також введені розширювальні настройки, необхідні для тестування:
Вони задають технологію рендеринга. приклади:
За замовчуванням вибирається технологія WebGL, за винятком випадків:
• У iOS не доступна, тому за замовчуванням використовується технологія css3d;
• У браузерах для Android, заснованих на webview і підтримують webgl можливі проблеми з продуктивністю і рендірінгом на різних пристроях, тому за замовчуванням використовується технологія css3d;
• В Android Firefox до версії 22 через низьку продуктивність за замовчуванням використовується css3d. У версіях 22 і вище за замовчуванням використовується WebGL.
Передає об'єкт з параметрами krpano, дозволяє встановити початкові параметри krpano. Також можна встановити будь-які параметри плеєра. Параметри будуть встановлені або перезаписані після завантаження основного xml і його обробки.
Базовий шлях до swf-файлу, який потім можна використовувати для вирішення відносних шляхів. Може бути використаний як у flash, так і в html5 для дозволу відносних шляхів в xml.
Установка визначає, чи будуть надсилатися повідомлення про помилки плеєра в консоль браузера.
Визначає порядок використання колеса миші. У разі установки true, події, що викликаються колесом миші, будуть оброблені в плеєрі, інакше вони будуть проігноровані плеєром і оброблені браузером (для прокрутки сторінки).
Примітка для флеш-плеєра. Ця функція вимагає відкритого зовнішнього інтерфейсу флеш-плеєра (External Interface). При роботі оффлайн виклик onready спрацює тільки після зміни налаштувань безпеки флеш-плеєра. Детальніше .
Дозволяє використовувати проізволную функцію-обробник помилок. Ця функція буде викликана з параметром у вигляді рядка з повідомленням про помилку.
Коли встановлено в true, всі параметри із заслання будуть передані в плеєр. Так само всі установки із заслання можна буде передати в html5-плеєр. Це робить можливим перемикатися між двигунами flash і html5 за допомогою різних посилань.
параметри запуску
Існує група параметрів, які визначають вбудовування і не передаються в плеєр.
Дозволяє задати довільне ім'я для стартового файлу. Якщо параметр опущений, як значення за замовчуванням буде взято ім'я swf-файлу.
Для налагодження на мобільних пристроях існує спеціальний симулятор, що зберігається в папці krpano / examples / iphone-ipad-simulator
Припинення роботи плеєра
Для видалення екземпляра плеєра необхідно використовувати функцію removepano (). Ця функція видаляє всі настройки миші, елементи DOM і події HTML5. Як параметр функція отримує id примірника плеєра.
Примітки щодо використання на мобільних пристроях
Примітка: параметр target-densitydpi = device-dpi розпізнається тільки пристроями на Android, і може викликати консольні попередження в інших браузерах (iOS, Chrome (sic!).). Це попередження можна проігнорувати.
Опущені всі необов'язкові параметри, тому будуть використані значення за умовчанням: «krpano.swf», «krpano.xml», «krpanoSWFObject» і 100% для розміру.
2. Розширені налаштування для першого прикладу.
3. Налаштування пріоритетності для движка html5.
5. Вибіркове використання html5: надавати перевагу тільки на Android і сенсорних пристроях з IE10.