Самый простой способ для воспроизведения видео в формате HTML, заключается в использовании YouTube.
Борясь с видео форматами?
Различные версии различных браузеров поддерживают различные форматы видео.
Ранее в этом уроке, вы видели, что вы, возможно, придется конвертировать видео в различные форматы видео, чтобы заставить их играть во всех браузерах.
Преобразование видео в другой формат может быть сложным и трудоемким.
Простейшее решение может быть, чтобы позволить YouTube играть видео на веб-странице.
Id видео YouTube
YouTube будет показывать идентификатор (like XGSy3_Czz8k) , (or play) (like XGSy3_Czz8k) , при сохранении (or play) видео.
Вы можете использовать этот идентификатор, и обратитесь к вашему видео в HTML.
Воспроизведение видео YouTube в формате HTML
Для воспроизведения видео на веб-странице, выполните следующие действия:
- Загрузить видео на YouTube
- Примите к сведению, что ID видео
- Определить элемент в вашей веб — странице
- Пусть src точку атрибута к видео URL
- Используйте атрибуты ширину и высоту, чтобы указать размер игрока
- Добавьте любые другие параметры в URL
Пример — Использование плавающего фрейма (the recommended method)
src=»http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1″>
Параметры YouTube
авто-скрытие
Значение 0: Управление плеером всегда видны.
Значение 1: Управление плеером скрывается автоматически, когда видео воспроизводится.
Значение 2 (default) по (default) : Если игрок имеет 16: 9 или 4: 3, так же , как 1, в противном случае такие же как 0.
Автовоспроизведение
Значение 0 (default) по (default) : Видео не будет воспроизводиться автоматически после загрузки проигрывателя.
Значение 1: Видео будет воспроизводиться автоматически после загрузки проигрывателя.
управления
Значение 0: контроль игрока не отображается. Видео грузы немедленно.
Значение 1 (default) по (default) : Игрок управляет дисплеем. Видео грузы немедленно.
Значение 2: Игрок контролирует дисплей, но видео не загружается, прежде чем пользователь инициирует воспроизведение.
петля
Значение 0 (default) по (default) : Видео будет играть только один раз.
Значение 1: Цикл видео будет (forever) .
плейлист
Разделенный запятыми список видео , чтобы играть (in addition to the original URL) .
YouTube Встраивание
YouTube встраивает были устаревшими с января 2015 года.
Вы должны перенести приложение использовать встраивает.
Источник: www.w3bai.com
Скрипт для просмотра видео с YouTube в модальном окне
Всем привет. Поздравляю с уже наступившим новым 2016 годом. Это первая статья в этом году, но я не стал выкладывать что-то грандиозное по этому поводу. Во-первых, ничего такого прямо уж грандиозного у меня и нет, а во-вторых, просто хочу выложить то, что у меня накопилось на рабочем столе (это все ради того, чтобы его почистить). Это, конечно, надо было сделать еще в прошлом году, но с работой я не успевал и пришлось в Новый год уходить с «грязным» рабочим столом.
Ну да ладно. Что-то я отвлекся. В этой статье я буду говорить о небольшом довольно простом скрипте просмотра видео с YouTube в модальном окне. Тут ничего не расскажешь, поэтому лучше сразу посмотрите «Демо». Скрипт подойдет для тех, кто ищет воспроизведение видео с YouTube в отдельно открывающемся окошке на все разрешение экрана.
В правом верхнем углу предусмотрен крестик, для закрытия модального окна.
Преимущество скрипта в простоте установки и скорости загрузки. Скрипт легкий, простой и в нем нет ничего лишнего.
Установка скрипта на сайт
Инструкция для тех, у кого уже есть сайт и он хочет (или она) добавить воспроизведение роликов с YouTube в модальном окне.
1. Скачайте архив
Для начала нужно скачать архив и разархивировать его
2. Залейте необходимые файлы на сервер
В корень вашего сайта нужно залить папку youtuber и файл jquery.js (его вы можете залить туда, где у Вас лежат все скрипты)
3. Подключите скрипты
Между тегами и вставьте следующий код
Соответственно, проверьте пути, у вас они могут отличаться
4. Вставьте html код
Ну и последний шаг — это вставить html код туда, где вы хотите разместить ссылку на открытие модального окна с видео. Код выглядит так:
- https://www.youtube.com/watch?v=5HIdQkOobL8youtuber» — обязательный атрибут для работы скрипта
- — элемент ссылки, вместо которой может быть текст или другое изображение
Если вы все сделали правильно, то скрипт заработает. Если же что-то пошло не так, сначала проверьте все пути (подключение скриптов, картинок, ссылку на видео). Если и там все нормально, значит возможен конфликт скриптов, а в частности версии библиотеки jquery. В этом случае оставьте самую последнюю версию. Всего доброго.
Источник: bayguzin.ru
Как очень легко вставить видео в html с ютуба?
Всем привет, дорогие друзья. Вы знаете? Я тут вам в прошлой своей статье говорил, что таблицы — это последнее, что мы будем разбирать в основах html. Но я солгал! Ну ладно, солгал — это конечно я пошутил.
Я просто подумал и решил вставить еще один урок, который пригодится вам не только создания сайта в ручную, но и даже, если вы работайте в вордпрессе, джумле или других CMS.
Дело касается работы с видео. Сайт всегда лучше смотрится, когда в некоторых статьях или в некоторых местах есть тематические видео. Я сам периодически вставляю в свои статьи ролики с ютуба, чтобы дополнить свои статьи. Так на самом деле лучше и все ото легко воплотить даже имея под рукой самый обыкновенный блокнот.
Ну и раз уж мы начали тему сатйтостроения, то я хотел бы вам показать, как вставить видео в html с ютуба, используя незамысловатый блокнот Notepad++. Это совсем не сложно, но знать нужно обязательно. Ну что, готовы? Тогда, как говорил Юрий Алексеевич: «Поехали!»
- Заходим на сайт youtube и находим то видео, которое хотим отображать на нашем сайте. Зайдите на сам ролик.
- Внизу ролика, прямо под его названием, вы увидите ссылку «Поделиться». Смело жмем ее.
- Дальше вам откроется подрбный список того, как вы можете поделиться (ссылка, соц.сети и т.д.), но вы должны будете выбрать вкладку html. После этого у вас появится нужный html код.
- Выделите этот код и скопируйте его. После этого вставьте скопированный html-код в ваш документ, внутрь тега в нужное вам место.
- Теперь сохраните результат и запустите ваш документ в браузере. Видите? Встроенное видео появилось. Круто. Теперь вы можете даже свой онлайн кинотеатр сделать))).
Ну как? По-моему очень просто.
В других знаменитых видеосервисах можно найти точно такие же поля для вставки и просто зафигачить видео на свою страницу. Это очень удобная функция и главный ее плюс в том, что видео не занимает место на вашем сайте, а значит не утяжеляет его.
В общем я думаю, что смысл вам ясен и это поможет вам с вашим будущим (или имеющимся) веб-сайтом. Но вообще, если вы хотите знать HTML и CSS на очень достойном уровне, то обязательно изучите курс «HTML3 и CSS5 с нуля до профи». Здесь всё четко изложено, а главное, что курс создан для новичков, и подача материала просто великолепная.
Ну а на этой радостной ноте я с вами прощаюсь. Надеюсь, что мой сегодняшний урок был для вас полезен. Не забывайте подписываться на обновления статей блога и делиться в социальных сетях, тогда вы всегда будете в курсе всего самого интересного. А с вами мы увидимся в моих других статьях. Пока-пока!
С уважением, Дмитрий Костин.
Источник: koskomp.ru