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:



Rồi khởi động lại là ok.

Bài viết này mình định viết lâu rồi, nhưng nay mới viết được. 😂

Cảm ơn các bạn đã luôn theo dõi blog nhé. 

Nodejs | Lỗi khi khởi tạo project Strapi và cách khắc phục

Hey! Mình là HQK. Như bao ngày đẹp trời khác, mình ngồi vào bàn với cái máy tính quen thuộc. Nhìn trời, nhìn mây, nhìn cây, nhìn lá, nhìn các thứ cần nhìn,....hahaha. Nay mình được giao tìm hiểu về thằng Strapi, uây, hào hứng vãi shit, xem demo thấy xịn xò đấy, chất lượng phết. Lên đọc docs, các thứ, xong xuôi, mình bắt tay vào build thử một cái demo như docs hướng dẫn.



Ok! và mình ngồi đợi, và đơi, vãi shits, build lâu éo chịu được, chắc lỗi rồi. Rồi mình thử những cách khác, ôi vãi khá đau đầu khi nó đều bị như thế.

Mình định chụp ảnh cho các bạn xem lỗi ntn, nhưng mà mình fix rồi, lười không muốn xóa, haha các bạn thông cảm nhé.
Triệu chứng khi là nó đã tạo được project cho mình rồi, nhưng khi cài các thư viện bên ngoài vào nó bị lỗi, nên nó cứ quay mãi một hồi lâu.
- Bắt đầu fix thôi, mình bắt đầu thử vài keyword search gg xem, uây thằng này tài liệu ít vãi. Mò mẫm đọc và đọc, rồi mình fix, éo được, vừa cay vừa cáu. Mình đã đọc đến trang thứ 6 của gg và bắt đầu chán, bất lực. Chẳng nhẽ lại phải cài lại win với cái bug này, hay sang ubuntu code... suy nghĩ này bắt đầu nảy sinh trong đầu mình. Rồi mình quyết định là éo. Mình bắt đầu đọc xem cmd nó báo lỗi gì. Ồ! Một lúc lâu cmd nó trả về hàng dài những cảnh báo, trong đó có Error while installing dependencies. Sống rồi! chắc là do cài thư viện nó ko nhận được, rồi mình nghĩ vào cài lại cho nó xem sao.


Rồi mình chạy lại, fu*k, vẫn báo lỗi thư viện, nhưng lần này nó báo lỗi thư viện cụ thể hơn là do thằng sqlite3. Mình tiếp tục cài lại. Strapi mà tốn thời gian của mình vậy ư, cáu. Khi cài xong. Mình chạy yarn start. Wtf chạy được rồi, nhưng nó báo not found.



Không sao, mình quên chưa build lại. Npm run build. Tốt đã chạy xong, vui vãi, .....

Nói chung mình đã làm như sau để fix:
1. npm i
2. npm run build
3. npm run develop
Ok. Chúc các bạn không bị như mình, haha, mà có bị thì có thể làm theo mình, chúc các bạn success.
Đây là trang web của mình:
https://khanhkitin.herokuapp.com