Видео иногда не устанавливает атрибут src на iPhone ⇐ IOS

[Anonymous]

Я создаю веб-сайт с главным разделом видео. Он отлично работает на всех устройствах, которые я тестировал, за исключением iPhone. Проблема в том, что, насколько я могу судить, видео иногда просто не устанавливает значение src из своих дочерних исходных тегов. Вот мой код:

Код: Выделить всё

const video = document.querySelector(".homepage-video")
video.addEventListener("loadstart", () =>
console.log("Video load started."),
)
video.addEventListener("error", () =>
console.error("Video load error:", video.error),
)
video.addEventListener("play", () => console.log("Video is playing."))
video.addEventListener("canplay", () => console.log("Video can play."))
video.addEventListener("stalled", () =>
console.warn("Video loading stalled."),
)
video.addEventListener("loadedmetadata", () =>
console.log("Video metadata loaded."),
)
video.addEventListener("loadeddata", () =>
console.log("First frame loaded"),
)
video.addEventListener("durationchange", () =>
console.log("Duration updated"),
)
video.addEventListener("progress", () =>
console.log("Video loading is progressing"),
)






Your browser does not support the video tag.

Я добавил несколько прослушивателей событий, чтобы облегчить отладку, и вот что я увидел.

• На некоторых iPhone он работает почти всегда. Может быть, 95%. На других он вообще почти не работает, может быть, 5%.
• Он работает отлично, 100% на Android и ПК.
• Тег скрипта был добавлено, когда я пытался отладить проблему, и прослушиватели событий останавливаются на этапе «loadstart», когда видео не отображается. На этом этапе $0.currentSrc отображает пустую строку, а $0.networkState отображает 3 - т.е. NETWORK_NO_SOURCE.

Кто-нибудь когда-нибудь сталкивался с чем-то подобным?
Пытался установить тег видео способом, определенным в документации, и ожидал, что он будет отображаться правильно. Вместо этого он отлично отображался на ПК и Android, но не на iPhone.
РЕДАКТИРОВАТЬ: Я не верю, что ни один из ответов, на которые ссылается первый комментатор, дает ответ, поскольку поведение, с которым я столкнулся настолько противоречиво. Кроме того, вещи из комментариев, которые я пробовал, которые не работают:

• Playsinline, цикл и отключение звука уже установлены и не имеют никакого отношения к воспроизводится это видео или нет
• Перемещение видео в другое место не может быть проблемой - если я установлю src непосредственно в видео тег, он работает нормально
• проблема связана не с Safari, а с iPhone. Это также происходит в Chrome.
• Установка автоматической предварительной загрузки не имеет никакого значения
  
  Несогласованность означает, что сервер, не поддерживающий запросы диапазона байтов, исключен.
• Видео защищены системой входа на основе сеанса исключено из-за несогласованности и потому, что размещение src непосредственно в тег видео обеспечивает стабильную работу видео
• Мне не очень нравится решение об обслуживании .mov и установке типа mime на mp4, это кажется немного хакерским. Мне нужно знать, что является причиной этого.
• Handbrake теперь поддерживает mp4, это, должно быть, старый комментарий
• Размещение mp4 над веб-страницей не должно иметь никакого значения. Насколько я понимаю, как браузер взаимодействует с исходными тегами, он начинается сверху и работает вниз. Если файл несовместим или медиа-запрос не соответствует, он переходит к следующему исходному тегу. Учитывая структуру моих исходных тегов, если браузеру требуется mp4 шириной менее 575, исходные теги должны его обслуживать.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -on-iphone