Как инициализировать API-плеер YouTube? ⇐ CSS
-
Гость
Как инициализировать API-плеер YouTube?
Я пытаюсь реализовать фоновое видео с настраиваемыми элементами управления (перемотать на 5 секунд назад и уменьшить скорость воспроизведения). Я хочу использовать ссылки на YouTube в качестве источников видео и не хочу, чтобы отображалась какая-либо информация о YouTube или элементы управления по умолчанию.
Я пробовал использовать тег iframe и видео, но iframe не может ни изменить скорость, ни перемотать назад (насколько я понял), а тег видео не может использовать ссылки YT.
HTML `
CSS
#myvid { позиция: абсолютная; верх: 50%; осталось: 50%; ширина: 100vw; высота: 100вх; трансформировать: транслировать(-50%, -50%); } .video-фон { фон: #000; положение: фиксированное; верх: 0; правильно: 0; внизу: 0; слева: 0; z-индекс: -99; } .видео-передний план, .video-background iframe { позиция: абсолютная; верх: 50%; осталось: 50%; ширина: 100vw; высота: 100вх; трансформировать: транслировать(-50%, -50%); } JS
window.onload = function(e) { onYouTubeIframeAPIReady() } пусть игрок функция onYoutubeIframeAPIReady(){ console.log("API загружен") player = новый YT.Player("myvid", { идентификатор видео: "QPjHCAHfjoU", playerVars:{ автовоспроизведение: 1, приглушено: 1, элементы управления:0 } }) }
Я пытаюсь реализовать фоновое видео с настраиваемыми элементами управления (перемотать на 5 секунд назад и уменьшить скорость воспроизведения). Я хочу использовать ссылки на YouTube в качестве источников видео и не хочу, чтобы отображалась какая-либо информация о YouTube или элементы управления по умолчанию.
Я пробовал использовать тег iframe и видео, но iframe не может ни изменить скорость, ни перемотать назад (насколько я понял), а тег видео не может использовать ссылки YT.
HTML `
CSS
#myvid { позиция: абсолютная; верх: 50%; осталось: 50%; ширина: 100vw; высота: 100вх; трансформировать: транслировать(-50%, -50%); } .video-фон { фон: #000; положение: фиксированное; верх: 0; правильно: 0; внизу: 0; слева: 0; z-индекс: -99; } .видео-передний план, .video-background iframe { позиция: абсолютная; верх: 50%; осталось: 50%; ширина: 100vw; высота: 100вх; трансформировать: транслировать(-50%, -50%); } JS
window.onload = function(e) { onYouTubeIframeAPIReady() } пусть игрок функция onYoutubeIframeAPIReady(){ console.log("API загружен") player = новый YT.Player("myvid", { идентификатор видео: "QPjHCAHfjoU", playerVars:{ автовоспроизведение: 1, приглушено: 1, элементы управления:0 } }) }
Мобильная версия