HN Açıklandı: Web Components ile web için yeniden oluşturulan Winamp ve diğer medya oynatıcıları

 (player.style)
3 puan yazan GN⁺ 2024-10-09 | 1 yorum | WhatsApp'ta paylaş
  • player.style, Media Chrome tabanlı bir video ve ses oynatıcı tema koleksiyonu; farklı web oynatıcılarına ve uygulama çatılarında aynı şekilde uygulanabiliyor
  • İstediğiniz oynatıcı temasını seçip oynatıcıyı ve çatıyı belirlediğinizde, kopyalayıp yapıştırabileceğiniz bir kod akışına yönlendiriyor
  • Video/Audio, HTML, React, Next.js, Vue, Svelte ile birlikte timeline thumbnails, AirPlay, Google Cast, chapters, tooltips gibi ölçütlerle temalar daraltılabiliyor
  • Oynatıcı arayüzü yalnızca HTML ve CSS ile ayarlanabiliyor; ayrıca Primary, Secondary, Accent gibi tema renk ayarları da sunuluyor
  • Sutro, Instaplay, Notflix, YT, Minimal, Winamp gibi mevcut medya oynatıcı deneyimleri web temaları olarak yeniden kurgulanıp hızla uygulanabiliyor

player.style kullanım şekli ve özelleştirme

  • player.style, Media Chrome ile yapılmış video ve ses oynatıcı temaları sunuyor
  • Hedef kapsamı “every web player” ve “every web app framework”
  • Uygulama akışı basit 3 adımdan oluşuyor
    • Beğendiğiniz oynatıcı temasını seçin
    • Kullanacağınız oynatıcıyı ve uygulama çatısını seçin
    • Oluşturulan kodu kopyalayıp yapıştırın
  • Oynatıcı arayüzü yalnızca HTML ve CSS ile ayrıntılı olarak ayarlanabiliyor
  • Filtreler ve ayar seçenekleri şunları içeriyor
    • Medya: Video, Audio
    • Çatılar: HTML, React, Next.js, Vue, Svelte
    • Özellikler: timeline thumbnails, AirPlay, Google Cast, chapters, tooltips
    • Renkler: Primary, Secondary, Accent

Web oynatıcı tema galerisi

  • Sutro: SF TV anteninin adından esinlenen şık ve modern bir tema
  • X-mas: kırmızı-yeşil tonları, parıldayan ışıklar ve yıl sonu havası taşıyan bir Noel teması
  • Halloween: video oynatıcıya Cadılar Bayramı havası katan bir tema
  • Instaplay: popüler bir sosyal medya uygulamasının oynatma deneyiminden ilham alan mobil öncelikli bir tema
  • Sutro Audio: Sutro ile aynı açıklamaya sahip ses teması
  • Notflix: “büyük kırmızı N” ve Los Gatos’a giden uzun otobüs dışında o deneyimi ima eden bir tema
  • Reelplay: geçmiş medya oynatıcılarından ilham alan retro medya oynatıcı teması
  • Vimeonova: klasik Vimeo oynatıcı tasarımını yeniden yorumlayan bir tema
  • YT: modern ve yaygın kullanılan YouTube oynatıcısına bir saygı duruşu; Web Components ile olabildiğince yakın biçimde yeniden oluşturulmuş
  • Tailwind Audio: Tailwind CSS ile yapılmış minimalist bir ses oynatıcı teması
  • Demuxed 2022: Demuxed 2022 için yapılmış medya oynatıcı teması
  • Microvideo: uzun içeriklerde gereken güçlü oynatma kontrollerine ihtiyaç duymayan kısa içerikler için tasarlanmış bir tema
  • Minimal: Mux Player deneyimini izleyicinin ihtiyaç duyduğu temel kontrollere indirgeyen sade bir tema
  • Winamp: klasik Winamp medya oynatıcısından ilham alan retro bir tema

İlgili okumalar

