HN เปิดตัว: Winamp และมีเดียเพลเยอร์อื่น ๆ ที่นำมาสร้างใหม่สำหรับเว็บด้วย Web Components

 (player.style)
3 คะแนน โดย GN⁺ 2024-10-09 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

สไตล์เพลเยอร์

  • แนะนำ

    • player.style คือชุดรวมธีมวิดีโอและออดิโอเพลเยอร์จาก MuxThemes ซึ่งมอบธีมที่เหมาะกับเว็บเพลเยอร์และเฟรมเวิร์กเว็บแอปทุกประเภท
    • ผู้ใช้สามารถเลือกธีมเพลเยอร์ที่ชอบ เลือกเพลเยอร์และเฟรมเวิร์กแอป จากนั้นปรับแต่งรายละเอียดของ UI เพลเยอร์ด้วย HTML และ CSS ได้

  • ตัวกรองธีม

    • ธีมต่าง ๆ สามารถกรองตาม media, video, audio และเฟรมเวิร์ก (HTML, React, Next.js, Vue, Svelte) ได้

  • ฟีเจอร์หลัก

    • รองรับฟีเจอร์อย่างภาพขนาดย่อบนไทม์ไลน์, chapters, tooltips, การตั้งค่าสีของธีม (หลัก, รอง, เน้น), ความเร็วการเล่น, คุณภาพ และซับไตเติล/CC เป็นต้น

  • ตัวอย่างธีม

    • Sutro: ธีมที่เรียบลื่นและทันสมัย ได้แรงบันดาลใจจากเสาอากาศทีวีสไตล์ไซไฟ
    • Instaplay: ธีมแบบ mobile-first ที่ได้แรงบันดาลใจจากประสบการณ์การเล่นของแอปโซเชียลมีเดียยอดนิยม
    • 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 ซึ่งต่างก็มีตัวเลือกการปรับแต่งที่หลากหลาย

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-10-09
ความคิดเห็นจาก Hacker News

  • ขอบคุณสำหรับไอเดียที่เผยแพร่ภายใต้สัญญาอนุญาต MIT และกำลังใช้เว็บคอมโพเนนต์ในการพัฒนาแอปสื่อ ก่อนหน้านี้เคยเปลี่ยนไปใช้ JavaScript แต่ตอนนี้เว็บคอมโพเนนต์ทำงานได้ดี

    • ชอบหลักการออกแบบและบันทึกสถาปัตยกรรมของ Media Chrome แต่กังวลเรื่องความสามารถในการขยายและขนาดไฟล์
    • ชี้ว่าคลัง media-elements ไม่มีไฟล์ไลเซนส์ และจำเป็นต้องมีไฟล์ LICENSE ที่ระบุชัดเจน
    • อยากใช้ไลบรารี Media Chrome และวางแผนจะยืมแนวคิดการห่อคอมโพเนนต์ของตัวเองด้วยองค์ประกอบ media controller

  • มีคำถามเกี่ยวกับการทำเพลเยอร์ที่รองรับการสครับแบบรวดเร็วและลื่นไหลพร้อมเสียงเหมือน Adobe Premiere

    • คาดว่าน่าจะต้องมีแทร็กเสียงโมโน 16khz และสไปรต์ 1fps หรือวิดีโอรูปแบบ 240p

  • คิดว่าในการพัฒนาแอปพลิเคชันควรตั้งค่า user-select: none; เป็นสิ่งจำเป็น

    • กล่าวถึงว่าแถบธีมบางส่วนยังสามารถถูกเลือกได้ และขอบคุณสำหรับผลงาน

  • มองว่ากลยุทธ์การตลาดของ Mux ยอดเยี่ยมมาก

    • เข้าซื้อโครงการโอเพนซอร์สหรือสร้างขึ้นใหม่เพื่อให้นักพัฒนาได้รู้จัก Mux
    • ยกตัวอย่างเช่น React Player

  • มองว่า Player.style ยอดเยี่ยม และบอกว่าเคยพยายามทำธีมวิดีโอ.js เองในสตาร์ตอัปก่อนหน้า แต่สุดท้ายก็กลับไปใช้ค่าเริ่มต้น

    • ขอบคุณที่แชร์

  • ชี้ปัญหาที่เกี่ยวกับโฟกัสของวิดีโอและให้คำวิจารณ์เชิงสร้างสรรค์

    • เมื่อคลิกวิดีโอสามารถใช้ปุ่มลูกศรซ้ายขวาเพื่อสครับได้ แต่เมื่อคลิกตัวสครับกลับใช้งานไม่ได้
    • เมื่อคลิกพื้นที่ว่าง คอนโทรลทั้งหมดจะไม่ทำงาน

  • ขอบคุณสำหรับผลงานที่สวยงาม และยินดีด้วยที่ปล่อยเป็น FOSS

  • มองว่า Mux ใช้งานเว็บคอมโพเนนต์ได้ดีมาก

  • เสนอให้เพิ่มสไตล์ที่ไม่บดบังวิดีโอ และมองว่าตัวโปรเจกต์เองยอดเยี่ยม

  • ชอบโปรเจกต์นี้ และขอให้เพิ่มแทร็กคำบรรยาย

    • ตอนนี้ยังไม่มีเอกสาร และ Media Chrome ใช้ไวยากรณ์อีกแบบจึงเพิ่มได้ยาก