Flash / HTML5 видео плеер Kernel Team v5.x

Содержание

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

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

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

Видео плеер Kernel Team может использоваться бесплатно без каких-либо ограничений.

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

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

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

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

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

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

4. Flash vs HTML5 mode

Видео плеер Kernel Team поддерживает базовый HTML5 режим для проигрывания ваших видео на мобильных устройствах. Плеер использует следующий алгоритм для определения, в каком режиме показывать видео:

Важно! HTML5 / Встроенный режимы могут использоваться только с MP4 файлами. Все современные мобильные устройства поддерживают проигрывание MP4 файлов.

5. JavaScript API плеера

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

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

В данной функции необходимо заменить токен %EMBED_CODE_GOES_HERE% на embed код, который вы хотите вывести в плеере. Существует несколько вариаций embed кодов:

• Классический embed код - поддерживает только Flash плеер и не позволяет использовать JavaScript API плеера: <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%/kt_player/kt_player.swf"/>
      <param name="flashvars" value="video_url=%VIDEO_URL%&amp;preview_url=%PREVIEW_IMAGE_URL%"/>
      <embed src="http://%YOUR_DOMAIN_HERE%/kt_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>
• Iframe embed код - предоставляется в виде iframe, который ссылается на страницу вашего сайта, на которой находится плеер. В отличие от классического кода поддерживает все режимы отображения плеера, а также позволяет использовать JavaScript API в полной мере. Использование этого embed кода подразумевает, что на вашем сайте реализован функционал, который по переданному идентификатору видео (%VIDEO_ID%) будет отображать страницу с плеером для этого видео. <iframe width="600" height="400" src="http://%YOUR_DOMAIN_HERE%/embed/%VIDEO_ID%" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

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

Плеер поддерживает JavaScript колбэки на многие события. Вы можете использовать эти колбэки по своему усмотрению:

var player_obj = kt_player('kt_player', '/kt_player/kt_player.swf', '600', '400', flashvars, params);
player_obj.listen('ktVideoStarted', function() {alert('Video started');});
player_obj.listen('ktVideoPaused', function() {alert('Video paused');});
player_obj.listen('ktVideoStopped', function() {alert('Video stopped');});
player_obj.listen('ktVideoScrolled', function(time) {alert('Video scrolled to ' + time + ' seconds');});
player_obj.listen('ktVideoProgress', function(time) {alert('Video played to ' + time + ' seconds');});
player_obj.listen('ktVideoFinished', function() {alert('Video finished');});
player_obj.listen('ktFullScreenActivated', function() {alert('Player goes to full screen mode');});
player_obj.listen('ktFullScreenDeactivated', function() {alert('Player goes to normal mode');});
player_obj.listen('ktPreRollStarted', function() {alert('Configured pre-roll ad started');});
player_obj.listen('ktPreRollFinished', function() {alert('Configured pre-roll ad finished');});
player_obj.listen('ktPostRollStarted', function() {alert('Configured post-roll ad started');});
player_obj.listen('ktPostRollFinished', function() {alert('Configured post-roll ad finished');});

player_obj.listen('ktVideoFormatChanging', function(format) {
    alert('Video format is attempted to be changed to: ' + format);
    // этот обработчик может использоваться для показа пользователю HTML содержимого при попытке переключить формат
    // функция должна вернуть 'true' (как строку), если вы хотите чтобы плеер отменил действие по умолчанию
});

player_obj.listen('ktToolbarLogoClick', function() {
    alert('User clicked on toolbar logo text');
    // этот обработчик может использоваться для показа пользователю HTML содержимого при попытке кликнуть на рекламную текстовку в тулбаре
    // функция должна вернуть 'true' (как строку), если вы хотите чтобы плеер отменил действие по умолчанию
});

При необходимости инициализации перехвата событий плеера извне, вы можете определить функцию kt_player_loaded, которая вызывается после инициализации плеера:

function kt_player_loaded(player_obj) {
    // настройка перехвата событий
    player_obj.listen(...);
}

Во время инициализации плеер изменяет CSS стили его DIV-контейнера, чтобы можно было легко показывать внутри контейнера HTML слои поверх плеера (например, рекламу, всплывающие баннеры, доп. меню). Таким образом, можно добавлять слои с абсолютным позиционированием в DOM структуру контейнера.

стиль контейнера {
    width: 600px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

Дополнительное API по управлению плеером:

// получить DIV-элемент контейнера
player_obj.container();

// запустить проигрывание
player_obj.play();

// приостановить проигрывание
player_obj.pause();

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

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