Превью для ролика 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
К сожалению не уверен что подобный адрес ссылки будет всегда.
а как эти скрины вставлять поверх видео? Есть такой код плеера?
Собственно когда внедряется видео с youtube, то в плеере перед стартом уже отображена эта картинка.
Внедрить плеер на свой сайт можно следующим образом — когда просматриваете видео на youtube, под роликом есть ссылка-кнопка «Поделиться», далее выбираете «HTML-код», копируем код и вставляем на свой сайт.
В первом абзаце статьи я описал зачем я всё это делал. Основная идея была в что чтобы лишний раз не нагружать страницу внедрением ролика с youtube, отображать только preview изображения и уже после когда понадобиться показывать плеер youtube с видео.