HN’de tanıtıldı: Winamp ve diğer medya oynatıcıları, Web Components ile web için yeniden tasarlandı

 (player.style)
3 puan yazan GN⁺ 2024-10-09 | 1 yorum | WhatsApp'ta paylaş

Oynatıcı stilleri

  • Giriş

    • player.style, MuxThemes tarafından sunulan bir video ve ses oynatıcı tema koleksiyonu olup tüm web oynatıcıları ve web uygulaması framework’leri için uygun temalar sağlar.
    • Kullanıcılar beğendikleri oynatıcı temasını seçip ardından oynatıcıyı ve uygulama framework’ünü belirleyerek HTML ve CSS kullanımıyla oynatıcı arayüzünün ayrıntılarını özelleştirebilir.

  • Tema filtreleri

    • Farklı temalar medya, video, ses ve framework’e göre (HTML, React, Next.js, Vue, Svelte) filtrelenebilir.

  • Başlıca özellikler

    • Zaman çizelgesi küçük resimleri, bölümler, ipuçları, tema renk ayarları (birincil, ikincil, vurgu), oynatma hızı, kalite, altyazı/CC gibi özellikler sunar.

  • Tema örnekleri

    • Sutro: SF TV anteninden ilham alan şık ve modern bir tema.
    • Instaplay: Popüler sosyal medya uygulamalarındaki oynatma deneyiminden ilham alan, mobile-first bir tema.
    • Notflix: Büyük kırmızı N ve Los Gatos’a giden uzun otobüs hariç bir tema.
    • Reelplay: Geçmişin medya oynatıcılarından ilham alan nostaljik bir medya oynatıcı.
    • Vimeonova: Klasik Vimeo oynatıcı tasarımının taze bir yorumu.
    • YTV: Modern ve evrensel YouTube oynatıcısına bir saygı duruşu.
    • Tailwind Audio: Tailwind CSS ile hazırlanmış temiz ve minimalist bir ses oynatıcı teması.
    • Demuxed 2022: Demuxed 2022 için hazırlanmış bir medya oynatıcı teması.
    • Microvideo: Kısa içerikler için optimize edilmiş, uzun içeriklerde gereken güçlü oynatma kontrollerine ihtiyaç duymayan bir tema.
    • Minimal: Mux Player deneyimini minimum kontrollerle sadeleştiren bir tema.
    • Winamp: Klasik Winamp medya oynatıcısından ilham alan retro bir tema.

GN⁺ özeti

  • player.style, farklı web oynatıcıları ve uygulama framework’leri için uygun temalar sunarak kullanıcı deneyimini iyileştirebilen faydalı bir kaynak.
  • Her tema belirli bir ilham ya da tasarım felsefesine dayanarak hazırlandığı için farklı kullanıcı zevklerine hitap edebilir.
  • Bu temalar HTML ve CSS ile kolayca özelleştirilebildiğinden geliştiricilere esneklik sağlar.
  • Benzer işlevler sunan diğer projeler arasında Video.js ve Plyr bulunur; bunlar da çeşitli özelleştirme seçenekleri sağlar.

İlgili okumalar

1 yorum

 
GN⁺ 2024-10-09
Hacker News yorumu

  • MIT lisansı ile sunulan fikir için teşekkür ediyor ve medya uygulaması geliştirmede web component'leri kullandığını söylüyor. Daha önce JavaScript'e geçmiş olsa da, şu anda web component'lerin iyi çalıştığını belirtiyor

    • Media Chrome'un tasarım ilkelerini ve mimari notlarını beğeniyor; ölçeklenebilirlik ve dosya boyutu konusunda endişeleri var
    • media-elements deposunda lisans dosyası olmadığını belirtiyor ve açık bir LICENSE dosyasının gerekli olduğunu söylüyor
    • Media Chrome kütüphanesini kullanmak istediğini ve kendi component'lerini media controller öğesiyle sarmalama fikrini ödünç almayı planladığını ifade ediyor

  • Adobe Premiere gibi sesle birlikte hızlı ve akıcı scrubbing destekleyen bir oynatıcıyı nasıl uygulayabileceğine dair bir soru var

    • Bunun için 16khz mono ses izi ve 1fps sprite ya da 240p video formatı gerekeceğini tahmin ediyor

  • Uygulama geliştirirken user-select: none; ayarının zorunlu olması gerektiğini düşünüyor

    • Belirli bir tema çubuğunun seçilebilir olduğunu belirtiyor ve çalışma için teşekkür ediyor

  • Mux'un pazarlama stratejisinin harika olduğunu değerlendiriyor

    • Açık kaynak projeleri satın alıyor ya da yenilerini oluşturup geliştiricilerin Mux ile tanışmasını sağlıyor
    • React Player gibi örneklerden bahsediyor

  • Player.style'ın harika olduğunu söylüyor ve önceki startup'ında video.js teması yapmayı denediğini ama sonunda varsayılanı kullanmak zorunda kaldığını belirtiyor

    • Paylaşım için teşekkür ediyor

  • Video odağıyla ilgili bir soruna dikkat çekiyor ve yapıcı eleştiri sunuyor

    • Videoya tıklayınca sağ ve sol ok tuşlarıyla scrubbing yapılabiliyor, ancak scrubber'a tıklayınca çalışmıyor
    • Boş alana tıklayınca hiçbir kontrol çalışmıyor

  • Güzel çalışma için teşekkür ediyor ve bunun FOSS olarak sunulmasını tebrik ediyor

  • Mux'un web component'leri iyi kullandığını düşünüyor

  • Videoyu kapatmayan bir stil eklenmesini öneriyor ve projenin kendisinin harika olduğunu söylüyor

  • Projeyi beğeniyor ve altyazı izi eklenmesini istiyor

    • Şu anda dokümantasyon yok ve Media Chrome farklı bir sözdizimi kullandığı için eklemek zor