HTML5 video trong Safari không làm việc

Question

Trong Java EE ứng dụng của chúng tôi, chúng tôi sử dụng HTML5 <video> thẻ để chơi MP4 video. Chúng tôi sử dụng JBoss 7 làm máy chủ ứng dụng. Video được truy lục thông qua hành động Struts2 như sau: www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx

nơi zbRdTKQKLWnA2ZiY61Gx là tên của video trên máy chủ.

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> 

... 

Nó hoạt động tốt trong Chrome và Firefox, nhưng không trong Safari trên Mac.

Trong Safari khi tôi mở trang chứa thẻ <video>, "Đang tải" được hiển thị nhưng không tải video.

Đây là điều thực sự kỳ lạ.

Nếu dán liên kết vào video trực tiếp trong trình duyệt, nó phát chính xác. Sau đó, nếu tôi tải lại trang bằng video đã nói, video sẽ phát tiền phạt.

Điều tương tự cũng xảy ra với tất cả video trong ứng dụng.

Điều gì đang xảy ra? Tại sao các video không phát lúc đầu?

---

cụ Dev trong Safari:

Khi tôi ban đầu tải trang tôi nhận được kết quả sau:

Tất cả các cảnh báo dành cho CSS.

Đối mở file trực tiếp trong trình duyệt cho lần đầu tiên tôi nhận được:

Các lỗi là "Không thể tải tài nguyên: tải xử lý bởi các mô-đun":

Khi tôi tải lại trang tôi nhận được cùng một phản hồi, nhưng bây giờ tôi có thể phát video:

Tôi nghĩ rằng sự cố xảy ra từ các tiêu đề dải ô. Trên thực tế tôi sử dụng cái này:

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); 

Answer 1

Safari có một vấn đề mà nếu nguồn video được yêu cầu không đặc biệt có phần mở rộng .mp4, ngay cả khi loại mime được thiết lập một cách chính xác.Tôi có thể tái tạo vấn đề của bạn - nếu tài nguyên video chỉ là một định danh chuỗi (không có .mp4), Safari sẽ hiển thị bản xem trước cho video nhưng nó sẽ không thực sự phát. Khi tài nguyên được đổi tên thành filename.mp4, Safari bắt đầu phát video như mong đợi. Chrome cũng hoạt động tốt.

Nếu bạn thay đổi lớp học namespace.action.GestionDocumentAction để khi tham số thứ hai kết thúc bằng .mp4 nó sẽ loại bỏ phần mở rộng để tìm nguồn tài nguyên cục bộ được đặt tên chính xác, nó sẽ có thể trả lại video có URL kết thúc bằng .mp4 mong đợi - www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx.mp4.