Есть веб-страница на которой я использую свой плеер на основе Iframe Youtube API. Плеер везде работает отлично кроме WebView на Android. Чтобы проверить ошибки, я подключил android телефон к ноутбуку и в хроме проинспектировал
chrome://inspect/#devices страницу, там увидел такие ошибки:
Uncaught TypeError: s.playVideo is not a function at HTMLDivElement. (player.js:1:3594)
Uncaught ReferenceError: _yt_player is not defined at embed.js:292:104
Uncaught ReferenceError: await is not defined at :1:13
Uncaught TypeError: p.playVideo is not a function at HTMLButtonElement.
Как я понял, то не происходит инициализация апишки. Подключаю свой скрипт как файл player.js к странице. Дожидаюсь загрузки DOM, но пофиг. В обычном браузере работает везде норм.
document.addEventListener('DOMContentLoaded', function() {
var players = [];
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function is called when the YouTube IFrame API is ready
function onYouTubeIframeAPIReady() {
document.querySelectorAll('.player__container').forEach((container, index) => {
var videoId = container.dataset.id;
var playerElement = container.querySelector('.player');
var coverElement = container.querySelector('.player__cover');
// Set cover image from YouTube thumbnail
coverElement.style.backgroundImage = `url(https://img.youtube.com/vi/${videoId}/maxresdefault.jpg)`;
// Initialize the YouTube player
var player = new YT.Player(playerElement, {
width: "590",
height: "640",
videoId: videoId,
playerVars: {
controls: 0,
disablekb: 0,
modestbranding: 1,
rel: 0,
autohide: 1,
showinfo: 0,
playsinline: 1
},
events: {
'onReady': (event) => {
onPlayerReady(event, container, player, videoId);
},
'onStateChange': onPlayerStateChange
}
});
// Store the player instance
players.push(player);
});
}
// This function is called when the player is ready
function onPlayerReady(event, container, player, videoId) {
// Setup controls and cover only after player is ready
setupControls(container, player);
setupCover(container.querySelector('.player__cover'), player);
}
// Handle player state changes (currently empty)
function onPlayerStateChange(event) {
}
// Setup controls for play, pause, stop, volume, etc.
function setupControls(container, player) {
var playButton = container.querySelector('.player__play');
var coverElement = container.querySelector('.player__cover');
// Another controls...
// Play button event
playButton.addEventListener('click', () => {
player.playVideo();
coverElement.classList.add('hidden');
});
// Another button events...
}
// Setup cover click event to play video
function setupCover(coverElement, player) {
coverElement.addEventListener('click', () => {
coverElement.classList.add('hidden');
player.playVideo();
});
}
// Assign the onYouTubeIframeAPIReady function to the global window object
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
});
