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

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


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

Jquery → Минималистический плеер для YouTube

Минималистический плеер для YouTube

В прошлом уроке вы узнали, как создать поисковe. системe YouTube на своем сайте. Сегодня я собираюсь показать Вам, действительно прикольный и минималистичный плеер YouTube.

Демо: смотреть
Скачать: youtube_player.zip [44,61 Kb] (cкачиваний: 175)


Структура файлов и папок выглядит следующим образом:
Минималистический плеер для YouTube


Дизайн

В этом уроке я использую компактный музыкальный проигрыватель из "PSD файла" созданные Орман Кларком, который вы можете скачать здесь .

Минималистический плеер для YouTube


SWFObject (swfobject.js)
SWFObject является легкой библиотекой в использовании, для встраивания содержание Flash. Это гарантирует поддержку кросс-браузерности. Вы можете скачать его здесь.

TubePlayer (tubeplayer.js)
TubePlayer является JQuery плагин (созданный Nirvana Tikku ), который реализует YouTube Player API, а также позволяет создавать собственные элементы управления и компоненты для видео с YouTube. В дополнение к JQuery, этот плагин также требует SWFObject.

index.html
Как обычно, сначало создаем HTML разметку:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Minimalist YouTube player</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/tubeplayer.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
  
<body>
      
    <div class="player">
        <div id="video" class="video-8Eur8oIo3OU"></div>
    </div>
  
</body>
</html>


tubeplayer.js
На этом этапе мы собираемся изменить TubePlayer плагин. Я обнаружил, что нет никакого способа, чтобы скрыть YouTube панели управления использованую TubePlayer.Пропустите этот шаг, если вы хотите, чтобы панель управления отображалась.

Открыть tubeplayer.js и перейдите к строке 134:
"http://www.youtube.com/v/"+o.initialVideo+"?fs=1&enablejsapi=1&version=3&playerapiid="+ID,


Заменим её на:
"http://www.youtube.com/apiplayer?video_id="+o.initialVideo+"&fs=1&enablejsapi=1&autoplay=1&version=3&playerapiid="+ID,


init.js
$(function(){
      
    var v = $('#video').attr('class').split('video-')[1],
        // get video ID from 'class' attribute
        player = false,
        // player is not running
        key = '',
        // you YouTube API key - required!
        url = 'http://gdata.youtube.com/feeds/api/videos/'+v+'?callback=?&key='+key+'&format=5&alt=json';
        // query specified video
        // we are trying to make an AJAX request to a different domain, which is being restricted by the Same Origin Policy.
        // to over come this we are going to use JSONP callback=? to the url that we are requesting, this will help to overcome the cross-domain barrier
      
      
      
    $('#video-'+v).live('player', function(){
        // .live() method is able to affect elements that have not yet been added to the DOM  
        var play = function(){
            $('.controls').find('.play').addClass('pause').removeClass('play');
        }, pause = function(){
            $('.controls').find('.pause').removeClass('pause').addClass('play');
        }
        // create play/pause functions, just to change class of control button
        $(this).tubeplayer({
            width: 500,
            // set the width of the player
            height: 350,
            // set the height of the player
            initialVideo: v,
            // run TubePlayer with specified video
            allowFullScreen: false,
            onPlayerPlaying: function(){
                play();
            },
            onPlayerPaused: function(){
                pause();
            },
            onPlayerEnded: function(){
                pause();
            },
            onStop: function(){
                pause();
            }
        });
        if (!$(this).find('.stop').length)
            $(this).prepend($('<a />').attr('href', '#').addClass('stop').text('Stop'));
        // add once close popup button
        player = true;
        // player is running
    });
      
    $.getJSON(url, function(response){
            var html = '',
                video = response.entry, // get json object
                title = video.title.$t, // get title
                category = video.media$group.media$category[0].label, // get category name
                thumb = video.media$group.media$thumbnail[2].url, // get a path to the thumbnail
                views = video.yt$statistics.viewCount, // get views count
                favs = video.yt$statistics.favoriteCount, // get favourite count
                duration = video.media$group.yt$duration.seconds; // get duration of the video
            html += '<div class="image">';
            html += '<img src="'+thumb+'" alt="" />';
            html += '<div class="controls"><a href="#" class="play">Play</a></div>';
            html += '</div>';
            html += '<div class="entry">';
            html += '<p class="title">'+title+' ('+parseInt(duration/60)+':'+duration%60+')</p>';
            html += '<span>Views: '+views+'</span>';
            html += '<span>Category: '+category+'</span>';
            html += '<span class="favs">'+favs+'</span>';
            html += '</div>';
            $('#video').html(html).after(
                $('<div />').attr('id', 'video-'+v).addClass('ytube')
            );
            // create 'div' that holds flash content with SWFObject  
    });
      
      
    $('.controls').find('.play').live('click', function(){
        player == true ? $('#video-'+v).tubeplayer('play') : $('#video-'+v).fadeIn().trigger('player');
        // create the player if it is not running
        return false;
    });
      
    $('.controls').find('.pause').live('click', function(){
        $('#video-'+v).tubeplayer('pause');
        return false;
    });
      
    $('#video-'+v).find('.stop').live('click', function(){
        $('#video-'+v).tubeplayer('stop').fadeOut();
        player = false;
        return false;
    });  
              
});


