YouTube API: плеер с помощью YouTube API, jQuery, CSS

YouTube API плеерВидео презентации это отличное дополнение к любому продукту. С помощью видео вы можете показать преимущества вашей продукции, при этом не затруднять пользователя чтением длинных параграфов. Но, при добавлении видео, вам необходимо вручную конвертировать его и найти (написать) некоторый flash плеер, который будет отображать презентацию на сайте.

Другой вариант, загрузить видео на видеохостинг, например YouTube. Но вам придется повозиться с настройкой плеера под дизайн вашего сайта.

К счастью, YouTube предлагает решение этой проблемы – это их chromeless player, который позволяет вам разработать и настроить свой плеер. Благодаря YouTube API вы можете быстро и безопасно дополнять ваши страницы прекрасными видео. Также возможно свободно изменять размер плеера, к необходимому.

Суть идеи YouTube API плеера

Сегодня мы будем создавать jQuery плагин, который будет использовать YouTube chromeless player, и создадим наш собственный интерфейс  с минимальным набором функционала, который позволит интегрировать плеер в дизайн нашего сайта. Из кнопок управления мы оставим только Play, Pause, Replay, а также кликабельный прогресбар.

Плагин использует YouTube gdata api для определения или изменения параметров видео, и получения информации о нем, такой как, название, описание, теги, скриншоты и т.д., которые вы можете использовать для расширения плагина.

Использование плагина для вставки видео предельно простое:

// Вставка видео в div #pleer
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');

// также можно вставлять несколько видео
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
                .youTubeEmbed('http://www.youtube.com/watch?v=AsdfFdwlzdAw');

Вы также можете указать ширину встраиваемого видео (высота будет рассчитана автоматически относительно пропорций видео), и отключать прогресбар:

$('#player').youTubeEmbed({
        video                   : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
        width                   : 600,          // высота расчитается автоматически
        progressBar     : false         // Скрыть прогресбар
});

Сейчас мы напишем плагин поэтапно, шаг за шагом.

Шаг 1 – HTML

Наш плагин зависит от плагина jQuery SWFObject, который встраивает SWF файл на страницу. Ниже, вы можете посмотреть совмещенную разметку, которая генерируется с помощью двух плагинов.

youtube-player.html

<div class="flashContainer" style="width: 640px; height: 360px;">

        <object height="360" width="640" id="video_26ELpS3Wc4Q" type="application/x-shockwave-flash"
        data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">

                <param value="always" name="allowScriptAccess">
                <param value="transparent" name="wmode">
                <param value="video_id=26ELpS3Wc4Q&playerapiid=26ELpS3Wc4Q"
                name="flashvars">
                <param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
                name="movie">

        </object>

        <div class="controlDiv play"></div>

        <div class="progressBar">
                <div class="elapsed"></div>
        </div>
</div>

Блок .flashContainerDiv, динамически создается для каждого видео на странице. Он заполнен кодом, сгенерированным плагином SWFObject, блоком .controlDiv (который содержит кнопки play/pause) и прогрессбаром.

Как упоминалось выше, вставка плеера в контекст html кода, осуществляется с помощью плагина SWFObject. В зависимости от браузера, он может выводить object элемент, или нестандартный embed элемент для IE. Это снимает груз с наших плеч в плане кроссбраузерности кода и позволяет сконцентрироваться на таких вопросах, как подача запросов к YouTube API и построение контрольной панели плеера.

Плеер с помощью YouTube API

Шаг 2 – jQuery

Код плагина будет содержаться в файле youTubeEmbed-jquery-1.0.js. Перед его подключением, вам необходимо подключить последнюю версию jQuery библиотеки, а также плагин SWFObject, и наш файл скриптов script.js, который вставляет видео на страницу и позволяет настраивать вид плеера.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.swfobject.1-1-1.min.js"></script>
<script src="youTubeEmbed/youTubeEmbed-jquery-1.0.js"></script>
<script src="script.js"></script>

