Видео HTML5 в Safari не работает
В нашем Java EE приложении мы используем теги HTML5 <video> для воспроизведения видео MP4.
Мы используем JBoss 7 как сервер приложений. Видео извлекаются с помощью действия Struts2 следующим образом: www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx
где zbRdTKQKLWnA2ZiY61Gx - это имя видео на сервере.
struts.xml:
...
<action name="documents/*/*" class="namespace.action.GestionDocumentAction" method="obtain">
<param name="typeId">{1}</param>
<param name="identifiantDocument">{2}</param>
<result name="success" type="stream">
<param name="contentType">video/mp4</param>
<param name="inputName">flux</param>
<param name="allowCaching">true</param>
<param name="contentDisposition">inline;filename=${filename}</param>
</result>
</action>
...
Он работает отлично в Chrome и Firefox, но не в Safari на Mac.
В Safari, когда я открываю страницу, содержащую тег <video>, отображается "Загрузка", но она не загружает видео.
Приходит действительно странная вещь.
Если вы вставьте ссылку на видео прямо в браузере, он будет правильно играть .
Затем, если я перезагружаю страницу с указанным видео, он воспроизводит штраф.
То же самое происходит со всеми видео в приложении.
Что происходит? Почему видео сначала не воспроизводятся?
Инструменты Dev в Safari:
Когда я изначально загружает страницу, я получаю следующий результат:
![введите описание изображения здесь]()
Все предупреждения для CSS.
Для открытия файла непосредственно в браузере в первый раз я получаю:
![введите описание изображения здесь]()
Ошибка : "Не удалось загрузить ресурс: загрузка, обрабатываемая модулем":
![введите описание изображения здесь]()
Когда я перезагрузите страницу, я получаю тот же ответ, но теперь я могу воспроизвести видео:
![введите описание изображения здесь]()
Я думаю, проблема связана с заголовками диапазонов.
Фактически я использую этот:
this.getServletResponse().setHeader("Accept-Ranges", "bytes");
this.getServletResponse().setHeader("Content-Type", "video/mp4");
this.getServletResponse().setHeader("Content-Length", "383631"); // 383631 - just for exemple, I use a real size
this.getServletResponse().setHeader("Content-Range", "bytes 0-383630/383631"); // 0-383630/383631 - the same
this.getServletResponse().setStatus(206);
Ответы
Ответ 1
У Safari есть проблема: если запрашиваемый видеоресурс не имеет расширения .mp4, даже если задан тип mime. Я мог бы реплицировать вашу проблему - если видеоресурс был всего лишь строковым идентификатором (без .mp4), Safari отобразил предварительный просмотр видео, но на самом деле он не играл бы. Когда ресурс был переименован в filename.mp4, Safari начала воспроизводить видео, как ожидалось. Chrome работал отлично в любом случае.
Если вы измените свой класс namespace.action.GestionDocumentAction, чтобы при завершении второго параметра в .mp4 он удалил расширение, чтобы найти правильно названный локальный ресурс, он должен иметь возможность вернуть видео с завершающим URL. mp4, так как Safari ожидает - www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx.mp4.
