How to fix mp4 video not working on Safari.

Chào mọi người! Lâu lâu lại lên blog viết bài cho mọi người đỡ quên mình, haha. Sản phẩm production gặp lỗi thì sao nhỉ? Bay cả tỷ đồng chứ sao 😂.

Khi sản phẩm lỗi, khách đâu cần quan tâm là lỗi gì, lỗi như thế nào, lỗi ra sao, ping ngay đội dev, abc...xyz, ae đội dev bắt đầu nháo nhào tìm nguyên nhân, fix bug gấp. Thể nào một số ae cũng gặp phải rồi nhỉ! Mình thì cũng gặp rồi thây, hehe.

Chẳng là một ngày đẹp trời, khách hàng ping! wtf tại sao trên safari, trên iphone, ipad, video không chạy. Quả này lỗi rồi ( bài viết ra đời từ đây).

Ok bắt đầu xử lý, lỗi ko chạy video, lạ vc nhỉ, Chrome, Firefox video vẫn chạy phà phà mà nhỉ! Mẹ thằng safari nữa chứ, haha. Trong đầu bắt đầu nghĩ, tầm này vẫn dùng safari nhỉ ! à thì khách tất nhiên nó phải giàu, mà giàu thì dùng macbook mà macbook thì lại có thằng safari, khá acay. Mà thôi acay safari thì sản phẩm cũng có chạy đâu, haha. Lúc đầu mình thấy cũng khá bình thường với nghĩ chắc thẻ video trên safari nó không tương thích thôi.

- Đầu tiên mình bật chế độ cho thằng safari có thể phát được video, sau đó thêm playInline vào thẻ video, đúng theo lý thuyết thì nó phải chạy mà ta, nhưng không nó éo chạy. Thôi thì ko dùng thẻ video nữa, dùng thư viện video của thằng reactjs xem sao, cũng không chạy, cay. Bắt đầu suy nghĩ, tại sao các trình duyệt khác chạy mà safari lại không, tại sao nhỉ, hay thằng video mp4 không hỗ trợ trên safari, không hỗ trợ thì dở thật, nên mình quyết định dùng một video mp4 test xem safari chạy không, vc thật nó chạy được, chứng tỏ safari, mp4 có chạy được.

- Điều này chứng tỏ vấn đề sẽ có cách giải quyết không lại vỡ mồm.

- Bắt đầu căng đây, tìm nguyên nhân gốc dễ vậy. Đầu tiên các attribute của thẻ video mình hoạt động ok rồi, nên bỏ qua, vấn đề được đặt vào trình duyệt.

- Sau một hồi search thì mình cũng biết vấn đề do đâu, thì ra thằng safari không như thằng chrome, firefox, safari nó yêu cầu server hỗ trợ header: "ranger" để phát nội dung video, server cần trả về 206.

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6

Vậy vấn đề nằm ở đây, mình cần phải config server, trả về đúng như thằng safari mong muốn.

Nếu server tự phát triển lên thì vào config lại là xong, nhưng dự án mình làm thì dùng một thằng thứ ba là strapi ( lại buốt óc rồi, hazzz ).

Hình như thằng strapi trả về 200 thì phải, thôi thì cứ test theo apple xem video nó trả về tất cả hay từng phần.

curl --range 0-99 http://example.com/test.mov -o /dev/null

Ok. Mình test thì nó trả về một cục. Quả này đành custom lại thư viện thôi, vào đọc issues của strapi mình thấy vấn đề của mình, làm theo thôi.

À tóm lại cái đã:

- Vấn đề: Do thằng safari yêu cầu hỗ trợ header: 'ranger' nên không thể phát, tua lại, tìm kiếm, chuyển tiếp trên các video được phát trực tuyến được lưu trữ bởi strapi.

- Giải quyết: Bạn có thể add thêm header khi config nginx hoặc config lại server khi trả về video thì thêm header: ranger (Accept-Ranges, Content-Range).

Do mình dùng thằng strapi nên mình sẽ fix như sau:

vào node_modules/strapi/ thêm node_modole koa-range, koa-route sau đó sửa lại một chút ở file

/node_modules/lib/Strapi.js như sau: