5 286 Скрипты / Other

Поиск видео по YouTube

Создадим собственный поиск по видеофайлам с популярного сервиса youtube используя его API.

HTML

<div class="wrapper">
    
    <form class="blocks" action="#" method="get">
        <p><input type="text" class="search" /></p>
        <p><input type="Submit" class="btn" value="Поиск" /></p>
        <ul class="reset autocomplete"></ul>
    </form>
    
    <ul class="reset videos"></ul>
    
</div>

JS

Для реализации задуманного воспользуемся плагином для jQuery - YouTube Search Utility - это файл tubeutil.js
Плагин является просто оболочкой для YouTube GDATA API. Утилита создает URL адреса, предоставляя дружественный интерфейс для взаимодействия с результатами поиска.


Что же может эта утилита?

  • Поиск по youtube с помощью ключевых слов
  • Поиск по каналам youtube
  • Выбор конкретного видео
  • Автозавершение предложения

Использование очень простое и позволяет интегрировать поисковую систему youtube на любой сайт.
Прежде чем начать внедрять сие на сайт, вы должны получить ключ YouTube API для разработчиков (зайдите на http://code.google.com/apis/youtube/dashboard/ заполните поля и получите ключ)

Итак, ключ получили.... продолжим...

Сначала инициализируем jQTubeUtil, чтобы можно было обращаться с запросами к YouTube.

$(function(){
    jQTubeUtil.init({
        key: '', // ваш API ключ - обязательно!
        orderby: 'viewCount', // опция, доступные значения: relevance, published, viewCount, rating
        time: 'all_time', // опция, доступные значения: today, this_week, this_month, all_time
        maxResults: 9
    });
});

Далее создадим функцию, которая будет показывать результаты - show_videos()

Теперь создадим автозаполнение предложений.
$('.search').keyup(function(){
    var val = $(this).val(); // get '.search' value when the user releases a key on the keyboard
    jQTubeUtil.suggest(val, function(response){
        var html = '';
        for(s in response.suggestions){
            var sug = response.suggestions[s];
            html += '<li><a href="#">'+sug+'</a></li>';
        }
        if (response.suggestions.length)
            $('.autocomplete').html(html).fadeIn(500); // show suggestions if exists
        else
            $('.autocomplete').fadeOut(500); // hide '.autocomplete' element
    });
}); 
И наконец, создадим событие при нажатии на элемент '.btn' и анкор в элементе '.autocomplete'
$('.btn').click(function(){
    show_videos();
    $('.autocomplete').fadeOut(500);
    return false;
});
 
$('.autocomplete').find('a').live('click', function(){
    // .live() method is able to affect elements that have not yet been added to the DOM
    var text = $(this).text();
    $('.blocks').find('.search').val(text);
    $('.autocomplete').fadeOut(500);
    show_videos();
    return false;
});

CSS

Скачать 717Загрузок 44,97 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи