HN Dibuka: Winamp dan pemutar media lain yang direka ulang untuk web dengan Web Components

 (player.style)
3 poin oleh GN⁺ 2024-10-09 | 1 komentar | Bagikan ke WhatsApp
  • player.style adalah kumpulan tema pemutar video dan audio berbasis Media Chrome yang dapat diterapkan dengan cara yang sama di berbagai pemutar web dan framework aplikasi
  • Setelah memilih tema pemutar yang diinginkan lalu memilih pemutar dan framework, alurnya berlanjut ke kode yang bisa langsung disalin-tempel
  • Tema dapat dipersempit berdasarkan Video/Audio, HTML, React, Next.js, Vue, Svelte serta kondisi seperti timeline thumbnails, AirPlay, Google Cast, chapter, dan tooltip
  • UI pemutar dapat disesuaikan hanya dengan HTML dan CSS, dan juga menyediakan pengaturan warna tema seperti Primary, Secondary, dan Accent
  • Pengalaman pemutar media yang sudah ada seperti Sutro, Instaplay, Notflix, YT, Minimal, dan Winamp direka ulang menjadi tema web agar bisa diterapkan dengan cepat

Cara menggunakan dan mengustomisasi player.style

  • player.style menyediakan tema pemutar video dan audio yang dibuat dengan Media Chrome
  • Cakupan sasarannya adalah “every web player” dan “every web app framework”
  • Alur penerapannya terdiri dari 3 langkah sederhana
    • Pilih tema pemutar yang disukai
    • Pilih pemutar dan framework aplikasi yang akan digunakan
    • Salin-tempel kode yang dihasilkan
  • UI pemutar dapat disesuaikan secara detail hanya dengan HTML dan CSS
  • Opsi filter dan pengaturannya mencakup hal-hal berikut
    • Media: Video, Audio
    • Framework: HTML, React, Next.js, Vue, Svelte
    • Fitur: timeline thumbnails, AirPlay, Google Cast, chapters, tooltips
    • Warna: Primary, Secondary, Accent

Galeri tema pemutar web

  • Sutro: tema modern dan elegan yang namanya diambil dari antena TV di SF
  • X-mas: tema Natal dengan nuansa merah-hijau, lampu berkelap-kelip, dan suasana akhir tahun
  • Halloween: tema yang menambahkan nuansa Halloween ke pemutar video
  • Instaplay: tema mobile-first yang terinspirasi dari pengalaman pemutaran aplikasi media sosial populer
  • Sutro Audio: tema audio dengan deskripsi yang sama seperti Sutro
  • Notflix: tema yang mengisyaratkan pengalaman tanpa “huruf N merah besar” dan bus panjang menuju Los Gatos
  • Reelplay: tema pemutar media retro yang terinspirasi dari pemutar media masa lalu
  • Vimeonova: tema yang menafsirkan ulang desain klasik pemutar Vimeo
  • YT: penghormatan pada pemutar YouTube modern yang banyak digunakan, direka ulang sedekat mungkin dengan Web Components
  • Tailwind Audio: tema pemutar audio minimalis yang dibuat dengan Tailwind CSS
  • Demuxed 2022: tema pemutar media yang dibuat untuk Demuxed 2022
  • Microvideo: tema yang cocok untuk konten pendek yang tidak memerlukan kontrol pemutaran kuat seperti pada konten panjang
  • Minimal: tema sederhana yang merampingkan pengalaman Mux Player menjadi kontrol dasar yang dibutuhkan penonton
  • Winamp: tema retro yang terinspirasi dari pemutar media klasik Winamp

Bacaan terkait

