MP4 не работает на мобильных устройствах после изменения параметра источника - PullRequest
Новая
       149

MP4 не работает на мобильных устройствах после изменения параметра источника

0 голосов
/ 29 апреля 2020

У меня странная проблема.

На веб-сайте для моего клиента я показываю некоторые файлы mp4, используя элемент видео HTML5. Видео, которые отображаются на странице во время загрузки, отображаются на мобильных устройствах без проблем.

Когда я пытаюсь изменить источник видеоэлемента (после запроса AJAX), элемент видео показывает черный экран. Новый источник видео, который я изменил, может быть точно таким же, как тот, который уже был показан при загрузке страницы, но после обновления параметра sr c он просто не будет отображаться ..

Уже пытался проверить кодировку mp4 (то есть H.264), тип содержимого в заголовках ответа сервера является правильным (video / mp4), и сервер, похоже, возвращает «206 Частичное содержимое». Кроме того, кодировка gzip для файлов mp4 отключена.

Если я проверяю удаленный отладчик в Safari (проверка Safari на iPad), я получаю сообщение об ошибке «Произошла ошибка при загрузке ресурса». Ниже вы найдете заголовки ответов: 

HTTP/1.1 206 Partial Content
Content-Type: video/mp4
ETag: "23f72-5a4561b99803e"
Last-Modified: Tue, 28 Apr 2020 09:03:40 GMT
Content-Range: bytes 0-147313/147314
Accept-Ranges: bytes
Date: Wed, 29 Apr 2020 05:13:12 GMT
Content-Length: 147314
Keep-Alive: timeout=5, max=84
Connection: Keep-Alive
Server: Apache

Кто-нибудь есть идеи, что может быть причиной этой проблемы? Спасибо!

1 Ответ

1 голос
/ 29 апреля 2020

Документация для этого может быть немного запутанной - может показаться, что невозможно динамически изменить источник (https://html.spec.whatwg.org/multipage/embedded-content.html):

Динамическое изменение Исходный элемент и его атрибут, когда элемент уже вставлен в элемент видео или аудио, не будут иметь никакого эффекта. Чтобы изменить то, что воспроизводится, просто используйте атрибут sr c на медиа-элементе напрямую, возможно, используя метод canPlayType () для выбора среди доступных ресурсов. Как правило, манипулирование исходными элементами вручную после анализа документа является излишне сложным подходом.

Однако его можно изменить, и приведенный ниже фрагмент кода должен надежно работать в браузере - video.load () Строка является ключевой, поскольку она на самом деле гарантирует, что новый источник вставлен. Вы можете поэкспериментировать, закомментировав эту строку и увидев разницу: 

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4');

video.appendChild(source);
video.play();

function changeSource() {  
    video.pause();

    source.setAttribute('src', 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'); 

    video.load();  //This step is key
    video.play();
}
<h1>Video source change test</h1>
<p>
<button id="sourceButtom" onclick="changeSource()">Click me to change the video source.</button>
<p>
<video id="video" width="320" controls height="240"></video>

Приведенное выше основано на превосходном ответе: { ссылка }

...