Новости
- 1. Вставка відеоролика з youtube на сайт.
- 2. Об'єднання youtube роликів в плейлист.
- 3. Вставка декількох youtube-відео з одного плейлиста на сторінку.
- 4. Заміна картинки на youtube-відео.
- 6. Автовідтворення youtube ролика.
- 7. Вимкнути відображення схожих youtube відеороликів.
При встановленні контенту на сайт з відеохостингу youtube.com веб-технолог стикається з низкою типових і нетипових завдань, вирішення яких відображено в даній статті. Звичайно, можна звернутися за пошуком до документації розробників http://developers.google.com/ , Але ми вже узагальнили матеріал, викладений там, виключили зайве, адаптували під потреби комерційного сайту.
1. Вставка відеоролика з youtube на сайт.
Отже, перша і найбільш часто зустрічається завдання - це вставка відеоролика на сайт. Для вирішення цього завдання необхідно знайти необхідне відео на сайті http://youtube.com і вставити код наступного виду на свою сторінку:
<Iframe type = "text / html" width = "640" height = "390" src = "http://www.youtube.com/embed/VIDEO_ID" frameborder = "0" />Тут VIDEO_ID - ідентифікатор потрібного нам відео, наприклад, 'xw6wYcyI-Aw'.
Цей код також Ви можете отримати автоматично, натиснувши на сторінці з відео на youtube кнопку "Поділитися" і вибравши пункт "html-код". В поле введення Ви можете скопіювати в буфері обміну код і вставити його на свою сторінку.
Після вставки коду ми отримаємо сторінку такого вигляду:
2. Об'єднання youtube роликів в плейлист.
Найчастіше нам потрібно вивести на сторінку не один ролик, а кілька, об'єднаних в плейлист каналу на http://youtube.com .
В такому випадку код потрібно модифікувати таким чином:
<Iframe type = "text / html" width = "640" height = "390" src = "http://www.youtube.com/embed/VIDEO_ID?list=PLAYLIST_ID" frameborder = "0" />Тобто в атрибут 'src' потрібно додати параметр '? List = PLAYLIST_ID', де PLAYLIST_ID - ідентифікатор плейлиста, наприклад 'PL-QXPTHVI31NwIGf9XtUbUOEAZv9BQQwv'. І тоді вставлене відео матиме такий вигляд:
Варто врахувати той момент, що в якості картинки відео буде вказуватися не мініатюра для відео VIDEO_ID, а картинка, задана як мініатюри для всього плейлиста. У зв'язку з цим виникає наступна задача: вставка декількох відео зі списку відтворення на сторінку.
3. Вставка декількох youtube-відео з одного плейлиста на сторінку.
Якщо вставити кілька відео стандартним способом, то ми отримаємо наступну сторінку:
Рішення:
Сформувати плейлист вручну, в такому випадку у кожного відео буде своя мініатюра. Для цього потрібно сформувати список ідентифікаторів відеороликів плейлиста (розділених між собою комами) і додати його в атрибут src параметром 'playlist'.
приклад:
<? $ Playlist = 'jwTpFlrZkoo, mLoh40B4MJo, jZ7aGMbFJQ4, -0zy4srVqOY, ld-4vksQ6p0, rKZJVOyu9R0, 60kVgv5rbrQ, SHBd04IX7YQ, Zgs3AJQu_0I'; ?> <Iframe width = "480" height = "270" src = "https://www.youtube.com/embed/xw6wYcyI-Aw?playlist=<?= $ playlist?> & Rel = 0" style = "margin -right: 15px; " frameborder = "0" allowfullscreen> </ iframe> <iframe width = "480" height = "270" src = "https://www.youtube.com/embed/jtFkC3Z2-M8?playlist=<?= $ playlist? > & rel = 0 "frameborder =" 0 "allowfullscreen> </ iframe> <iframe width =" 480 "height =" 270 "src =" https://www.youtube.com/embed/HN8GBG0JtUA?playlist=<?= $ playlist?> & rel = 0 "style =" margin-right: 15px; " frameborder = "0" allowfullscreen> </ iframe> <iframe width = "480" height = "270" src = "https://www.youtube.com/embed/pFUdPJeBdAU?playlist=<?= $ playlist?> & rel = 0 "frameborder =" 0 "allowfullscreen> </ iframe>В такому випадку сторінка прийме потрібний нам вигляд:
4. Заміна картинки на youtube-відео.
При використанні стандартних способів вставки відеоролика на сторінку немає можливості керувати розташуванням елементів управління плеєра, тому іноді кнопка "play" знаходиться прямо в ділянці обличчя людини, знятого на відео, що може бути неприпустимим на комерційних сайтах, що використовують Відеоотзиви клієнтів.
Стандартна мініатюра виглядає так:
Бачимо, що і кадр не особливо вдалий, і кнопка запуску відтворення знаходиться не там, де нам хотілося б.
Є два рішення:
1) Заміна стандартної картинки користувальницької.
Вибираємо кадр відео, відповідний на роль мініатюри. Потім в фотошопі або іншому графічному редакторі обрізаємо картинку так, щоб область особи була в лівій або правій частині кадру. Заходимо в менеджер відео на http://youtube.com/ і завантажуємо свій значок відео:
І отримуємо таке відображення відео:
2) Підготовка мініатюри з підписом.
Ми бачимо, що приблизно 50% області мініатюри відео не несе смислового навантаження, тому на цьому місці можна розмістити блок або про суть відео, або про власника каналу, або з будь-якої іншої продає інформацією. І тоді мініатюра прийме такий вигляд:
5. Відтворення youtube ролика з певного моменту.
Бувають випадки, коли необхідно почати програвати відео, наприклад, з другої хвилини.
Тоді можна в атрибут src додати параметр start і відтворення почнеться з потрібною нам секунди.
приклад:
<Iframe width = "480" height = "270" src = "https://www.youtube.com/embed/xw6wYcyI-Aw?start=60" style = "margin-right: 15px;" frameborder = "0" allowfullscreen> </ iframe>У прикладі відтворення почнеться з шестидесятих секунди.
6. Автовідтворення youtube ролика.
Щоб відео початок програватися відразу після завантаження сторінки, потрібно додати параметр autoplay = 1:
<Iframe width = "560" height = "315" src = "https://www.youtube.com/embed/rKZJVOyu9R0?autoplay=1" frameborder = "0"> </ iframe>7. Вимкнути відображення схожих youtube відеороликів.
Відмовитися від показу інших пропозицій після кінця відтворення ролика можна, прописавши параметр rel = 0:
<Iframe width = "560" height = "315" src = "https://www.youtube.com/embed/rKZJVOyu9R0?rel=0" frameborder = "0"> </ iframe>
Автор: Буякова Катерина - Web-технолог інтернет-агентства Brandmaker.
Playlist = 'jwTpFlrZkoo, mLoh40B4MJo, jZ7aGMbFJQ4, -0zy4srVqOY, ld-4vksQ6p0, rKZJVOyu9R0, 60kVgv5rbrQ, SHBd04IX7YQ, Zgs3AJQu_0I'; ?
Com/embed/xw6wYcyI-Aw?
Playlist=<?
Playlist?
Com/embed/jtFkC3Z2-M8?
Playlist=<?
Playlist?
Com/embed/HN8GBG0JtUA?
Playlist=<?