Перед тем, как мы начнем углубляться в код плагина, давайте посмотрим на простой ответ YouTube gdata api. Он дает нам много полезной информации о видео, включая продолжительность, контроль доступа и все виде дополнительных данных таких, как название, описание, теги, скриншоты и т.д.

Простой JSON ответ

{
    "id": "u1zgFlCw8Aw",
    "uploaded": "2008-03-05T01:22:17.000Z",
    "updated": "2010-07-23T01:02:42.000Z",
    "uploader": "GoogleDevelopers",
    "category": "People",
    "title": "The YouTube API: Upload, Player APIs and more!",
    "description": "Listen to the YouTube APIs and Tools team talk about...",
    "tags": ["youtube", "launch", "api", "engineering"],
    "thumbnail": {
        "sqDefault": "http://i.ytimg.com/vi/u1zgFlCw8Aw/default.jpg",
        "hqDefault": "http://i.ytimg.com/vi/u1zgFlCw8Aw/hqdefault.jpg"
    },
    "player": {
        "default": "http://www.youtube.com/watch?v=u1zgFlCw8Aw",
        "mobile": "http://m.youtube.com/details?v=u1zgFlCw8Aw"
    },
    "content": {
        "1": "rtsp://v4.cache5.c.youtube.com/CiILE..",
        "5": "http://www.youtube.com/v/u1zgFlCw8Aw?f..",
        "6": "rtsp://v3.cache4.c.youtube.com/CiILENy73.."
    },
    "duration": 259,
    "location": "san bruno, ca",
    "rating": 4.3,
    "likeCount": "119",
    "ratingCount": 144,
    "viewCount": 251024,
    "favoriteCount": 164,
    "commentCount": 118,
    "accessControl": {
        "syndicate": "allowed",
        "commentVote": "allowed",
        "rate": "allowed",
        "list": "allowed",
        "comment": "allowed",
        "embed": "allowed",
        "videoRespond": "allowed"
    }
}

Все поля ответа, это объекты, свойства который, доступны в виде data.fieldname. Вы можете расширять функциональность плагина самостоятельно, для возможности отображения названия, ссылки на видео в youtube, или вывода рейтинга видео. Одним словом, все что вам позволит фантазия.

Теперь, рассмотрим исключительно код плагина.

youTubeEmbed-jquery-1.0.js – Часть 1