1 yorum

 
GN⁺ 2024-10-09
Hacker News yorumları

  • Yalnızca müzik gerekiyorsa ve video gerekmiyorsa https://webamp.org/ de bakmaya değer.
    “Derlemeye” ya da gösterişli biçimde “entegre etmeye” gerek yok; doğrudan ekleyebiliyorsunuz, çalma listesini de uygulama içinde oluşturabiliyorsunuz. Örnek: Music

    • Uygulama gerçekten çok iyi. İstenirse video desteği de kolayca eklenebilir gibi görünüyor; muhtemelen içeride sadece medya öğelerini kullanıyordur

  • Bu fikri sevdim ve bunu MIT lisansı ile yayımladığınız için teşekkürler.
    Ben de tam bu sırada bir medya uygulaması, daha doğrusu bir video editörü geliştiriyorum; geçmişte de Flash ve HTML/JS ile birkaç video oynatıcı yapmıştım. 2015 civarında bir oynatıcıda web component'leri denemiştim ama süreç sürekli sancılı olduğu için sonunda düz JavaScript'e geri dönmüştüm. İlginç biçimde, şu anki medya uygulamamda video editörü zaman çizelgesi gibi web component'leri kullanıyorum ve şimdiye kadar oldukça iyi gidiyor. Neyin değiştiğini ya da web'in yavaş evrimi sayesinde uyumluluğun yeterince artıp artmadığını tam bilmiyorum.
    Media Chrome belgelerine göz attım ve GitHub deposuna da hızlıca baktım; tasarım ilkeleriyle mimari notları hoşuma gitti. Böyle bir şeyi benimserken, özellikle de buna benzer şeyleri birkaç kez kendim yazmış biri olarak, en büyük kaygım genişletilebilirlik ve dosya boyutu oluyor. Örneğin kendi zaman çizelgesi bileşenimi MediaController paradigmasına uydurmanın ne kadar zor olacağını merak ediyorum. Her şeyi kendiniz yaptığınızda sadece ihtiyaç duyduğunuz şeyler olur, fazlası olmaz. Media Chrome'da ise benim asla kullanmayacağım pek çok özellik var gibi görünüyor; soru şu, bunun yüzünden ne kadar gereksiz yük taşımış olacağım. Bu yalnızca kullanmadığım bileşenler için değil, kullandığım bileşenlerin içindeki kullanmadığım özellikler için de geçerli. Bazen mevcut gereksiz özellikler, daha alt seviyedeki genişletilebilirliğin önünü de kesebiliyor.
    Ayrıca media-elements deposunda [1] bir lisans dosyası yok. package.json içinde öğelerin de MIT olduğu yazıyor ama açık bir LICENSE dosyası olması her zaman iyi olur.
    Yine de oldukça cazip bir kütüphane. En azından şimdiye kadar bu öğeleri birbirine bağlama işini sayfayı oluşturan kod yapıyordu; ben de daha iyi bir soyutlama arıyordum, bu yüzden bileşenlerimi media-controller benzeri bir öğeyle sarmalama fikrini muhtemelen ödünç alacağım.

    1. https://github.com/muxinc/media-elements
    • 2015 civarında web component'ler konusunda epey iyimser ve inatçıymışım gibi geliyor. Gerçekten işe yaramasını çok istemiştim ama bunu üretimde kullanmam ancak 2020 civarında oldu.
      Arada web component spesifikasyonunun v2 sürümü geldi ama tam olarak neyin değiştiği konusunda uzman değilim. Artık web component'leri her yerde görmeye başladık; özellikle de medya oynatıcılarda. Örneğin Apple'ın web oynatıcısı buna bir örnek.
      Denetleyici mimarisini beğenmenize sevindim. İlk sürümlerde tüm öğeler medya öğesini doğrudan işaret ediyordu; denetleyici gelince işler çok daha derli toplu hale geldi. En azından benim önceki yöntemlerimle kıyaslayınca bunu güçlü biçimde tavsiye ederim.
      Video editörü arayüzünü Media Chrome ürün ailesinin doğal bir uzantısı olarak görüyorum. Bu tarafta neyin daha faydalı olacağını depoda issue açarak paylaşırsanız harika olur.
      Gelecekteki esneklik ve boyut kaygıları yüzünden Media Chrome gibi bir şeyi benimsemekte tereddüt etmenizi çok iyi anlıyorum. Beni ikna edebilecek 3 nokta olurdu: 1) Yalnızca ihtiyaç duyduğunuz UI bileşenlerini dahil edebiliyorsunuz; bu da boyut açısından diğer web video oynatıcılarına göre büyük bir fark yaratıyor. 2) Erişilebilirlik ve ilerideki uluslararasılaştırma gibi konular dahil, üzerinde en deneyimli oynatıcı geliştiricileri çalışıyor. 3) slot'lar, CSS parts ve CSS değişkenleri sayesinde çok yüksek düzeyde yapılandırılabilir olmasına özellikle çabalıyoruz.
      Elbette tamamen özel yazılmış bir yazılımın dosya boyutunu geçemez ama tüm temel işlevler oturduğunda ona oldukça yaklaşabileceğini düşünüyorum. elements lisansını haber verdiğiniz için teşekkürler.

  • Mux pazarlama stratejisi akıllıca.
    Video paketleri arayan geliştiricilerin eninde sonunda şirketin adıyla karşılaşması için açık kaynak projeleri ya devralıyorlar ya da yenilerini oluşturuyorlar.
    Yakın zamanda gördüğüm başka bir örnek de https://github.com/cookpete/react-player.

    • Teşekkürler. “Akıllıca” demek biraz fazla övgü olabilir. Çoğu zaman olan şey, geliştiricilerin videoyu nasıl kullandığına bakıp o alandaki sorunları çözmeye çalışmamız. Next-video.dev de bununla gurur duyduğumuz örneklerden biri.
      Açık kaynak oynatıcı tarafında gördüğümüz şeylerden bir kısmı da, zaten bu tür projeleri desteklemek zorunda olmamızdan kaynaklanıyor. Biz oynatıcıdan bağımsızız; bu yüzden müşterilerimiz, bakımı çok aktif olmayan projeler de dahil, çeşitli açık kaynak çözümleri kullanıyor.
      Şu anda geliştirici odaklı video şirketleri arasında açık kaynağa ciddi katkı veren çok az şirket var; bu yüzden burada avantaj elde ettiğimizi düşünüyorum.

  • Mux iyi görünüyor, ancak şirketin ücretsiz video kodlama katmanını sürdürmeye devam edeceğine güvenmediğim için onun üstüne bir şey inşa edeceğimi sanmıyorum
    Kullanıcıya yönelik isteğe bağlı kodlama da kaynak açısından pek mantıklı gelmiyor. Starter modelinde 10 dolara 100 dolarlık kredi alıyorsunuz. Hepsi büyük bir yem ürün gibi görünüyor ve her gün para yakan bir şirkete artık güvenmek zor. Keşke en azından bir şekilde ücret alsalardı. Kodlamanın bedava olmadığını biliyorum. Ya da sitede, sektördeki herkesden daha düşük fiyat alıp yine de işi nasıl sürdürebildiklerini açıklayan bir bölüm olsa, şüphemi epey azaltabilirdi. SaaS yüzünden fazlasıyla yandım

    • Buna cevap olarak kitap bile yazılabilir
      “Sektördeki herkesden daha düşük fiyat alıp yine de işi nasıl sürdürebildiklerini açıklayan bir bölüm” gerçekten çok iyi bir geri bildirim; yapılacaklar listesine ekleyeceğim. Kesinlikle orada olmalı
      Taşıyamayacağımız birim ekonomisine göre fiyat vermeyeceğiz; en azından bunu taşıyabileceğimize dair net bir yol olmalı. Tüm hacim bazlı fiyatlandırmalar açık olduğu için, kredi gibi kavramları anlıyorsanız yemin arkasından gelen bir fiyat değişikliğiyle karşılaşmamanız gerekir. Ölçek büyüdüğünde kullanıcıyı yeni fiyatlarla şaşırtan bazı rakiplerin tersini yapıyoruz. Bu yaklaşımı gerçekten sevmiyorum
      İçeride tam zamanında kodlama ve başka gelişmiş optimizasyonlar kullandığımız için bir avantajımız var. Ölçek ekonomisi de var; bununla ilgili bir yazı yazmayı planlıyorum
      Ama müşteri algısı zor. Bazı müşteriler kodlamayı, maliyetini ve uyarlanabilir streaming ya da kullanıcı üretimli yüklemeleri işlemek gibi avantajlarını anlıyor. Birçok geliştirici video konusunda yeni ve bunun MP4’ü S3’e yükleme maliyetiyle aynı olmasını bekliyor. Kimi insanlar kodlama maliyeti olmayan rakipleri örnek gösteriyor, kimileri de YouTube yüzünden daha ucuz olması gerektiğini söylüyor. Geçmişte Mux kodlama için ücret aldığı için “pahalı seçenek” diye sınıflandırılıyordu; bu yüzden, ekonomik olarak sürdürülebilir daha düşük bir kodlama düzeyinden başlayıp, değerli olduğuna karar verilirse daha yüksek kodlama maliyeti/değer düzeyini seçebileceğiniz yeni bir fiyat yapısı oluşturuyoruz. Bunun bir kısmı zaten yayında, bir kısmı da yolda
      Videonun bugün olduğundan daha fazla yerde olması gerektiğini düşünüyoruz, ama video; uygulama geliştirirken ortaya çıkan diğer birçok maliyetle kıyaslandığında doğası gereği pahalı. Bu yüzden maliyeti düşürmeye ve fiyat yapısını inceltmeye devam ederek daha fazla kullanım senaryosunda videoyu mümkün kılmanın bizim işimiz olduğunu düşünüyoruz
    • Kullanıcı tarafından üretilen içerik gibi, kodlamanın büyük maliyet kalemi olduğu kullanım senaryoları var; bu yüzden o modelle de Mux üzerinde bir şeyler inşa edilebilmesini istedik
      Ücretsiz kodlama kullanırken verilen ödünler burada özetlenmiş: https://docs.mux.com/guides/use-video-quality-levels. Ücretsiz basic kodlamada bile depolama ve aktarım maliyetleri yine ücretlendiriliyor. Başlangıçta maliyeti azaltmanıza yardımcı olabilirsek birlikte büyüyebileceğimizi umuyoruz
      İsteğe bağlı, yani JIT kodlama; gerçekte ne kadar tutarlı ve iyi çalıştığını görünce adeta sihir gibi geliyor
      Mux’ta çalışıyorum

  • Burada odak işleme konusunda biraz gariplik var. Umarım yapıcı eleştiri olarak alınır; hepsinde aynı sorun var
    Videonun kendisine tıklarsanız sol/sağ ok tuşları videoda ileri geri arama yapabiliyor. Yukarı/aşağı ise hiçbir şey yapmıyor
    Arama çubuğuna tıklarsanız sol/sağ ok tuşları çalışmayı bırakıyor. Bunun yerine yukarı/aşağı ok tuşları farklı zaman aralıklarıyla geri sarma/ileri alma yapmaya başlıyor
    Winamp örneğinde ya da Reelplay örneğindeki Windows 98 gibi görünen mavi çubuk gibi boş bir alana tıklarsanız, bu kontrollerin hepsi çalışmayı bırakıyor ve boşluk tuşuyla oynat/duraklat da olmuyor
    Bunu macOS’te güncel Chrome’da doğruladım

    • İyi geri bildirim. Media Chrome deposunda bununla ilgili bir issue var: https://github.com/muxinc/media-chrome/issues/957
      Genel olarak videoyu kontrol eden “kısayollar”, her bileşenin erişilebilirlik kontrolleri ve tüm sayfaya yönelik genel erişilebilirlik beklentileri üst üste bindiği için durum biraz karmaşık. Örneğin oynatıcı odaktayken yukarı/aşağı oklarını her zaman ses kontrolüne mi ayırmalıyız, yoksa insanlar bunları sayfayı kaydırmak için kullanmayı beklediğinden bunu yapmamalı mıyız gibi sorular var
      Her hâlükârda bu, zamanla yinelemeli olarak iyileştirmemiz gereken bir alan; dolayısıyla geri bildirim yardımcı oluyor

  • Player.style harika
    Son girişimimde video.js için özel bir tema yapmaya başlamıştım, ama birkaç saat sonra bunun zamanımı harcamaya değmeyeceğine karar verip varsayılanı kullandım. İleriye dönük olarak, böyle temalar daha özelleştirilmiş bir şey inşa ederken çok daha iyi bir başlangıç noktası gibi görünüyor

    • Kendi temanızı oluştururken hâlâ sürtünme varsa işimiz bitmemiş demektir. Haber verirseniz seviniriz

  • Bu başlıkta video uzmanları varken şunu merak ediyorum: ses içeren hızlı ve akıcı aramayı mümkün kılan bir oynatıcı uygulaması var mı?
    Adobe Premiere’de zaman çizelgesini 16x hızla taramak ya da göz gezdirmek gibi bir şeyden bahsediyorum. Muhtemelen 16kHz mono bir ses parçası ve 1fps sprite ya da yalnızca I-frame içeren 240p bir video formatı gibi bir şeyi önceden agresif biçimde yükleyip, arama sırasında ona geçmek gerekir

  • Web Components harika ve Mux bununla çok güzel işler yapıyor

    • Küçük bir geri bildirim: adoptedStyleSheets kullanımını değerlendirebilirsiniz. Artık desteği oldukça iyi ve tekrarlanan öğelerde performans artışı sağlıyor. Geriye dönük bir alternatif işleme de yapılabilir

  • Kodun YouTube gömmesi ile çalışacak şekilde uyarlanması mümkün
    Bunun için YouTube gömme src değerinde aşağıdakileri ayarlamak yeterli
    controls=0 – oynatma, duraklatma, ses gibi oynatıcı kontrollerini kaldırır
    modestbranding=1 – oynatıcının içindeki YouTube logosunu en aza indirir
    rel=0 – sonda ilgili videoları göstermeyi engeller. Yalnızca aynı kanaldaki videoları gösterme şeklinde çalışır
    showinfo=0 – video başlığını ve yükleyici bilgisini kaldırır. Bu parametre kullanımdan kaldırıldı ama modestbranding yardımcı olur
    fs=0 – tam ekran düğmesini devre dışı bırakır
    iv_load_policy=3 – açılır bildirimler gibi video ek açıklamalarını gizler
    Ardından kodda YouTube gömme URL'si algılanıp, video etiketi yerine iframe ile oynatıcı oluşturulabilir. Son olarak oynatıcı kontrolleri YouTube Embed API'ye eşlenebilir. Plyr.io da benzer bir şey yapmıştı

  • Winamp'a belli ölçüde benzeyen bir şey yapmak, onu Winamp yapmaz