Превью для ролика youtube — составление ссылки

Была у меня задача — выводить списко видео-клипов, превью-изображений, при клике по которым в сплывающем окне открывается видео и производиться. Сначала хотел прикреплять в базе к ссылкам на ролики так же изображения. Но подумал что можно сделать проще.

Посмотрел какие файлы качает HTML5 плеер(посредством Firebug — вкладка Сеть), увидел ту самую картинку для preview.

Что делаем…

Есть к примеру на ролик http://www.youtube.com/watch?v=nKhheto4L6k&feature=fvsr

Копируем ту часть, что выделена жирным. Это я так понял уникальный идентификатор видео ролика на Youtube — он фигурирует при внедерении видео различными путями — через object, iframe и HTML5

Составляем url на картинку по следующему формату

http://i(1-4).ytimg.com/vi/(уникальный идентификатор видео)/(mq|hq|sd|maxres)default.jpg ,

Уникальный идентификатор — nKhheto4L6k .

Домен третьего уровня может быть i, i1, i2, i3, i4. Название файла в конце по возрастанию качества разрешения  default.jpg, mqdefault.jpg, hqdefault.jpg, sddefault.jpg, maxresdefault.jpg. maxresdefault.jpg не всегда может быть.

Получаем http://i4.ytimg.com/vi/nKhheto4L6k/hqdefault.jpg

К сожалению не уверен что подобный адрес ссылки будет всегда.

Рубрики: Web-разработка
Понравилось? Поделись с другими плз












Комментарии ВКонтакте





Комментарии с сайта
  1. Дмитрий:

    а как эти скрины вставлять поверх видео? Есть такой код плеера?

    • admin:

      Собственно когда внедряется видео с youtube, то в плеере перед стартом уже отображена эта картинка.
      Внедрить плеер на свой сайт можно следующим образом — когда просматриваете видео на youtube, под роликом есть ссылка-кнопка «Поделиться», далее выбираете «HTML-код», копируем код и вставляем на свой сайт.
      В первом абзаце статьи я описал зачем я всё это делал. Основная идея была в что чтобы лишний раз не нагружать страницу внедрением ролика с youtube, отображать только preview изображения и уже после когда понадобиться показывать плеер youtube с видео.


Оставить комментарий

*