Я пытаюсь поместить источник видео YouTube в тег HTML5 , но, похоже, это не работает. После некоторого поиска в Google я обнаружил, что HTML5 не поддерживает URL-адреса видео YouTube в качестве источника.
Можете ли вы использовать HTML5 для встраивания видео с YouTube? Если нет, есть ли обходной путь?
Шаг 1: добавьте & html5 = True к вашему любимому URL-адресу YouTube
Шаг 2: Найдите тег в источнике
Шаг 3: Добавьте controls = "controls" в тег видео:
Пример:
В вашем Javascript:
var onPlayerReady = функция (событие) {event.target.playVideo (); };//Первый аргумент YT.Player - это идентификатор HTML-элемента. //API YouTube заменит мой тег
//на iframe, содержащий видео youtube. Var player = new YT. Player ('player', {height: 320, width: 400, videoId: '6Dc1C77nra4', events: {'onReady': onPlayerReady}});
5
Я создал действительно небольшую (4,89 КБ) библиотеку javascript именно для этой функциональности. .
Найдено на моем GitHub здесь: https://github.com/thelevicole/youtube-to-html5-loader/
Это очень просто:
Рабочий пример здесь: https://jsfiddle.net/thelevicole/5g6dbpx3/1/
Библиотека извлекает идентификатор видео из атрибута данных и создает запрос к https://www.youtube.com/get_video_info?video_id= . Он декодирует ответ, который включает информацию о потоковой передаче, которую мы можем использовать для добавления источника в тег .
1
Самый простой ответ дает W3schools. https://www.w3schools.com/html/html_youtube. asp
- Загрузите свое видео на Youtube.
- Обратите внимание на идентификатор видео
- Теперь напишите этот код в своем HTML5.
1
Отображение тега HTML-видео видео Youtube
У меня есть несколько URL-адресов YouTube, например https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg. Когда я поместил его в тег видео html, он сказал: «Недопустимый источник».
Как решить эту проблему?
Когда я использовал iframe для отображения видео, у меня было другая проблема, описанная здесь: видео не отображается в iframe в IE, но отображается в Firefox и Chrome.
Это мой HTML:
Вы не можете использовать тег HTML5 video для видео на YouTube, он поддерживает только файлы MP4, WebM и Ogg. W3C Schools
Youtube уже предоставляет вам функцию «встраивания» на свою страницу, которая автоматически генерирует iFrame для вас. Youtube Embed Есть еще несколько методов, но они больше не используются (устарели). Youtube API
Что касается проблемы с IE, возможно, взгляните на этот аналогичный вопрос: код вставки iframe YouTube не работает в IE
Единственный способ обойти проблему если вы хотите использовать тег HTML5 video, это загрузить видео Youtube в одном из указанных форматов.
