- Video.js v10, được viết lại hoàn toàn sau 16 năm, đã giảm 88% kích thước bundle và tái sinh với cấu trúc phù hợp cho môi trường phát triển hiện đại
- Hỗ trợ React·TypeScript·Tailwind ở mức ưu tiên hàng đầu, đồng thời cung cấp UI mặc định đẹp mắt và cấu trúc tài liệu thân thiện với AI
- Với Streaming Processor Framework (SPF) mới, dự án hiện thực hóa engine streaming dạng mô-đun có thể kết hợp chỉ những tính năng cần thiết, đạt mức nhẹ chỉ bằng 12% so với HLS.js
- Nhờ kiến trúc dựa trên composition và hệ thống skin React/Web Components, có thể tự do thay thế hoặc loại bỏ UI và tính năng
- Mục tiêu là phát hành chính thức vào năm 2026, và dự án đang phát triển thành nền tảng media mã nguồn mở thế hệ mới thông qua phát triển cộng tác với AI và hệ sinh thái preset có khả năng mở rộng
Tổng quan bản beta Video.js v10
- Video.js v10.0.0 beta là bản viết lại toàn diện đầu tiên sau 16 năm, là kết quả hợp tác không chỉ của Video.js mà còn của nhiều dự án mã nguồn mở như Plyr, Vidstack, Media Chrome
- Hệ sinh thái với tổng cộng 75 nghìn sao GitHub và quy mô hàng tỷ lượt phát mỗi tháng đã tham gia, và cấu trúc mới được thiết kế lại để phù hợp với phương pháp phát triển hiện đại cùng môi trường phát triển có AI hỗ trợ
- Các mục tiêu chính là giảm 88% kích thước bundle, hỗ trợ React·TypeScript·Tailwind ở mức ưu tiên hàng đầu, cung cấp UI mặc định đẹp mắt và cấu trúc tài liệu thân thiện với AI
Cải thiện kích thước bundle và hiệu năng
- Trình phát Video.js v10 cơ bản có kích thước bundle mặc định giảm 88% so với v8; ngay cả khi bỏ tính năng ABR (Adaptive Bitrate) thì vẫn giảm 66%
- Ví dụ: v8 mặc định 260.5kB (minified) → v10 trình phát video HTML 97.4kB (minified), bản React là 62.0kB
- Với việc đưa vào Streaming Processor Framework (SPF) mới, có thể xây dựng engine streaming dạng mô-đun chỉ gồm những tính năng cần thiết
- Khi chỉ dùng HLS đơn giản, v10+SPF có kích thước file chỉ bằng 19% so với v8+VHS
- Bản thân SPF engine chỉ có 12% kích thước của HLS.js-light (38.5kB minified), được tối ưu cho xử lý ABR đơn giản
- SPF tương thích hoàn toàn với các engine hiện có như HLS.js, Shaka, dash.js; trong trường hợp không cần DRM hay quảng cáo phức tạp, có thể giảm kích thước xuống mức cực thấp
Kiến trúc dựa trên composition
- v10 có cấu trúc component tách riêng State, UI, Media, cho phép thay thế hoặc loại bỏ từng thành phần một cách độc lập
- Hàm
createPlayer() nhận mảng features để chỉ bao gồm những tính năng cần thiết
- Ví dụ: nếu không cần tính năng âm thanh, mã
volume, mute sẽ không được đưa vào bundle
- Nếu muốn loại bỏ UI, chỉ cần không nạp skin — có thể loại bỏ hoàn toàn mã không cần thiết
- Ví dụ React ở cấu hình tối thiểu hoạt động với dưới 5kB (gzipped), chỉ gồm nút phát/tạm dừng đơn giản
Tùy biến UI và hệ thống skin
- v10 cung cấp hệ thống skin dựa trên React và Web Components, đồng thời áp dụng cấu trúc unstyled UI primitives lấy cảm hứng từ Base UI, Radix
- Mỗi UI component xuất ra một phần tử HTML duy nhất để có thể kiểm soát trực tiếp
- Tay nắm timeline vốn được điều khiển bằng pseudo-element CSS ở v8 nay được cung cấp dưới dạng phần tử DOM thực trong v10, giúp việc style trở nên đơn giản hơn
- Bản beta bao gồm hai skin
- Skin mặc định: thẩm mỹ bán trong suốt (frosted), hoạt ảnh mượt mà
- Skin tối giản: nền tảng gọn nhẹ để tùy biến
- Thiết kế hộp thoại lỗi của skin cũng được thống nhất, giúp nâng cao độ hoàn thiện về mặt thị giác
Hệ thống preset
- v10 giới thiệu khái niệm preset theo mục đích sử dụng, cung cấp mẫu trình phát dùng ngay kết hợp skin, tính năng và cấu hình media
- Video preset: dành cho video web thông thường
- Audio preset: dành cho nội dung chỉ có âm thanh như podcast
- Background video preset: dành cho video nền, loại bỏ control và âm thanh
- Preset mang lại điểm khởi đầu nhanh nhưng vẫn cho phép thay thế toàn bộ thành phần, giữ được khả năng mở rộng hoàn toàn
- Trong tương lai dự kiến bổ sung preset cho giáo dục, short-form, nền tảng dành cho creator
Thiết kế thân thiện với AI
- v10 hướng tới cấu trúc để các AI agent có thể cùng tham gia phát triển
- Component không bị trừu tượng hóa quá mức và unstyled UI primitives giúp tăng khả năng hiểu mã
- Cung cấp tệp llms.txt để nâng cao hiệu quả duyệt tài liệu, bao gồm cả phiên bản theo từng framework
- Toàn bộ tài liệu được cung cấp dưới định dạng Markdown, giúp AI truy cập trực tiếp mà không cần ngữ cảnh HTML không cần thiết
- Trong kho lưu trữ sẽ hỗ trợ phát triển cho người dùng trong tương lai thông qua AI skill set
Hướng dẫn sử dụng bản beta
- API hiện vẫn chưa ổn định, một số interface có thể thay đổi trước khi phát hành chính thức
- Hiện tại dự án chủ yếu tập trung vào chức năng phát trên website cơ bản; hỗ trợ khả năng tiếp cận, phụ đề và nhiều định dạng khác nhau, nhưng menu cài đặt vẫn chưa được triển khai
- Đang tích cực thu thập phản hồi qua GitHub Issues và Discord
- Người dùng phiên bản hiện tại được khuyến nghị chuyển sang sau khi công bố migration guide
Lộ trình sắp tới
- Mục tiêu phát hành chính thức (GA) vào giữa năm 2026
- Dự kiến đạt mức tương đương về tính năng với Plyr, Vidstack, Media Chrome
- Hỗ trợ tính năng quảng cáo được lên kế hoạch cho nửa cuối năm 2026
- Dự kiến cung cấp migration guide và thêm preset mới
1 bình luận
Ý kiến trên Hacker News
Nói cho những ai đang thắc mắc thì theme màu syntax highlighting của website này là “gruvbox”
Cá nhân tôi rất thích nó, nhưng mất khá lâu mới tìm ra được
Liên kết GitHub của gruvbox
Tôi chưa từng dùng video.js, nhưng cảm giác như trang web hay phần quảng bá đang nhắm đến những người đã quen với nó rồi
Trong lúc đọc, điều tôi cứ thắc mắc là nó khác gì so với thẻ video HTML. Chỉ là phần điều khiển khác đi thôi sao?
Thẻ video hiện nay đã khá tốt, nhưng Video.js tạo khác biệt ở styling nhất quán giữa các trình duyệt, tính năng nâng cao (analytics, DRM, video 360 độ, v.v.), và hỗ trợ nhiều định dạng streaming (HLS, DASH, v.v.)
Nói cách khác, bạn vẫn có thể tự làm bằng thẻ video, nhưng làm đến một lúc nào đó thì rốt cuộc cũng đang tự xây thứ giống Video.js
Nếu cần một player ổn định hoặc chức năng streaming đáng tin cậy thì nên dùng Video.js
Tham khảo thêm, tôi từng làm trình phát TV broadcast cho quốc gia Georgia, hỗ trợ từ LG Smart TV năm 2009 cho đến các trình duyệt mới nhất
Điều này quan trọng vì điều chỉnh bitrate động. Việc caching cũng hiệu quả hơn
Tôi tò mò không biết tình hình của WebVTT dạo này đã khác chưa
Trước đây tôi từng muốn tùy biến phần render phụ đề nhưng quá khó
Tôi thắc mắc vì sao họ không phát hành cái này dưới dạng Web Component
Theo tôi đây có vẻ là trường hợp sử dụng hoàn hảo — có control tích hợp trong một đối tượng mang tính ngữ nghĩa
Cuối cùng phải giải quyết bằng cách tạo shim cho React, nhưng rồi nó lại sinh ra vấn đề khác
Ở VJS 10, họ tìm được điểm cân bằng với kiến trúc headless core + rendering layer
Nhờ vậy có thể hỗ trợ cả React component lẫn Web Component
Liên kết GitHub của media-chrome
Do bug của Shadow DOM hay vấn đề tương thích giữa các framework, cuối cùng bạn lại dành nhiều thời gian cho cấu hình môi trường hơn là cho chính player
Đa số người dùng không quan tâm mấy chuyện đó. Tôi nghĩ cứ thư viện JS + API gọn gàng là tốt hơn nhiều
Tuy vậy, lý do dùng React là vì tree-shaking giúp chỉ đưa vào những phần mã cần thiết
Trong HTML thông thường thì kiểu tối ưu này vẫn còn khó, nên pipeline build về cơ bản đóng vai trò như một trình tạo Web Component
Tôi đã thử chuyển audio player của mình từ Plyr sang Video.js, nhưng ở cấu hình mặc định vẫn có vài khoảng cách tính năng
Không có tốc độ phát dưới 1x, không chỉnh được âm lượng trên di động, không có nút tua, khó tùy biến màu sắc, thiếu demo, v.v.
Hiện mục tiêu là đạt feature parity với Plyr và các giải pháp tương tự, và nhắm tới mốc GA vào khoảng giữa năm nay
Tôi không rành về hosting video, nhưng đã từng dùng HTML5 video player
Tôi muốn biết có cần tự tạo endpoint phía server để phục vụ trực tiếp các video chunk hay không
Nếu chia video bằng ffmpeg thành từng phần 2MB, thì nên đặt chúng ở đâu? CDN? Máy chủ riêng?
Cấu hình nào là tốt nhất để Video.js chạy mượt nhất?
Khá hợp với Video.js, và trên TV LG cũng có thể phát dựa trên thẻ
Chỉ cần server hỗ trợ yêu cầu Range là trình duyệt sẽ tự xử lý
Tôi dùng tổ hợp object storage + CDN như DO Spaces và nó hoạt động rất ổn
Bạn cần xử lý encoding và phân đoạn cùng lúc (ví dụ: formatter dash của ffmpeg)
Để canh độ dài segment của audio và video cho khớp, GOP calculator rất hữu ích
Thông thường, người ta encode từ bản gốc chất lượng cao ra nhiều độ phân giải khác nhau, rồi tải lên nơi như S3 cùng với manifest HLS/DASH
Player chỉ cần một URL manifest là sẽ tự tìm mọi tài nguyên cần thiết
Bài blog được viết rất tốt
Tôi ấn tượng với cách giải thích tôn trọng độc giả như những chuyên gia. Mong là sẽ có thêm nhiều bài công bố sản phẩm kiểu này
Chúc mừng Steve!
Hồi trước khi làm ở JW Player, tôi đã rất ấn tượng với sự đơn giản và hệ thống theme của Video.js
Hy vọng phiên bản này cũng sẽ thành công lớn
Trước đây tôi rất thích những lần trò chuyện với đội JW ở FOMS và nhiều hội nghị khác
Mảng công nghệ video vẫn là một lĩnh vực rất nóng, nên hy vọng anh sẽ quay lại bất cứ lúc nào
Con số 88% thật đáng kinh ngạc
Tôi tò mò đâu là điểm cải thiện lớn nhất — chắc là hệ thống plugin
Tôi cũng muốn biết liệu trong quá trình rewrite có làm hỏng các tích hợp quan trọng hay không
Tôi muốn biết những thay đổi về kiến trúc trong quá trình rewrite, và các trade-off so với thiết kế Video.js trước đây là gì