Мобильное видео не работает без элементов управления

Question

Видеоплеер не будет отображаться на моем мобильном устройстве (Chrome, Android P, OnePlus 6) , в то время как он отображается на другом, почти идентичном (Chrome, Android P, OnePlus 5T ) устройство. Устройства iOs также показывают плеер.

<video muted autoplay>

           <source src="video/doc.webm" type="video/webm">
           <source src="video/doc.mp4" type="video/mp4">

</video>

Видео тег виден в инспекторе. Если я добавлю элементы управления, они станут видны на моем устройстве.

<video muted autoplay controls>

       <source src="video/doc.webm" type="video/webm">
       <source src="video/doc.mp4" type="video/mp4">

</video>

Почему видео невидимо на некоторых устройствах, даже если они почти идентичны?

Я предпочитаю держать элементы управления невидимыми.

Answer 1

«Почему видео невидимо на некоторых устройствах, даже если они практически идентичны?»

Не знаю, но это очень часто. Время от времени это разочаровывает, но для нас, разработчиков, это безопасность работы ?

---

Решение

Попробуйте добавить элементы управления (или удалить элементы управления), когда одно из событий загрузки срабатывает, вот события в следующем порядке:

1. loadstart
2. durationchange
3. loadedmetadata
4. loadeddata
5. progress
6. canplay
7. canplaythrough

Проверяйте каждый по одному, пока не добьетесь успеха или, если вы этого не сделаете, вы можете отредактировать свой вопрос с помощью дополнительных действий, которые вы предприняли. Приведенная ниже демонстрация добавляет прослушиватель событий к одному видео, а затем, будучи вызванным событием loadstart, добавляет элементы управления к тегу видео (или удаляет элементы управления, см. Комментарии в демонстрации).

---

Демо

document.querySelector('video').addEventListener('loadstart', function(e) {
  e.target.controls = true;
  // This is an alternate
  // e.target.setAttribute('controls', true);
  /* To remove controls */
  // e.target.controls = false;
  // or
  // e.target.removeAttribute('controls');
});

<video muted autoplay>
  <source src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>

Answer 2

Попробуйте использовать playsinline

<video muted autoplay playsinline>

       <source src="video/doc.webm" type="video/webm">
       <source src="video/doc.mp4" type="video/mp4">

</video>