default.css
Ну и на последок добавим стили. Высоту, ширину и красоту =)
.player {
    width:380px;
    position:relative;
}
  
.ytube {
    display:none;
    position:absolute;
    top:105px;
    left:-200px;
    width:500px;
    height:350px;
    padding:10px;
    background:url(../gfx/opac.png) repeat;
  
    /* CSS3 */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    -moz-box-shadow:0 0 4px #000;
    -webkit-box-shadow:0 0 4px #000;
    box-shadow:0 0 4px #000;
}
  
.ytube .stop {
    display:block;
    position:absolute;
    top:4px;
    right:4px;
    width:16px;
    height:16px;
    text-indent:-9999px;
    outline:none;
    background:url(../gfx/stop.png) no-repeat;
}
  
  
#video {
    float:left;
    clear:both;
    width:380px;
}
  
#video .image {
    float:left;
    width:120px;
    height:90px;
    overflow:hidden;
    position:relative;
  
    /* reset img */
    font-size:0;
    line-height:0;
  
    /* CSS3 */
    -moz-box-shadow:0 0 4px #000;
    -webkit-box-shadow:0 0 4px #000;
    box-shadow:0 0 4px #000;
}
  
#video .entry {
    float:right;
    width:245px;    
    font-weight:bold;
}
  
.entry .title {
    /* reset p */
    padding:0;
    margin:0;
  
    margin-bottom:5px;
    font-weight:bold;
    font-size:13px;
    color:#efefef;
    text-shadow:1px 1px 0 #212121;
}
  
.entry span {
    margin-right:8px;
    font-size:10px;
    font-weight:normal;
    color:#999;
}
  
.entry .favs {
    display:block;
    background:url(../gfx/favs.png) no-repeat left center;
    padding-left:20px;
    margin-bottom:5px;
}
  
.image .controls {
    position:absolute;
    top:50%;
    left:50%;
    margin:-17px 0 0 -20px;
    padding:10px 15px;
    background:url(../gfx/opac.png) repeat;
  
    /* CSS3 */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}
  
.controls a {
    float:left;
    display:block;
    text-indent:-9999px;
    outline:none;
    width:10px;
    height:15px;
    background-repeat:no-repeat;
}
  
.controls .play {
    background-image:url(../gfx/play.png);
}
  
.controls .pause {
    background-image:url(../gfx/pause.png);
}


Демо: смотреть
Скачать: youtube_player.zip [44,61 Kb] (cкачиваний: 175)
Опубликовал dimas_ua, 10-05-2011, 00:00 Комментариев: 0
 (голосов: 1)