(function($){

        $.fn.youTubeEmbed = function(settings){

                // Настройки могут быть URL строкой, или объектом

                if(typeof settings == 'string'){
                        settings = {'video' : settings}
                }

                // Переменные по умолчанию

                var def = {
                        width           : 640,
                        progressBar     : true
                };

                settings = $.extend(def,settings);

                var elements = {
                        originalDIV     : this, // this плагина
                        container       : null, // блок контейнера
                        control         : null, // контрольные кнопки плей, пауза
                        player          : null, // флеш плеер
                        progress        : null, // Прогресбар
                        elapsed         : null  // голубая заливка прогресбара
                };

                try{    

                        settings.videoID = settings.video.match(/v=(\w+)/)[1];

                        // safeID это сокращенная версия videoid

                        settings.safeID = settings.videoID.replace(/[^a-z0-9]/ig,'');

                } catch (e){
                        // Если url не корректный
                        return elements.originalDIV;
                }

                // Получение данных о видео из YouTube API

                var youtubeAPI = 'http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc';

                $.get(youtubeAPI,{'q':settings.videoID},function(response){

                        var data = response.data;

                        if(!data.totalItems || data.items[0].accessControl.embed!="allowed"){

                                // Если видео не найдено, вставка не возможна

                                return elements.originalDIV;
                        }

                        // data содержит API информацию о видео:

                        data = data.items[0];

                        settings.ratio = 3/4;
                        if(data.aspectRatio == "widescreen"){
                                settings.ratio = 9/16;
                        }

                        settings.height = Math.round(settings.width*settings.ratio);

Начинаем с определения нашего скрипта, как плагина, для этого мы добавляем объект $.fn в начале функции. Для простоты чтения и обработки кода, я вынес все элементы страницы, такие как блоки контрольной панели и прогресбара в отдельную структуру elements.

После извлечения id видео (уникальная последовательность из 11 символов, в коде после параметра ?v=), мы отправляем JSONP запрос к YouTube gdata API. В зависимости от доступности видеофайла, а также от разрешения на его вставку, мы продолжаем вычисляя пропорции видео. Высота видео вычисляется используя пропорцию и размер ширины.

youTubeEmbed-jquery-1.0.js – Часть 2

// создание контейнера внутри div блока, который будет содержать вставочный код объекта видео

elements.container = $('<div>',{className:'flashContainer',css:{
        width   : settings.width,
        height  : settings.height
}}).appendTo(elements.originalDIV);

// Вставка YouTube chromeless player
// и загрузка видео внутрь плеера

elements.container.flash({
        swf                     : 'http://www.youtube.com/apiplayer?enablejsapi=1&version=3',
        id                      : 'video_'+settings.safeID,
        height          : settings.height,
        width           : settings.width,
        allowScriptAccess:'always',
        wmode           : 'transparent',
        flashvars       : {
                "video_id"              : settings.videoID,
                "playerapiid"   : settings.safeID
        }
});

elements.player = elements.container.flash().get(0);

// Создание блока контрольных элементов

elements.control = $('<div>',{className:'controlDiv play'})
                                   .appendTo(elements.container);

// Если пользователь захотел увидеть прогресбар

if(settings.progressBar){
        elements.progress =     $('<div>',{className:'progressBar'})
                                                .appendTo(elements.container);

        elements.elapsed =      $('<div>',{className:'elapsed'})
                                                .appendTo(elements.progress);

        elements.progress.click(function(e){

                // При нажатии на прогресбар, прокручиваем видео

                var ratio = (e.pageX-elements.progress.offset().left)/elements.progress.outerWidth();

                elements.elapsed.width(ratio*100+'%');
                elements.player.seekTo(Math.round(data.duration*ratio), true);
                return false;
        });

}

Во второй части кода, мы используем плагин SWFObject для генерации кода вставки плеера youtube chromeless. Следует заметить, что id видео передается как переменная flash и плеер может загружать видео напрямую. Переменная safeID ( это JavaScript версия переменной videoid ), создается из id, генерируется. С помощью этого, далее мы сможем иметь доступ к DOM элементу с помощью document.getElementById(‘video_’+settings.safeID), и получать доступ к функциям, которые контролируют работу youtube плеера (play, pauseи т.д.).

youTubeEmbed-jquery-1.0.js – Часть 3

var initialized = false;

// Создание глобальной калбек функции
// (необходимо для связи плеера с YouTube API):

window['eventListener_'+settings.safeID] = function(status){

        var interval;

        if(status==-1)  // видео загружено
        {
                if(!initialized)
                {
                        // Ожидание клика:

                        elements.control.click(function(){
                                if(!elements.container.hasClass('playing')){

                                        // Если видео не запущено, запускаем
                                        elements.control.removeClass('play replay').addClass('pause');
                                        elements.container.addClass('playing');
                                        elements.player.playVideo();

                                        if(settings.progressBar){
                                                interval = window.setInterval(function(){
                                                        elements.elapsed.width(
                                        ((elements.player.getCurrentTime()/data.duration)*100)+'%'
                                                        );
                                                },1000);
                                        }

                                } else {

                                        // Если видео проигрывается - пауза

                                        elements.control.removeClass('pause').addClass('play');
                                        elements.container.removeClass('playing');
                                        elements.player.pauseVideo();

                                        if(settings.progressBar){
                                                window.clearInterval(interval);
                                        }
                                }
                        });

                        initialized = true;
                }
                else{
                        // Если пользователь кликнет по
                        // YouTube логотипу, перенаправим его на сайт youtube.com

                        if(elements.container.hasClass('playing'))
                        {
                                elements.control.click();
                        }
                }
        }

Далее, для доступа к контрольным элементам плеера, мы должны знать, когда и какие события запущены (проигрывание, стоп, пауза и т.д.). Это означает, что нам необходимо передать callback функцию, которая будет постоянно работать, сообщая какие события происходят.

К сожалению, flash может запускать функции, только определенные в глобальных параметрах и не может видеть, какие функции написаны внутри плагина. Хотя, с помощью создания функций с уникальными именами (с помощью safeID) и естественно добавляя их в окно объекта мы можем реализовать эту связь с flash. Если мы не будем пользоваться этой хитростью, плагин не будет работать.

youTubeEmbed-jquery-1.0.js – Часть 4

                              if(status==0){ // Видео закончилось
                                        elements.control.removeClass('pause').addClass('replay');
                                        elements.container.removeClass('playing');
                                }
                        }

                        // Глобальная функция вызывается при загрузке плеера

                        if(!window.onYouTubePlayerReady)
                        {
                                window.onYouTubePlayerReady = function(playerID){
                                        document.getElementById('video_'+playerID).addEventListener('onStateChange','eventListener_'+playerID);
                                }
                        }
                },'jsonp');

                return elements.originalDIV;
        }

})(jQuery);

Функцию, которая распознает события, мы создали в предыдущей секции кода, теперь прикрепим ее к плееру с помощью метода addEventListener. Она вызывается постоянно в случае существования stateChange (начало проигрыша, пауза, конец и т.д.). В функцию передается цифровой код, которые соответствует событию.

Теперь посмотрим, как использовать наш плагин.

script.js

$(document).ready(function(){

        $('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');

        /*
                //Как вариант можно передать настройки объектом

                $('#player').youTubeEmbed({
                        video                   : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
                        width                   : 600,          // высота высчитывается автоматически
                        progressBar     : false         // Скрыть прогрессбар
                });

        */

});

Вам просто  необходимо вызвать функцию youTubeEmbed() и передать конфигурационные параметры. Если передается строка, это должна быть ссылка на youtube видео. Если вы передаете объект, убедитесь, что свойство video содержит корректный URL.

Прогресбар youtube плеера

Шаг 3 – CSS

На конец, мы добавим несколько CSS стилей к плееру. Они немножко изменят дизайн контрольных элементов плеера и определят их расположение в окне плеера.

youTubeEmbed-jquery-1.0.css

.flashContainer{

        /* центрируем контрольную панель */

        position:relative;
        overflow:hidden;
}

.progressBar{
        display:none;
        position:absolute;
        width:auto;
        height:8px;
        left:20px;
        right:105px;
        bottom:20px;
        background-color:#141414;
        overflow:hidden;
        cursor:pointer;

        /* A light CSS3 bottom highlight */

        -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
        -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
        box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}

.progressBar .elapsed{
        position:absolute;
        width:0;
        height:100%;
        background-color:#1fa2f6;
        border-right:1px solid #49AFF0;
}

.controlDiv{
        /* Centering the control div */
        position:absolute;
        width:120px;
        height:120px;
        cursor:pointer;
        top:50%;
        left:50%;
        margin:-60px 0 0 -60px;
}

.controlDiv.play{
        background:url('img/play.png') no-repeat center center;
}

.controlDiv.replay{
        background:url('img/replay.png') no-repeat center center;
}

.controlDiv.pause{
        background:url('img/pause.png') no-repeat -99999px;
}

.flashContainer:hover .controlDiv.pause{
        background-position:center center;
}

/* Показываем только прогрессбар при воспроизведении */

.flashContainer.playing:hover .progressBar{
        display:block;
}

Для изменения вида плеера, вам необходимо изменить значения цветов. Также вы можете создать собственные pngфайлы (play/pause). На мой взгляд, это намного проще, нежели изменять вид стандартного плеера youtube.

На этом создание простого YouTube плеера завершено!

Вам понравилась эта статья? Оставьте свои мысли в комментариях ниже!


Источник материала ...

Дальше: Загрузка картинок в TinyMCE, с помощью PHP


Дискуссия по теме     2 Комментария 
Добавить комментарий
Дмитрий 23.10.2013 в 19:25
ну а где демо всего этого дела?
Тарас 24.10.2013 в 13:39
Вот - http://demo.tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/youtube-player.html
Просмотров: 15738