▲

GN⁺: HN 공개: Web Components로 웹용으로 재구성된 Winamp 및 기타 미디어 플레이어

 (player.style)
3P by neo 2달전 | favorite | 댓글 1개

플레이어 스타일

  • 소개

    • player.style은 MuxThemes에서 제공하는 비디오 및 오디오 플레이어 테마 모음으로, 모든 웹 플레이어와 웹 앱 프레임워크에 적합한 테마를 제공함.
    • 사용자는 마음에 드는 플레이어 테마를 선택하고, 플레이어와 앱 프레임워크를 선택한 후, HTML과 CSS를 사용하여 플레이어 UI의 세부 사항을 커스터마이즈할 수 있음.

  • 테마 필터

    • 다양한 테마는 미디어, 비디오, 오디오, 프레임워크(HTML, React, Next.js, Vue, Svelte)로 필터링 가능함.

  • 주요 기능

    • 타임라인 썸네일, 챕터, 툴팁, 테마 색상 설정(기본, 보조, 강조), 재생 속도, 품질, 자막/CC 등의 기능을 제공함.

  • 테마 예시

    • Sutro: SF TV 안테나에서 영감을 받은 세련되고 현대적인 테마.
    • 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은 다양한 웹 플레이어와 앱 프레임워크에 적합한 테마를 제공하여 사용자 경험을 향상시킬 수 있는 유용한 리소스임.
  • 각 테마는 특정 영감이나 디자인 철학을 바탕으로 제작되어 다양한 사용자 취향을 만족시킬 수 있음.
  • 이러한 테마는 HTML과 CSS로 쉽게 커스터마이즈할 수 있어 개발자에게 유연성을 제공함.
  • 비슷한 기능을 가진 다른 프로젝트로는 Video.js나 Plyr 등이 있으며, 이들은 다양한 커스터마이즈 옵션을 제공함.
▲
neo 2달전  [-]
Hacker News 의견

  • MIT 라이선스로 제공된 아이디어에 감사하며, 미디어 앱 개발에 웹 컴포넌트를 사용 중임. 이전에는 JavaScript로 전환했지만, 현재는 웹 컴포넌트가 잘 작동하고 있음

    • Media Chrome의 설계 원칙과 아키텍처 노트를 좋아하며, 확장성과 파일 크기에 대한 우려가 있음
    • media-elements 저장소에 라이선스 파일이 없음을 지적하며, 명시적인 LICENSE 파일이 필요함
    • Media Chrome 라이브러리를 사용하고 싶으며, 자신의 컴포넌트를 미디어 컨트롤러 요소로 감싸는 아이디어를 차용할 계획임

  • Adobe Premiere처럼 오디오와 함께 빠르고 부드러운 스크러빙을 지원하는 플레이어 구현에 대한 질문이 있음

    • 16khz 모노 오디오 트랙과 1fps 스프라이트 또는 240p 비디오 형식이 필요할 것이라고 추측함

  • 애플리케이션 개발 시 user-select: none; 설정을 필수로 해야 한다고 생각함

    • 특정 테마 바가 선택 가능하다는 점을 언급하며, 작업에 감사함

  • Mux의 마케팅 전략이 훌륭하다고 평가함

    • 오픈 소스 프로젝트를 인수하거나 새로 만들어 개발자들이 Mux를 접하게 함
    • React Player와 같은 예시를 언급함

  • Player.style이 훌륭하다고 평가하며, 이전 스타트업에서 비디오.js 테마를 직접 만들려다 기본값을 사용하게 되었음을 언급함

    • 공유에 감사함

  • 비디오 포커스 관련 문제를 지적하며 건설적인 비판을 제공함

    • 비디오 클릭 시 좌우 화살표 키로 스크러빙 가능하지만, 스크러버 클릭 시 작동하지 않음
    • 빈 공간 클릭 시 모든 컨트롤이 작동하지 않음

  • 아름다운 작업에 감사하며 FOSS로 제공된 것에 축하함

  • Mux에서 웹 컴포넌트를 잘 활용하고 있다고 평가함

  • 비디오를 가리지 않는 스타일 추가를 제안하며, 프로젝트 자체는 훌륭하다고 평가함

  • 프로젝트를 좋아하며, 자막 트랙 추가를 요청함

    • 현재 문서가 없고 Media Chrome이 다른 문법을 사용하여 추가가 어려움
답변달기