В нашем 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);