Я создаю небольшое веб-приложение, использующее nodejs для воспроизведения пользовательских списков видео YouTube. Проблема в том, что в Google Chrome YT-api перестает вызывать события после вызова только одного события onPlayerReady. Firefox, кажется, показывает то же самое поведение, но оно будет работать случайно при обновлении страницы. Я провожу несколько часов, делая метод проб и ошибок, чтобы определить причину проблемы. Короче говоря, я наконец-то обнаружил, что виновником ошибки является загрузка material.min.js.
Следующий фрагмент кода html - это то, что, по-видимому, работает большую часть времени только в Firefox. РЕДАКТИРОВАТЬ: это мой индекс. html
Примечание: я получил его на работа в Google Chrome тоже, но мне пришлось поставить точку останова внутри onPlayerReady в самом начало. Очевидно, что задержки было достаточно, чтобы не допустить убийства API YT-iFrame в сценарии MDL.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- meta stuff here -->
<title>Youtube LinkNav</title>
<!-- Style imports for Material Design Lite -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css"/>
<!-- Local stylesheet -->
<link rel="stylesheet" href="stylesheets/styles.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body class="mdl-demo mdl-color--blue-grey-900 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- rest of html structure here... -->
</div>
<!-- Sourcecode for Material Design Lite -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- This code loads the iFrame Player API code asynchronously.-->
<script src = "https://www.youtube.com/iframe_api"></script>
<!-- youtube api local handler -->
<script src="jsscripts/yt-api-script.js"></script>
</body>
</html>
Я также попытался поместить все сценарии в заголовок. Просто iFrame API с моим исходным кодом в заголовке с MDL на теле. Все в шапке. Также я пробовал предыдущие в разных порядках, а также добавлял и удалял defer тут и там. Ничего. На данный момент я просто делаю слепые снимки в надежде, что что-то это исправит.
Редактировать 2: Я не уверен, что это полезно, но я использую этот шаблон из MDL и примера проигрывателя YouTube на github. Также проблема сохраняется независимо от того, запущена ли веб-страница на сервере в nodejs или в виде локального файла непосредственно из браузера.