Возможные проблемы
Типичные сбои при встраивании и работе плеера. Если проблема скорее продуктовая (загрузка, доступы, аккаунт) — начните с решения проблем в разделе диагностики.
| Симптом | Тема |
|---|---|
| Не загружается видео или зависает | Воспроизведение |
| DRM не работает в инкогнито на Android | DRM |
| Можно записать экран при включённой защите | DRM |
| DRM не работает в WebView на Android | DRM |
| DRM не работает в Electron | DRM |
| Не стартует play() с своей кнопки | Автозапуск |
| Ошибка NotAllowedError | Автозапуск |
| Не работает автозапуск в Electron | Автозапуск |
| Зависает страница с большим числом плееров | Производительность |
| Не работает fullscreen во вложенном iframe | Встраивание |
| Не работает поворот экрана в PWA | Встраивание |
Не загружается видео или зависает
Что происходит. Плеер открывается, но видео не грузится или воспроизведение зависает.
Почему. Часто мешают сеть или фоновые вкладки, которые забирают ресурсы браузера.
Что сделать.
- Проверьте скорость на Скоростомере .
- Закройте все вкладки, кроме плеера, и перезагрузите страницу.
DRM не работает в инкогнито на Android
Что происходит. Видео с Widevine не воспроизводится в режиме инкогнито на Android.
Почему. С Chrome 62 поддержка Widevine в инкогнито на Android отключена: так пользователи не теряют платные лицензии при закрытии вкладок.
Что сделать. Смотрите видео с DRM в обычном режиме браузера.
Подробнее: Media updates in Chrome 62 .
Можно записать экран при включённой защите
Что происходит. При включённом Widevine DRM всё равно можно записать экран с видео.
Почему. Часть CSS у родителя или iframe ломает защиту от захвата в браузере.
Что сделать. Проверьте известные случаи:
- У родительского элемента есть
border-radius— задайтеoverflow: initialилиoverflow: visible. - Firefox на macOS: на элемент плеера (или
video) либо на предка со stacking context применёнtransform. - На странице используются
backdrop-filterилиfilter. - У
<iframe>плеера или родителя заданыaspect-ratioилиpadding-top.
Подробнее: баг Chromium про filter .
DRM не работает в WebView на Android
Что происходит. Защищённое видео не играет внутри Android WebView.
Почему. В WebView часто нет поддержки EME/Widevine или она отключена.
Что сделать. Проверьте поддержку на shaka-player-demo
. Если значение null, поддержки нет — настраивайте WebView или используйте системный браузер.
Подробнее: video.js #5563 , Widevine в Android WebView , protected content в WebView .
DRM не работает в Electron
Что происходит. Widevine DRM не воспроизводится в приложении на Electron.
Почему. В Electron CDM нужно подключать и проверять отдельно от обычного Chrome.
Что сделать. Следуйте инструкции Electron по тестированию Widevine CDM.
Подробнее: Testing Widevine CDM .
Не стартует play() с своей кнопки
Что происходит. Пользователь нажимает вашу кнопку, вы вызываете API play(), но воспроизведение не начинается.
Почему. Браузер считает жест только если он попал в сам медиаэлемент / плеер — это политика автозапуска .
Что сделать. Нужно, чтобы пользователь нажал именно на плеер. Чтобы клик проходил сквозь ваши оверлеи, задайте им pointer-events: none.
Ошибка NotAllowedError
Что происходит. В консоли или ответе API появляется NotAllowedError с текстом вроде «The request is not allowed by the user agent …» или «The request is not triggered by a user activation».
Почему. Вызывается системное API браузера, которое требует действия пользователя или должно идти как прямой результат нажатия/касания.
Что сделать. Вызывайте метод сразу из обработчика клика/тапа пользователя, без отложенных цепочек вне user gesture.
Подробнее: User activation на MDN.
Не работает автозапуск в Electron
Что происходит. Автозапуск видео не срабатывает в Electron.
Почему. У Electron свои ограничения media autoplay, отличные от обычного браузера.
Что сделать. Проверьте политики автозапуска в настройках окна/webPreferences и известные обходные пути в обсуждениях ниже.
Подробнее: MMM-ISS-Live #1 , cordova-electron #102 .
Зависает страница с большим числом плееров
Что происходит. На странице много встроенных плееров, вкладка тормозит или зависает.
Почему. Каждый плеер держит ресурсы; без ленивой загрузки нагрузка растёт линейно.
Что сделать. Используйте приёмы из раздела Оптимизация .
Не работает fullscreen во вложенном iframe
Что происходит. Полноэкранный режим не включается, если плеер лежит во iframe внутри другого iframe.
Почему. Если родительский <iframe> заполнен не через src (target формы или содержимое записано напрямую), атрибут allow может работать некорректно.
Что сделать. У <iframe> плеера уберите allow и оставьте только allowfullscreen. На iOS см. также псевдо-полноэкранный режим
.
Не работает поворот экрана в PWA
Что происходит. В PWA в полноэкранном режиме плеера экран не поворачивается.
Почему. В manifest.json зафиксирована ориентация приложения.
Что сделать. Удалите из manifest.json свойство orientation. Затем слушайте смену полноэкранного режима и управляйте блокировкой поворота:
player.on(player.Events.FullscreenChange, (event) => {
if (event.data.isFullscreen) {
screen.orientation.unlock()
} else {
screen.orientation.lock('portrait')
}
})