FLV видео плеер Kernel Team v4.x

Содержание

1. Общая информация

FLV видео плеер Kernel Team разработан с учетом основных требований монетизации ресурса. Плеер поддерживает возможность использования огромного количества рекламы в различных местах и при различных событиях, например: pre-roll, post-roll реклама, реклама на паузе или остановке видео, рекламная ссылка в контролбаре плеера, логотип со ссылкой и т.д.

Плеер работает в двух режимах: обычный режим и "embed" режим. Обычный режим предназначен для использования плеера на "родном" сайте. Режим "embed" включается в том случае, если ваш плеер загружается c другого ресурса. В этом режиме конфигурация рекламы плеера не может быть перекрыта извне, таким образом, если кто-то показывает embed код с вашим видео на другом сайте, ваша реклама не может быть перекрыта или удалена. Более того, настройка плеера в "embed" режиме осуществляется вами в одном месте, таким образом, если вы захотите изменить настройки рекламы - эти настройки мгновенно отразятся на всех сайтах, которые используют ваш embed код.

Для использования полученного кода лицензии (если не бесплатная версия) вам необходимо передать его плееру в переменной инициализации license_code.

Важно! Любые SWF файлы, которые используются в плеере через API должны быть реализованы на ActionScript3.

2. Установка плеера

Для установки плеера вам необходимо выполнить следующие шаги:

• Распакуйте архив с файлами плеера в папку /%DOMAIN_ROOT%/player. Если вы хотите установить плеер в другую папку, убедитесь, что вы заменили все включения пути /player/ в текстовых файлах плеера на ваш путь (достаточно текстового поиска и замены).
• В файле /%DOMAIN_ROOT%/player/.htaccess замените токен %DOMAIN% на название вашего домена.
• В файле /%DOMAIN_ROOT%/player/embed.php замените токен %DOMAIN% на название вашего домена.
• Скопируйте файл crossdomain.xml в корень вашего домена. Если вы планируете использовать видео или изображения, которые хостятся на других доменах (и сабдоменах), вам необходимо скопировать этот файл на все другие домены (сабдомены), с которых плеер будет что-то использовать.

3. Включение плеера в HTML код страницы сайта

Плеер вставляется через JavaScript код, используя скрипт swfobject.js. Код вставки плеера на страницу выглядит следующим образом (предполагая, что вы скопировали плеер в папку /player):

<!-- подключаем JavaScript -->
<script type="text/javascript" src="/player/swfobject.js"></script>

<!-- задаем пустой контейнер для плеера, id="player1" идентифицирует его -->
<div id="player1"></div>

<!-- используем код вставки плеера -->
<script type="text/javascript">
    // указываем список всех переменных инициализации (для примера указаны только 2)
    var flashvars = {
        video_url: 'http://kernel-video-sharing.com/player_files/demo_video.flv',
        preview_url: 'http://kernel-video-sharing.com/player_files/preview.jpg'
    };

    // указываем параметры HTML объекта плеера
    var params = {allowfullscreen: 'true', allowscriptaccess: 'always'};

    // указываем HTML атрибуты объекта плеера
    var attributes = {id: 'player1', name: 'player1'};

    // вызываем функцию вставки плеера
    // '/player/kt_player.swf' - путь к файлу плеера
    // 'player1' - идентификатор контейнера для плеера
    // '600' - ширина плеера
    // '400' - высота плеера
    // '9.124.0' - необходимая версия флеш плеера
    // '/player/expressInstall.swf' - файл инсталяции, предоставленный Adobe
    // flashvars - список всех переменных инициализации, созданный выше
    // params - список всех параметров HTML объекта плеера, созданный выше
    // attributes - список всех HTML атрибуты объекта плеера, созданный выше
    swfobject.embedSWF('/player/kt_player.swf', 'player1', '600', '400', '9.124.0', '/player/expressInstall.swf', flashvars, params, attributes);
</script>

В результате отработки JavaScript функции div контейнер с id="player1" заменится на плеер. В большинстве случаев вам необходимо только изменить набор переменных, которые задаются в объекте flashvars и размеры плеера (600х400).

Важно! Если вы передаете плееру какие-либо переменные инициализации, которые содержат символ амперсанда (&), эти переменные должны быть обработаны функцией JavaScript encodeURIComponent. В противном случае данные, которые находятся после первого амперсанда не подставятся в плеер.

В данном примере обрабатывается переменная logo_url:

...

// указываем список всех переменных инициализации
var flashvars = {
    video_url: 'http://kernel-video-sharing.com/player_files/demo_video.flv',
    preview_url: 'http://kernel-video-sharing.com/player_files/preview.jpg',
    logo_src: 'http://kernel-video-sharing.com/player_files/logo.png',
    logo_url: encodeURIComponent('http://domain.com/get_logo.php?logo_id=2&color_scheme=5')
};

...

В некоторых случаях вам может понадобиться вставить плеер с параметром wmode=transparent. Это может потребоваться для того, чтобы показать поверх плеера какой-нибудь DIV с рекламой, что не будет работать в в Internel Exporer-е без wmode=transparent. В то же время, при использовании wmode=transparent у вас может возникнуть проблема с отображением плеера в Firefox и Opera. Для того, чтобы все работало корректно, необходимо подставлять wmode=transparent для всех браузеров, кроме Firefox и Opera. Сделать это можно таким образом:

...

// указываем параметры HTML объекта плеера
if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Opera") != -1) {
    // для Firefox и Opera не используем wmode=transparent
    var params = {allowfullscreen: 'true', allowscriptaccess: 'always'};
} else {
    // для остальных используем
    var params = {allowfullscreen: 'true', allowscriptaccess: 'always', wmode: 'transparent'};
}