1 komentar

 
GN⁺ 2024-10-09
Komentar Hacker News

  • Kalau yang dibutuhkan hanya musik, bukan video, https://webamp.org/ juga layak dilihat
    Tidak perlu “mengompilasi” atau “mengintegrasikan” secara muluk-muluk; cukup disertakan saja, lalu playlist dibuat oleh aplikasi. Contoh: Music

    • Implementasinya benar-benar bagus. Sepertinya dukungan video juga bisa ditambahkan dengan mudah jika mau, dan secara internal kemungkinan hanya memakai elemen media

  • Saya suka ide ini dan terima kasih sudah merilisnya dengan lisensi MIT
    Kebetulan saya sedang membuat aplikasi media, tepatnya editor video, dan dulu juga pernah membuat beberapa video player dengan Flash dan HTML/JS. Sekitar 2015 saya pernah mencoba web component di salah satu player, tetapi terus-menerus terasa menyakitkan, jadi akhirnya kembali ke JavaScript biasa. Anehnya, di aplikasi media saya sekarang saya memakai web component seperti timeline editor video, dan sejauh ini berjalan cukup baik. Saya tidak begitu tahu apa yang berubah, atau apakah berkat perkembangan web yang lambat kompatibilitasnya akhirnya sudah cukup meningkat
    Saya sudah menelusuri dokumentasi Media Chrome dan sekilas melihat repositori GitHub-nya, dan saya menyukai prinsip desain serta catatan arsitekturnya. Saat mengadopsi hal seperti ini, terutama sebagai orang yang sudah beberapa kali membuat sendiri benda seperti ini, kekhawatiran terbesar saya adalah ekstensibilitas dan ukuran file. Misalnya, saya penasaran seberapa sulit menyesuaikan komponen timeline saya dengan paradigma MediaController. Jika semuanya dibuat sendiri, keuntungannya adalah hanya ada hal yang dibutuhkan dan tidak lebih. Media Chrome pasti punya banyak fitur yang tidak akan pernah saya pakai, jadi pertanyaannya adalah seberapa banyak beban yang tidak perlu yang harus ikut saya tanggung karena itu. Bukan hanya komponen yang tidak dipakai, tetapi juga fitur yang tidak dipakai di dalam komponen yang dipakai. Kadang fitur bawaan yang tidak perlu juga menghalangi ekstensibilitas pada level yang lebih rendah
    Selain itu, repositori media-elements [1] tidak memiliki file lisensi. Di package.json disebutkan bahwa elemen-elemennya juga MIT, tetapi file LICENSE yang eksplisit selalu lebih baik
    Meski begitu, ini library yang cukup menarik. Setidaknya sejauh ini halaman yang menyertakannya yang merangkai elemen-elemen tersebut, dan karena saya memang sedang menginginkan abstraksi yang lebih baik, sepertinya saya akan mencuri ide membungkus komponen-komponen saya dengan elemen seperti media-controller

    1. https://github.com/muxinc/media-elements
    • Sekitar 2015, sepertinya saya cukup optimistis dan keras kepala soal web component. Saya benar-benar berharap itu berhasil, tetapi baru sekitar 2020 saya benar-benar memasukkannya ke produksi
      Di antaranya ada spesifikasi web component v2, tetapi saya bukan ahli soal apa saja yang berubah. Sekarang kita mulai melihat web component di mana-mana, terutama di media player. Contohnya web player Apple
      Senang mendengar Anda menyukai arsitektur controller. Versi awalnya memakai pendekatan semua elemen langsung menunjuk ke elemen media, dan setelah controller masuk, semuanya jadi jauh lebih rapi. Setidaknya dibanding cara yang dulu saya pakai, saya sangat merekomendasikannya
      UI editor video menurut saya adalah perluasan alami dari keluarga Media Chrome. Akan bagus jika Anda meninggalkan issue di repositori tentang apa yang akan lebih membantu untuk sisi itu
      Saya sangat memahami rasa ragu mengadopsi sesuatu seperti Media Chrome karena fleksibilitas masa depan dan ukuran. Kalau saya, ada 3 poin yang bisa meyakinkan. 1) Anda bisa hanya menyertakan komponen UI yang diperlukan, dan ini perbedaan besar dari sisi ukuran dibanding video player web lain. 2) Para pengembang player paling berpengalaman sedang mengerjakannya, termasuk aspek seperti aksesibilitas dan internasionalisasi ke depannya. 3) Kami berusaha membuatnya sangat bisa dikonfigurasi lewat kombinasi slot, CSS parts, dan variabel CSS
      Tentu tidak akan bisa mengalahkan ukuran file perangkat lunak yang sepenuhnya kustom, tetapi setelah semua fitur dasar lengkap, saya rasa jaraknya bisa cukup dekat. Terima kasih sudah memberi tahu soal lisensi elements

  • Strategi pemasaran Mux itu cerdas
    Mereka mengakuisisi atau membuat proyek open source agar developer yang mencari paket video pada akhirnya mengenal nama perusahaan mereka
    Contoh lain yang baru-baru ini saya lihat adalah https://github.com/cookpete/react-player

    • Terima kasih. Menyebutnya “cerdas” mungkin agak berlebihan. Sebagian besar lebih karena kami melihat bagaimana developer memakai video dan mencoba menyelesaikan masalah di area itu. Next-video.dev juga salah satu contoh yang kami banggakan
      Sebagian fenomena yang terlihat di ranah player open source terjadi karena bagaimanapun juga kami perlu mendukung proyek-proyek seperti itu. Karena kami tidak terikat pada player tertentu, pelanggan kami memakai berbagai proyek open source, termasuk yang pemeliharaannya tidak terlalu aktif
      Saat ini sangat sedikit perusahaan video yang berfokus pada developer yang aktif berkontribusi ke open source, jadi saya rasa kami diuntungkan oleh itu

  • Mux terlihat bagus, tetapi saya tidak percaya perusahaan itu akan terus mempertahankan tier encoding video gratis, jadi rasanya saya tidak akan membangun sesuatu di atasnya
    Encoding on-demand untuk pengguna juga terasa agak tidak masuk akal dari sisi sumber daya. Model starter strukturnya membeli kredit senilai 100 dolar dengan 10 dolar. Semuanya terlihat seperti loss leader besar, dan makin sulit memercayai perusahaan yang tampaknya membakar uang setiap hari. Saya justru lebih suka kalau mereka mengenakan biaya, setidaknya sesuatu. Saya tahu encoding itu tidak gratis. Atau kalau di situs ada bagian yang menjelaskan bagaimana mereka bisa tetap berbisnis sambil memasang harga lebih rendah daripada semua pemain di industri, itu bisa cukup mengurangi kecurigaan. Sudah terlalu sering saya kena getah SaaS

    • Untuk menjawab ini mungkin bisa ditulis satu buku penuh
      “Bagian yang menjelaskan bagaimana mereka bisa tetap berbisnis sambil memasang harga lebih rendah daripada semua pemain di industri” adalah masukan yang sangat bagus, dan akan saya masukkan ke daftar tugas. Itu memang harus ada
      Kami tidak akan menawarkan harga dengan keekonomian yang tidak sanggup kami tanggung, dan setidaknya harus ada jalur yang jelas untuk menanggungnya. Semua harga berdasarkan volume dipublikasikan, jadi kalau Anda memahami konsep seperti kredit, semestinya Anda tidak akan mengalami perubahan harga di balik umpan. Ini kebalikan dari sebagian pesaing yang mengejutkan pengguna dengan harga baru ketika skalanya membesar. Saya sangat tidak suka cara seperti itu
      Secara internal, kami punya keunggulan karena menggunakan just-in-time encoding dan optimisasi tingkat lanjut lainnya. Ada juga economies of scale, dan kami berencana menulis artikel terkait itu
      Namun persepsi pelanggan memang sulit. Sebagian pelanggan memahami encoding dan biayanya, serta manfaat seperti adaptive streaming atau penanganan unggahan buatan pengguna. Banyak developer baru mengenal video dan mengira biayanya akan sama seperti mengunggah MP4 ke S3. Ada yang menunjuk pesaing tanpa biaya encoding, ada yang bilang semestinya lebih murah karena YouTube. Dulu Mux mengenakan biaya encoding, sehingga dikategorikan sebagai “opsi mahal”. Karena itu kami sedang membuat struktur harga baru: mulai dari level encoding yang lebih rendah tetapi ekonominya sanggup ditanggung, lalu jika dinilai bernilai, pelanggan bisa memilih level biaya/nilai encoding yang lebih tinggi. Sebagian sudah diluncurkan dan sebagian masih direncanakan
      Kami percaya video seharusnya hadir di lebih banyak tempat daripada sekarang, tetapi dibanding banyak biaya lain saat membuat aplikasi, video memang secara inheren mahal. Jadi kami melihat tugas kami adalah terus menurunkan biaya dan menyempurnakan struktur harga agar video bisa dipakai untuk lebih banyak use case
    • Ada use case seperti user-generated content di mana encoding menjadi pusat biaya besar, jadi kami ingin memungkinkan orang membangun di atas Mux bahkan dengan model seperti itu
      Trade-off saat memakai encoding gratis dirangkum di sini: https://docs.mux.com/guides/use-video-quality-levels. Encoding basic yang gratis pun tetap dikenai biaya penyimpanan dan transfer. Kami berharap, dengan membantu menekan biaya saat memulai, kami bisa ikut tumbuh bersama
      Encoding on-demand, alias JIT encoding, benar-benar terasa seperti sulap kalau melihat seberapa konsisten ia bekerja dengan baik
      Saya bekerja di Mux

  • Di sini ada beberapa bagian penanganan focus yang agak aneh. Semoga ini diterima sebagai kritik konstruktif, dan semuanya punya masalah yang sama
    Kalau mengklik video itu sendiri, tombol panah kiri/kanan bisa dipakai untuk menavigasi video maju-mundur. Panah atas/bawah tidak melakukan apa-apa
    Kalau mengklik navigation bar, tombol panah kiri/kanan berhenti berfungsi. Sebagai gantinya, tombol panah atas/bawah mulai rewind/fast-forward dengan interval waktu berbeda
    Kalau mengklik area kosong seperti bar biru yang terlihat seperti Windows 98 pada contoh Winamp atau Reelplay, semua kontrol ini berhenti berfungsi dan play/pause dengan spacebar juga tidak bisa
    Saya mengeceknya di Chrome terbaru di macOS

    • Masukan yang bagus. Ada issue terkait di repo Media Chrome: https://github.com/muxinc/media-chrome/issues/957
      Secara umum situasinya agak rumit karena ada tumpang tindih antara “shortcut key” untuk mengontrol video, kontrol aksesibilitas tiap komponen, dan ekspektasi aksesibilitas umum untuk seluruh halaman. Misalnya, saat player memiliki focus, apakah panah atas/bawah harus selalu ditangkap untuk kontrol volume, atau tidak karena orang berharap memakainya untuk scroll halaman
      Bagaimanapun, bagian ini perlu terus kami iterasi dan perbaiki ke depannya, jadi masukannya membantu

  • Player.style luar biasa
    Di startup saya sebelumnya, saya sempat mulai membuat sendiri tema video.js, lalu beberapa jam kemudian memutuskan itu tidak sepadan dengan waktu saya dan memakai default. Ke depannya, tema-tema seperti ini tampaknya akan menjadi titik awal yang jauh lebih baik saat membuat sesuatu yang lebih kustom

    • Kalau masih ada friksi saat membuat tema sendiri, berarti pekerjaan kami belum selesai. Beri tahu kami

  • Mumpung ada para pakar video di thread ini, saya penasaran apakah ada implementasi player yang memungkinkan scrubbing cepat dan mulus dengan audio
    Maksud saya fitur yang mirip dengan menelusuri atau melihat timeline di Adobe Premiere pada 16x speed. Mungkin perlu secara agresif melakukan preload sesuatu seperti track audio mono 16kHz dan format video 240p yang hanya berisi sprite 1fps atau I-frame, lalu beralih ke itu saat scrubbing

    • Scrubbing yang akurat per frame atau mulus memang selalu sulit pada level abstraksi elemen video
      Tidak ada jawaban pasti, tetapi mungkin ada baiknya melihat ranah WebCodecs, tempat contoh-contoh berperforma baik di level yang lebih rendah sedang dibuat: https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_A...

  • Web components itu luar biasa, dan Mux melakukan hal-hal keren dengannya

    • Satu masukan kecil: sebaiknya pertimbangkan penggunaan adoptedStyleSheets. Sekarang dukungannya sudah sangat baik, dan memberi peningkatan performa pada elemen yang berulang. Fallback juga bisa dilakukan

  • Kode dapat disesuaikan agar bekerja bersama embed YouTube
    Cukup atur hal berikut pada src embed YouTube
    controls=0 – menghapus kontrol pemutar seperti putar, jeda, dan volume
    modestbranding=1 – meminimalkan logo YouTube di dalam pemutar
    rel=0 – mencegah video terkait ditampilkan di akhir. Hanya berfungsi dengan cara menampilkan video dari kanal yang sama
    showinfo=0 – menghapus judul video dan informasi pengunggah. Parameter ini sudah dihentikan, tetapi modestbranding membantu
    fs=0 – menonaktifkan tombol layar penuh
    iv_load_policy=3 – menyembunyikan anotasi video seperti notifikasi pop-up
    Setelah itu, di kode cukup deteksi URL embed YouTube, lalu buat pemutar dengan iframe alih-alih tag video. Terakhir, petakan kontrol pemutar ke YouTube Embed API. Plyr.io juga melakukan hal serupa

  • Membuat sesuatu yang agak mirip dengan Winamp tidak berarti itu menjadi Winamp