главная

Теги:


Делаем поиск по YouTube на своем сайте

YouTube - широко известный сайт для хранения видео, на котором пользователи могут загружать, просматривать и показывать всем свои ролики. В данном уроке мы разберемся как создать поиск по сайту YouTube для своего проекта.

Создайте структуру каталогов и файлов как на рисунке ниже:

jQTubeUtil

tubeutil.js - плагин jQuery. Автор: Nirvana Tikku.

Плагин jQTubeUtil является оболочкой для YouTube GDATA API. GDATA API поддерживает запросы JSON, для которых в плагине используется jQuery. Плагин строит URLы для обеспечения взаимодействия поиска и результатов.

Возможности плагина:

  • поиск по YouTube с использованием ключевого слова
  • поиск по стандартным фидам YouTube
  • выбор заданного видео на YouTube
  • используется автозаполнение для YouTube

Плагин работает очень быстро и может интегрировать поиск по YouTube в любой сайт.

Прежде, чем начать, вам нужен ключ YouTube API для разработчиков. Просто получите его на странице YouTube API.

 

index.html





Поиск на YouTube | Демонстрация для сайта RUSELLER.COM







	

      Класс reset добавлен к неупорядоченным спискам только для сброса стилей.

       

      init.js

      Сначала нужно инициализировать 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():

      function show_videos(){
          var val = $('.blocks').find('.search').val(); // Получаем значение из элемента '.search'
          $('.videos').addClass('preloader').html('');  // Добавляем класс preloader м очищаем  HTML в элементе '.videos'
          jQTubeUtil.search(val, function(response){    // Инициализация поиска
              var html = '';
              for (v in response.videos) {
                  var video = response.videos[v], // Объект видео YouTube
                      minutes = parseInt(video.duration / 60),
                      seconds = video.duration % 60;
                  // create 'li' element
                  html += '
    • '; html += '

      '; html += '' + video.title + ''; html += '

      ' html += '

      ' + video.title + ''; html += '' + minutes + ':' + (seconds < 10 ? '0'+seconds : seconds) + ''; html += '

      '; html += '
    • '; } $('.videos').removeClass('preloader').html(html); // Удаляем класс preloder и показываем видео }); }

      Теперь создаем функцию автозаполнения поля поиска:

       $('.search').keyup(function(){
          var val = $(this).val(); // Получаем значение элемента '.search', когда пользователь отпускает клавишу
          jQTubeUtil.suggest(val, function(response){
              var html = '';
              for(s in response.suggestions){
                  var sug = response.suggestions[s];
                  html += '
    • '+sug+'
    • '; } if (response.suggestions.length) $('.autocomplete').html(html).fadeIn(500); // Показываем предложения, если они есть else $('.autocomplete').fadeOut(500); // Причем элемент '.autocomplete' }); });

      Последний штрих. Создаем обработчики события click для элемента '.btn' и ссылки в элементе '.autocomplete':

      $('.btn').click(function(){
          show_videos();
          $('.autocomplete').fadeOut(500);
          return false;
      });
       
      $('.autocomplete').find('a').live('click', function(){
          // Метод .live() позволяет работать с элементами, которые еще не добавлены к DOM 
          var text = $(this).text();
          $('.blocks').find('.search').val(text);
          $('.autocomplete').fadeOut(500);
          show_videos();
          return false;
      });
       

      Окончательный вид файла init.js будет таким:

      $(function(){
           
          jQTubeUtil.init({
              key: '', // Ваш ключ API - ОБЯЗАТЕЛЬНО!
              orderby: 'viewCount', // Опционально, доступные значения: relevance, published, viewCount, rating
              time: 'all_time', // Опционально, доступные значения: today, this_week, this_month, all_time
              maxResults: 9
          });
      
           
      	$('.search').keyup(function(){
      		var val = $(this).val(); // Получаем значение элемента '.search', когда пользователь отпускает клавишу
      		jQTubeUtil.suggest(val, function(response){
      			var html = '';
      			for(s in response.suggestions){
      				var sug = response.suggestions[s];
      				html += '
    • '+sug+'
    • '; } if (response.suggestions.length) $('.autocomplete').html(html).fadeIn(500); // Показываем предложения, если они есть else $('.autocomplete').fadeOut(500); // Причем элемент '.autocomplete' }); }); $('.btn').click(function(){ show_videos(); $('.autocomplete').fadeOut(500); return false; }); $('.autocomplete').find('a').live('click', function(){ // Метод .live() позволяет работать с элементами, которые еще не добавлены к DOM var text = $(this).text(); $('.blocks').find('.search').val(text); $('.autocomplete').fadeOut(500); show_videos(); return false; }); function show_videos(){ var val = $('.blocks').find('.search').val(); // Получаем значение из элемента '.search' $('.videos').addClass('preloader').html(''); // Добавляем класс preloader м очищаем HTML в элементе '.videos' jQTubeUtil.search(val, function(response){ // Инициализация поиска var html = ''; for (v in response.videos) { var video = response.videos[v], // Объект видео YouTube minutes = parseInt(video.duration / 60), seconds = video.duration % 60; // create 'li' element html += '
    • '; html += '

      '; html += '' + video.title + ''; html += '

      ' html += '

      ' + video.title + ''; html += '' + minutes + ':' + (seconds < 10 ? '0'+seconds : seconds) + ''; html += '

      '; html += '
    • '; } $('.videos').removeClass('preloader').html(html); // Удаляем класс preloder и показываем видео }); });

      CSS

      ul.reset,
      ul.reset li {
          display:block;
          list-style:none;
          padding:0;
          margin:0;
      }
       
      .blocks {
          float:left;
          width:1000px;
          margin-bottom:50px;
          position:relative;
      }
       
      .blocks p {
          float:left;
          margin:0;
      }
       
      .blocks .search {
          float:left;
          width:258px;
          height:42px;
          line-height:42px;
          padding:0 10px;
          font-size:13px;
          color:#8c8c8c;
          background:url(../gfx/input.png) no-repeat;
          border:none;
      }
       
      .blocks .btn {
          float:left;
          width:71px;
          height:42px;
          border:none;
          text-indent:-9999px;
          cursor:pointer;
          background:url(../gfx/btn.png) no-repeat;
      }
       
      ul.autocomplete {
          display:none;
          width:300px;
          padding:10px;
          position:absolute;
          top:50px;
          left:0;
          background:#fff;
          border:1px solid #e4e4e4;
           
          /* CSS3 */
          -moz-border-radius:8px;
          -webkit-border-radius:8px;
          border-radius:8px;
      }
       
      ul.autocomplete li a {
          display:block;
          padding:5px 10px;
          font-size:11px;
          outline:none;
      }
       
      ul.autocomplete li a:hover {
          background:#f5f5f5;
          color:#991b22;
           
          /* CSS3 */
          -moz-border-radius:4px;
          -webkit-border-radius:4px;
          border-radius:4px;
      }
       
      .videos {
          float:left;
          clear:both;
          width:100%;
          min-height:200px;
      }
       
      .videos.preloader {
          background:url(../gfx/loader.gif) no-repeat center; 
      }
       
      ul.videos li {
          float:left;
          width:300px;
          padding:10px;
          margin:0 5px 5px 0;
      }
       
      ul.videos li p {
          margin:0;
          padding:0;
      }
       
      .videos .image {
          float:left;
          width:120px;
          height:90px;
          font-size:0;
          line-height:0;
          padding:5px;
          background:#fff;
          border:1px solid #E6E6E6;
          overflow:hidden;
      }
       
      .videos .entry {
          float:right;
          width:163px;    
          font-weight:bold;
      }
       
      .videos .entry small {
          display:block;
          font-weight:normal;
          color:#ACACAC;
      }
       

      Готово!

      Источник урока: playground.mobily.pl/tutorials/how-to-create-youtube-search-engine.html

      Урок Создан:2011-05-18 Просмотров:7075

      Добавить комментарий:

      
      Copyright© 2009 Hosted by Zhost