HN公開: Web ComponentsでWeb向けに再構成されたWinampやその他のメディアプレーヤー

 (player.style)
3 ポイント 投稿者 GN⁺ 2024-10-09 | 1件のコメント | WhatsAppで共有

プレーヤースタイル

  • 紹介

    • player.style は MuxThemes が提供する動画および音声プレーヤーテーマ集で、あらゆるWebプレーヤーとWebアプリフレームワークに適したテーマを提供します。
    • ユーザーは好みのプレーヤーテーマを選び、プレーヤーとアプリフレームワークを選択したうえで、HTML と CSS を使ってプレーヤーUIの細部をカスタマイズできます。

  • テーマフィルター

    • さまざまなテーマは、メディア、動画、音声、フレームワーク（HTML、React、Next.js、Vue、Svelte）で絞り込みできます。

  • 主な機能

    • タイムラインサムネイル、チャプター、ツールチップ、テーマカラー設定（基本、補助、強調）、再生速度、画質、字幕/CC などの機能を提供します。

  • テーマ例

    • Sutro: SFのテレビアンテナに着想を得た、洗練されたモダンなテーマ。
    • Instaplay: 人気ソーシャルメディアアプリの再生体験に着想を得た、モバイルファーストのテーマ。
    • Notflix: 大きな赤い N と Los Gatos 行きの長いバスを除いたテーマ。
    • Reelplay: 過去のメディアプレーヤーに着想を得た、ノスタルジックなメディアプレーヤー。
    • Vimeonova: クラシックな Vimeo プレーヤーデザインの新鮮な解釈。
    • YTV: モダンで普遍的な YouTube プレーヤーへのオマージュ。
    • Tailwind Audio: Tailwind CSS で作られた、クリーンでミニマルなオーディオプレーヤーテーマ。
    • Demuxed 2022: Demuxed 2022 のために作られたメディアプレーヤーテーマ。
    • Microvideo: 短いコンテンツ向けに最適化されたテーマで、長尺コンテンツに必要な強力な再生コントロールを必要としません。
    • Minimal: Mux Player の体験を最小限のコントロールで簡素化したテーマ。
    • Winamp: クラシックな Winamp メディアプレーヤーに着想を得たレトロなテーマ。

GN⁺の要約

  • player.style は、さまざまなWebプレーヤーやアプリフレームワークに適したテーマを提供し、ユーザー体験を向上させられる有用なリソースです。
  • 各テーマは特定の着想やデザイン哲学に基づいて作られており、多様なユーザーの好みに応えられます。
  • これらのテーマは HTML と CSS で簡単にカスタマイズでき、開発者に柔軟性を提供します。
  • 類似の機能を持つ他のプロジェクトとしては Video.js や Plyr などがあり、これらもさまざまなカスタマイズオプションを提供しています。

関連記事

1件のコメント

 
GN⁺ 2024-10-09
Hacker Newsのコメント

  • MITライセンスで提供されたアイデアに感謝しており、メディアアプリ開発にWeb Componentsを使用中。以前はJavaScriptに移行していたが、現在はWeb Componentsがうまく機能している

    • Media Chromeの設計原則とアーキテクチャノートを気に入っており、拡張性とファイルサイズへの懸念がある
    • media-elements リポジトリにライセンスファイルがないことを指摘し、明示的なLICENSEファイルが必要だとしている
    • Media Chromeライブラリを使いたく、自分のコンポーネントをメディアコントローラー要素でラップするというアイデアを取り入れる予定

  • Adobe Premiereのように、音声付きで高速かつ滑らかなスクラビングをサポートするプレイヤー実装についての質問がある

    • 16khzモノラル音声トラックと1fpsスプライト、または240p動画形式が必要になるのではないかと推測している

  • アプリケーション開発時には user-select: none; の設定を必須にすべきだと考えている

    • 特定のテーマバーが選択可能である点に触れつつ、作業に感謝している

  • Muxのマーケティング戦略は見事だと評価している

    • オープンソースプロジェクトを買収するか新たに作り、開発者がMuxに触れるようにしている
    • React Playerのような例に言及している

  • Player.styleは素晴らしいと評価しており、以前のスタートアップでvideo.jsのテーマを自作しようとして、結局デフォルトを使うことになったと述べている

    • 共有に感謝している

  • 動画のフォーカスに関する問題を指摘し、建設的な批判をしている

    • 動画をクリックすると左右の矢印キーでスクラビングできるが、スクラバーをクリックした場合は機能しない
    • 空白部分をクリックすると、すべてのコントロールが機能しない

  • 美しい仕事に感謝し、FOSSとして提供されたことを祝福している

  • MuxはWeb Componentsをうまく活用していると評価している

  • 動画を隠さないスタイルの追加を提案しつつ、プロジェクト自体は素晴らしいと評価している

  • このプロジェクトを気に入っており、字幕トラックの追加を要望している

    • 現時点ではドキュメントがなく、Media Chromeが別の構文を使っているため追加が難しい