Show HN: Winamp dan pemutar media lain yang dibangun ulang untuk web dengan Web Components

 (player.style)
3 poin oleh GN⁺ 2024-10-09 | 1 komentar | Bagikan ke WhatsApp

Gaya player

  • Pengantar

    • player.style adalah kumpulan tema pemutar video dan audio dari MuxThemes, yang menyediakan tema yang cocok untuk semua pemutar web dan framework aplikasi web.
    • Pengguna dapat memilih tema pemutar yang disukai, lalu memilih pemutar dan framework aplikasi, kemudian menyesuaikan detail UI pemutar menggunakan HTML dan CSS.

  • Filter tema

    • Berbagai tema dapat difilter berdasarkan media, video, audio, dan framework (HTML, React, Next.js, Vue, Svelte).

  • Fitur utama

    • Menyediakan fitur seperti thumbnail timeline, chapter, tooltip, pengaturan warna tema (utama, sekunder, aksen), kecepatan pemutaran, kualitas, serta subtitle/CC.

  • Contoh tema

    • Sutro: tema ramping dan modern yang terinspirasi dari antena TV sci-fi.
    • Instaplay: tema mobile-first yang terinspirasi dari pengalaman pemutaran di aplikasi media sosial populer.
    • Notflix: tema tanpa huruf N merah besar dan bus panjang menuju Los Gatos.
    • Reelplay: pemutar media bernuansa nostalgia yang terinspirasi dari pemutar media masa lalu.
    • Vimeonova: interpretasi segar dari desain klasik pemutar Vimeo.
    • YTV: penghormatan untuk pemutar YouTube yang modern dan universal.
    • Tailwind Audio: tema pemutar audio yang bersih dan minimalis, dibuat dengan Tailwind CSS.
    • Demuxed 2022: tema pemutar media yang dibuat untuk Demuxed 2022.
    • Microvideo: tema yang dioptimalkan untuk konten pendek, tanpa memerlukan kontrol pemutaran kuat yang dibutuhkan konten panjang.
    • Minimal: tema yang menyederhanakan pengalaman Mux Player dengan kontrol seminimal mungkin.
    • Winamp: tema retro yang terinspirasi dari pemutar media klasik Winamp.

Ringkasan GN⁺

  • player.style adalah sumber daya berguna yang dapat meningkatkan pengalaman pengguna dengan menyediakan tema yang cocok untuk berbagai pemutar web dan framework aplikasi.
  • Setiap tema dibuat berdasarkan inspirasi atau filosofi desain tertentu, sehingga dapat memenuhi beragam selera pengguna.
  • Tema-tema ini dapat dengan mudah dikustomisasi dengan HTML dan CSS, memberikan fleksibilitas bagi developer.
  • Proyek lain dengan fungsi serupa antara lain Video.js dan Plyr, yang juga menyediakan berbagai opsi kustomisasi.

Bacaan terkait

1 komentar

 
GN⁺ 2024-10-09
Komentar Hacker News

  • Berterima kasih atas ide yang dirilis di bawah lisensi MIT, dan sedang menggunakan web components untuk mengembangkan aplikasi media. Sebelumnya sempat beralih ke JavaScript, tetapi saat ini web components bekerja dengan baik.

    • Menyukai prinsip desain dan catatan arsitektur Media Chrome, tetapi memiliki kekhawatiran soal skalabilitas dan ukuran berkas.
    • Menunjukkan bahwa repositori media-elements tidak memiliki berkas lisensi, dan diperlukan berkas LICENSE yang eksplisit.
    • Ingin menggunakan pustaka Media Chrome, dan berencana mengadopsi ide membungkus komponen miliknya sendiri dengan elemen media controller.

  • Ada pertanyaan tentang implementasi player yang mendukung scrubbing cepat dan mulus beserta audio seperti Adobe Premiere.

    • Menduga akan dibutuhkan track audio mono 16khz dan sprite 1fps atau format video 240p.

  • Berpendapat bahwa saat mengembangkan aplikasi, pengaturan user-select: none; harus dijadikan keharusan.

    • Menyebut bahwa bilah tema tertentu bisa dipilih, dan berterima kasih atas karyanya.

  • Menilai strategi pemasaran Mux sangat bagus.

    • Mengakuisisi proyek open source atau membuat yang baru agar para developer mengenal Mux.
    • Menyebut contoh seperti React Player.

  • Menilai Player.style sangat bagus, dan menyebut bahwa di startup sebelumnya mereka sempat mencoba membuat tema video.js sendiri tetapi akhirnya menggunakan default.

    • Berterima kasih telah membagikannya.

  • Menunjukkan masalah terkait fokus video dan memberikan kritik yang konstruktif.

    • Saat video diklik, scrubbing bisa dilakukan dengan tombol panah kiri dan kanan, tetapi saat scrubber diklik hal itu tidak berfungsi.
    • Saat area kosong diklik, semua kontrol tidak berfungsi.

  • Berterima kasih atas karya yang indah dan mengucapkan selamat karena merilisnya sebagai FOSS.

  • Menilai Mux memanfaatkan web components dengan baik.

  • Menyarankan penambahan gaya agar tidak menutupi video, dan menilai proyeknya sendiri sangat bagus.

  • Menyukai proyek ini dan meminta penambahan track subtitle.

    • Saat ini belum ada dokumentasi dan Media Chrome menggunakan sintaks yang berbeda sehingga sulit untuk menambahkannya.