...

4. Переменные инициализации плеера

Переменные инициализации плеера (FlashVars) используются для установки контента, рекламы и других опций плеера. Таблица, приведенная ниже, перечисляет все переменные инициализации, которые поддерживаются плеером:

Рассмотрим небольшой пример использования альтернативных потоков видео. Предположим, что нужно отобразить 3 элемента в выпадающем списке потоков:

• 360p - показывает видео с разрешением в 360 пикселей по высоте.
• 480p - показывает видео с разрешением в 420 пикселей по высоте.
• 720p HD - делает редирект на страницу регистрации (оплаты), т.к. видео в HD качестве доступно только зарегистрированным пользователям сайта.

Переменные инициализации, которые нужно указывать для рассматриваемого варианта:

• video_url = http://domain.com/videos/my_video_360.flv (будет выбран и показываться по умолчанию)
• video_url_text = 360p
• video_alt_url = http://domain.com/videos/my_video_480.flv (будет показываться при переключении на этот поток)
• video_alt_url_text = 480p
• video_alt_url2 = http://domain.com/signup.php (будет сделан редирект при переключении на этот поток)
• video_alt_url2_text = 720p HD
• video_alt_url2_redirect = 1

Плеер поддерживает всплывающую рекламу, которая указывается в переменной инициализации float_src. Эта переменная должна ссылаться на xml файл конфигурации, формат которого представлен ниже:

<?xml version="1.0" encoding="UTF-8"?>
<task>
    <overlay mn="10" src="/player/def_banner.swf" url="http://google.com" position="1"/>
    <overlay mn="20" src="/player/def_banner.swf" url="http://google.com" position="2"/>
    <overlay mn="30" src="/player/def_banner.swf" url="http://google.com" position="3"/>
    <overlay mn="40" src="/player/def_banner.swf" url="http://google.com" position="4"/>
</task>

Каждый элемент overlay представляет собой один экземпляр всплывающей рекламы, т.е. вы можете показывать несколько всплывающих роликов за один сеанс показа видео. Данная таблица расписывает параметры, которые поддерживаются элементом overlay:

Kernel Team предоставляет пример типичного всплывающего баннера, выполненного на технологии Flash (исходный код баннера располагается по пути: /player/def_banner.fla). Длительность показа баннера и кнопка закрытия настраивается в самом баннере.

Важно! Плеер может использовать файлы (изображения / видео) с других доменов и субдоменов только в том случае, если в корне этих доменов и субдоменов находится файл crossdomain.xml с разрешением использования контента для вашего домена. Этот файл поставляется вместе с плеером и должен быть разнесен на все домены и субдомены, контент с которых вы хотите использовать.

При работе в "embed" режиме все переменные инициализации задаются через файл embed.xml, который находится в той же папке, где и сам плеер.

5. JavaScript API плеера

JavaScript API используется для указанию плееру embed кода, который должен отображаться внутри плеера (если переменная инициализации embed = 1). Для того, чтобы указать плееру embed код, вам необходимо добавить следующую JavaScript функцию на странице с плеером:

function getEmbed() {
    return '%EMBED_CODE_GOES_HERE%';
}

В данной функции необходимо заменить токен %EMBED_CODE_GOES_HERE% на embed код, который вы хотите вывести в плеере. Мы предлагаем использовать такую версию embed кода (вам нужно будет подставить свои данные):

<object id="kt_player" name="kt_player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="600" height="400">
    <param name="allowscriptaccess" value="always"/>
    <param name="allowFullScreen" value="true"/>
    <param name="movie" value="http://%YOUR_DOMAIN_HERE%/player/kt_player.swf"/>
    <param name="flashvars" value="video_url=%VIDEO_URL%&amp;preview_url=%PREVIEW_IMAGE_URL%"/>
    <embed src="http://%YOUR_DOMAIN_HERE%/player/kt_player.swf?video_url=%VIDEO_URL%&amp;preview_url=%PREVIEW_IMAGE_URL%" width="600" height="400" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>

Важно! Если вы не объявляете функцию getEmbed() и не возвращаете плееру embed код - то плеер сгенерит его самостоятельно исходя из переменных инициализации, которые переданы ему самому. В этом случае размеры плеера в embed коде будут установлены такие же, как и при отображении плеера у вас на странице. Вы можете использовать функцию getEmbed() для выдачи embed кода с другими данными, например, размерами.

Плеер поддерживает Javascript колбэки на многие события. Вы можете использовать эти колбэки по своему усмотрению. Для того, чтобы они начали работать, вам необходимо передать плееру переменную инициализации js=1:

function playerLoaded() {
    // вызовется при завершении инициализации плеера
}

function playStart() {
    // вызовется при нажатии на кнопку play
}

function playPause() {
    // вызовется при нажатии на кнопку pause
}

function playStop() {
    // вызовется при нажатии на кнопку stop
}

function playOver() {
    // вызовется при завершении показа видео
}

function playScroll(time) {
    // вызовется при перемотке видео
}

function fullScreenActivate() {
    // вызовется при переходе в полноэкранный режим
}

function fullScreenDeactivate() {
    // вызовется при переходе в нормальный режим
}

function preRollStart() {
    // вызовется при начале проигрывания pre-roll рекламы
}

function preRollFinish() {
    // вызовется при завершении проигрывания pre-roll рекламы
}

function postRollStart() {
    // вызовется при начале проигрывания post-roll рекламы
}

function postRollFinish() {
    // вызовется при завершении проигрывания post-roll рекламы
}

6. Список файлов для плеера

Данный список перечисляет все файлы, которые поставляются вместе с плеером и их предназначение: