Главная > Видео > Создаем кастомизированный видео-плеер YouTube посредством API YouTube

Создаем кастомизированный видео-плеер YouTube посредством API YouTube


23 сентября 2010, 11:10. Разместил: Mysterious Master
Создаем кастомизированный видео-плеер YouTube посредством API YouTube

Демо | Скачать

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

С другой стороны, вы можете загрузить видео на сторонний сайт обмена видео-файлами, типа Youtube, но вы потратите значительный объем времени, подстраивая стандартный видео-плеер с сервиса Youtube под дизайн и разметку вашей страницы.

К счастью для вас, команда Youtube предлагает отличное решение данной проблемы – голую версию их встраиваемого плеера, который позволит вам собственноручно создавать оформление. Таким образом, вы получаете возможность быстрого и надежного размещения видео-файлов, а также возможность разработки внешнего оформления.

Идея

Сегодня мы создадим плагин jQuery, который будет использовать голый плеер YouTube. Мы разработаем собственные элементы управления, что должно прекрасно подходить к вашим дизайнам. Элементы управления включают в себя кнопки: Играть/Пауза/Повторить, а также строку прогресса с возможностью перехода по ней посредством мыши.

Плагин будет использовать API Youtube gdata для определения возможности интеграции конкретного видео, а также дополнительной информации о нем (заголовок, описание, тэги, скриншот и многое другое).

Данный плагин вполне легко применить для интеграции видео-файлов:

// Embed a video into the #player div:
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');

// Chaining is also supported:
$('#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,         // Height is calculated automatically
    progressBar    : false        // Hide the progress bar
});

Скачайте плагин по ссылке выше, и приступайте к первому этапу.

Этап 1 – XHTML

Наш плагин будет работать с 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 (который представляет собой кнопку Играть/Пауза) и строку прогресса.

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

Создаем кастомизированный видео-плеер YouTube посредством API YouTube

Этап 2 – Query

Код плагина находится в файле youTubeEmbed-jquery-1.0.js. Тем не менее, перед тем как мы сможем им воспользоваться, нам надо включить свежайшую версию библиотеки jQuery на страницу, а также плагин 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>

Перед тем, как мы углубимся в код плагина, давайте взглянем на пример ответа от API 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 (data.fieldname). Вы можете усовершенствовать плагин для отображения заголовка с ссылки на страницу с видео в сервисе Youtube, или добавить отображение рейтинга видео.

Теперь давайте посмотрим на исходный код.

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

(function($){

    $.fn.youTubeEmbed = function(settings){

        // Settings can be either a URL string,
        // or an object

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

        // Default values

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

        settings = $.extend(def,settings);

        var elements = {
            originalDIV    : this,    // The "this" of the plugin
            container    : null,    // A container div, inserted by the plugin
            control        : null,    // The control play/pause button
            player        : null,    // The flash player
            progress    : null,    // Progress bar
            elapsed        : null    // The light blue elapsed bar
        };

        try{    

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

            // safeID is a stripped version of videoID,
            // ready for use as a javascript function name

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

        } catch (e){
            // If the url was invalid, just return the "this"
            return elements.originalDIV;
        }

        // Fetch data about the video from YouTube's 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"){

                // If the video was not found, or embedding is not allowed;

                return elements.originalDIV;
            }

            // data holds API info about the video:

            data = data.items[0];

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

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

Начинаем мы с определения нашего скрипта в качестве плагина jQuery, добавив его как функцию в $.fn object. Для того чтобы код было легче читать и понимать, мы размещаем все элементы на странице (DIV’ы элементов управления и progressBar) в структуру под названием elements.

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

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

// Creating a container inside the original div, which will
// hold the object/embed code of the video

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

// Embedding the YouTube chromeless player
// and loading the video inside it:

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
    }
});

// We use get, because we need the DOM element
// itself, and not a jquery object:

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

// Creating the control Div. It will act as a ply/pause button

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

// If the user wants to show the progress bar:

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

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

    elements.progress.click(function(e){

        // When a click occurs on the progress bar, seek to the
        // appropriate moment of the video.

        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. Учтите, что Id видео проводится как flashvar, так что плеер сможет подгрузить его напрямую. Переменная safeID (безопасная javascript-версия videoid) становится значением параметра id объекта элемента, который должен быть сгенерирован. Таким образом, в дальнейшем мы сможем извлечь DOM-элемент, запустив document.getElementById(‘video_’+settings.safeID) и получив доступ к событиям, которые управляют плеером Youtube (играть/пауза и т.д.).

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

var initialized = false;

// Creating a global event listening function for the video
// (required by YouTube's player API):

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

    var interval;

    if(status==-1)    // video is loaded
    {
        if(!initialized)
        {
            // Listen for a click on the control button:

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

                    // If the video is not currently playing, start it:

                    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 {

                    // If the video is currently playing, pause it:

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

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

            initialized = true;
        }
        else{
            // This will happen if the user has clicked on the
            // YouTube logo and has been redirected to youtube.com

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

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

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

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

                if(status==0){ // video has ended
                    elements.control.removeClass('pause').addClass('replay');
                    elements.container.removeClass('playing');
                }
            }

            // This global function is called when the player is loaded.
            // It is shared by all the videos on the page:

            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');

    /*
        //You can alternatively pass an object:

        $('#player').youTubeEmbed({
            video            : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
            width            : 600,         // Height is calculated automatically
            progressBar    : false        // Hide the progress bar
        });

    */

});

Вам просто нужно вызвать youTubeEmbed() и пропустить его через строку или объект конфигурации. Если пропущена строка, то она будет расценена как ссылка на видео в сервисе YouTube. Если вы пропускаете объект, то убедитесь в том, что вы пропускаете параметр видео с корректной ссылкой на видео-файл.

Создаем кастомизированный видео-плеер YouTube посредством API YouTube

Этап 3 – CSS

Теперь нам осталось применить стили и форматирование к плееру. Это даст возможность изменить дизайн элемента управления плеером, а также поможет нам расположить плеер внутри окна.

: youTubeEmbed-jquery-1.0.css

.flashContainer{

    /*    Setting the container to relative positioning
        so we can center the control div */

    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;
}

/* Only show the progress bar when the video is playing */

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

Для того чтобы отредактировать внешний вид плеера, вам нужно поменять значения цветов, указанные выше. Вы также можете отредактировать PNG-файлы, отвечающие за кнопки паузы и старта воспроизведения. Это гораздо проще, чем изменять внешний вид плеера Youtube. Это также поможет нам убрать все лишнее, и оставить лишь то, что нам нужно – самое видео.

Нам этом на плагин плеера готов!

Вам понравилась эта статья? Поделитесь мыслями в комментариях!
Вернуться назад