Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Создание собственного проигрывателя видео с YouTube

Создание собственного проигрывателя видео с YouTube


Демо: смотреть
Скачать: youtube-player.zip [15,93 Kb] (cкачиваний: 159)


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

Другие возможные пути, вы загружаете его на сайт обмена видео, таких как YouTube.

Сегодня мы собираемся сделать JQuery плагин, который использует Chromeless плеер YouTube, и создает наш собственный набор минималистичного управления, что позволяет для идеальной интеграции в ваш сайт. Поддерживаемые элементы управления включают воспроизведение / пауза .

Плагин будет использовать YouTube, GData API.

Использование плагина для встраивания видео очень простое:
// 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>


Создание собственного проигрывателя видео с YouTube


Шаг 2 – jQuery
Подключаем скрипты между head:
<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>


Пример 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"
    }
}


script.js
В 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
        });

    */

});


Остальные скрипты возмите в исходных файлах.

Создание собственного проигрывателя видео с YouTube


Шаг 3 – jQuery
Наконец, нам осталось применить нескольких стилей 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;
}


На этом мы закончим данный урок. Удачных вам проектов.
Опубликовал dimas_ua, 29-03-2011, 00:00 Комментариев: 1
 (голосов: 0)
Пишет Денис, 29 марта 2011 06:28
  • Сообщений: 0
  • Новостей: 0
Вот за этот урок тебе отдельное спасибо! Блин, обожаю твой сайт в моей rss-ленте :-)