HN giới thiệu: Winamp và các trình phát media khác được tái dựng cho web bằng Web Components

 (player.style)
3 điểm bởi GN⁺ 2024-10-09 | 1 bình luận | Chia sẻ qua WhatsApp

Phong cách trình phát

  • Giới thiệu

    • player.style là bộ sưu tập các giao diện trình phát video và âm thanh do MuxThemes cung cấp, mang đến các theme phù hợp cho mọi trình phát web và framework ứng dụng web.
    • Người dùng có thể chọn theme trình phát mình thích, chọn trình phát và framework ứng dụng, rồi tùy biến chi tiết giao diện người dùng của trình phát bằng HTML và CSS.

  • Bộ lọc theme

    • Có thể lọc nhiều theme khác nhau theo media, video, audio và framework (HTML, React, Next.js, Vue, Svelte).

  • Tính năng chính

    • Cung cấp các tính năng như thumbnail trên timeline, chapter, tooltip, thiết lập màu theme (chính, phụ, nhấn mạnh), tốc độ phát, chất lượng, phụ đề/CC, v.v.

  • Ví dụ về theme

    • Sutro: Theme tinh tế và hiện đại lấy cảm hứng từ ăng-ten TV phong cách sci-fi.
    • Instaplay: Theme ưu tiên di động lấy cảm hứng từ trải nghiệm phát trên các ứng dụng mạng xã hội phổ biến.
    • Notflix: Một theme thiếu mỗi chữ N đỏ to và chuyến xe buýt dài tới Los Gatos.
    • Reelplay: Trình phát media hoài cổ lấy cảm hứng từ các trình phát media thời xưa.
    • Vimeonova: Diễn giải mới mẻ về thiết kế trình phát Vimeo cổ điển.
    • YTV: Sự tri ân dành cho trình phát YouTube hiện đại và phổ biến.
    • Tailwind Audio: Theme trình phát âm thanh gọn gàng, tối giản được xây dựng bằng Tailwind CSS.
    • Demuxed 2022: Theme trình phát media được tạo cho Demuxed 2022.
    • Microvideo: Theme tối ưu cho nội dung ngắn, không cần các điều khiển phát mạnh mẽ vốn cần cho nội dung dài.
    • Minimal: Theme đơn giản hóa trải nghiệm Mux Player với mức điều khiển tối thiểu.
    • Winamp: Theme retro lấy cảm hứng từ trình phát media Winamp cổ điển.

Tóm tắt của GN⁺

  • player.style là tài nguyên hữu ích có thể cải thiện trải nghiệm người dùng bằng cách cung cấp các theme phù hợp với nhiều trình phát web và framework ứng dụng khác nhau.
  • Mỗi theme được xây dựng dựa trên một nguồn cảm hứng hoặc triết lý thiết kế riêng, có thể đáp ứng nhiều sở thích người dùng khác nhau.
  • Các theme này có thể được tùy biến dễ dàng bằng HTML và CSS, mang lại sự linh hoạt cho nhà phát triển.
  • Các dự án khác có tính năng tương tự gồm Video.js và Plyr, cũng cung cấp nhiều tùy chọn tùy biến.

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-10-09
Ý kiến Hacker News

  • Cảm ơn ý tưởng được phát hành theo giấy phép MIT, và đang sử dụng web components để phát triển ứng dụng media. Trước đây đã chuyển sang JavaScript, nhưng hiện tại web components đang hoạt động tốt

    • Thích các nguyên tắc thiết kế và ghi chú kiến trúc của Media Chrome, đồng thời có lo ngại về khả năng mở rộng và kích thước tệp
    • Chỉ ra rằng kho lưu trữ media-elements không có tệp giấy phép, và cần một tệp LICENSE rõ ràng
    • Muốn sử dụng thư viện Media Chrome, và dự định áp dụng ý tưởng bọc component của mình bằng phần tử media controller

  • Có câu hỏi về việc triển khai một player hỗ trợ scrub nhanh và mượt cùng âm thanh như Adobe Premiere

    • Phỏng đoán rằng sẽ cần track âm thanh mono 16khz và sprite 1fps hoặc định dạng video 240p

  • Cho rằng khi phát triển ứng dụng thì thiết lập user-select: none; nên là bắt buộc

    • Đề cập rằng một thanh theme cụ thể có thể bị chọn, và cảm ơn về công sức đã bỏ ra

  • Đánh giá chiến lược marketing của Mux là rất xuất sắc

    • Mua lại hoặc tạo mới các dự án mã nguồn mở để các lập trình viên làm quen với Mux
    • Nhắc đến các ví dụ như React Player

  • Đánh giá Player.style là rất tuyệt, và nhắc rằng ở startup trước đây đã từng định tự làm theme cho video.js nhưng cuối cùng lại dùng mặc định

    • Cảm ơn vì đã chia sẻ

  • Chỉ ra vấn đề liên quan đến focus của video và đưa ra góp ý mang tính xây dựng

    • Khi bấm vào video thì có thể scrub bằng phím mũi tên trái/phải, nhưng khi bấm vào scrubber thì không hoạt động
    • Khi bấm vào khoảng trống thì toàn bộ control đều không hoạt động

  • Cảm ơn vì tác phẩm đẹp mắt này và chúc mừng vì đã phát hành dưới dạng FOSS

  • Đánh giá rằng Mux đang tận dụng web components rất tốt

  • Đề xuất thêm kiểu hiển thị không che video, đồng thời đánh giá bản thân dự án là rất tuyệt

  • Thích dự án này và đề nghị thêm track phụ đề

    • Hiện chưa có tài liệu, và vì Media Chrome dùng cú pháp khác nên việc thêm vào khá khó