HN पर: Web Components के साथ वेब के लिए फिर से बनाया गया Winamp और अन्य मीडिया प्लेयर

 (player.style)
3 पॉइंट द्वारा GN⁺ 2024-10-09 | 1 टिप्पणियां | WhatsApp पर शेयर करें

प्लेयर स्टाइल

  • परिचय

    • player.style, MuxThemes द्वारा उपलब्ध कराया गया वीडियो और ऑडियो प्लेयर थीम्स का एक संग्रह है, जो सभी वेब प्लेयर्स और वेब ऐप frameworks के लिए उपयुक्त थीम्स प्रदान करता है।
    • उपयोगकर्ता अपनी पसंद की प्लेयर थीम चुन सकते हैं, फिर प्लेयर और ऐप framework चुनकर HTML और CSS का उपयोग करते हुए प्लेयर UI के विवरण को कस्टमाइज़ कर सकते हैं।

  • थीम फ़िल्टर

    • विभिन्न थीम्स को media, video, audio, framework (HTML, React, Next.js, Vue, Svelte) के आधार पर फ़िल्टर किया जा सकता है।

  • मुख्य सुविधाएँ

    • timeline thumbnails, chapters, tooltips, theme color settings (primary, secondary, accent), playback speed, quality, subtitles/CC जैसी सुविधाएँ प्रदान की जाती हैं।

  • थीम उदाहरण

    • Sutro: SF TV antenna से प्रेरित एक परिष्कृत और आधुनिक थीम।
    • Instaplay: लोकप्रिय social media apps के playback experience से प्रेरित mobile-first थीम।
    • Notflix: बड़े लाल N और Los Gatos जाने वाली लंबी बस को छोड़कर बाकी सब वाला थीम।
    • Reelplay: पुराने media players से प्रेरित एक nostalgic media player।
    • Vimeonova: क्लासिक Vimeo player design की एक ताज़ा व्याख्या।
    • YTV: आधुनिक और सार्वभौमिक YouTube player को समर्पित एक homage।
    • Tailwind Audio: Tailwind CSS से बना साफ़-सुथरा और minimalist audio player theme।
    • Demuxed 2022: Demuxed 2022 के लिए बनाया गया media player theme।
    • Microvideo: short-form content के लिए optimized थीम, जिसमें लंबे content के लिए ज़रूरी मज़बूत playback controls की आवश्यकता नहीं होती।
    • Minimal: Mux Player experience को न्यूनतम controls के साथ सरल बनाने वाला थीम।
    • Winamp: क्लासिक Winamp media player से प्रेरित एक retro theme।

GN⁺ की ओर से संक्षेप

  • player.style एक उपयोगी संसाधन है, जो विभिन्न वेब प्लेयर्स और ऐप frameworks के लिए उपयुक्त थीम्स देकर user experience को बेहतर बना सकता है।
  • हर थीम किसी विशेष प्रेरणा या design philosophy पर आधारित है, जिससे अलग-अलग उपयोगकर्ता पसंदों को पूरा किया जा सकता है।
  • इन थीम्स को HTML और CSS के साथ आसानी से कस्टमाइज़ किया जा सकता है, जिससे डेवलपर्स को लचीलापन मिलता है।
  • समान सुविधाओं वाले अन्य प्रोजेक्ट्स में Video.js और Plyr शामिल हैं, जो कई तरह के customization options प्रदान करते हैं।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-10-09
Hacker News टिप्पणियाँ

  • MIT लाइसेंस के साथ उपलब्ध कराए गए आइडिया के लिए धन्यवाद, और मीडिया ऐप डेवलपमेंट में web components का उपयोग कर रहे हैं। पहले JavaScript पर स्विच किया था, लेकिन अब web components अच्छी तरह काम कर रहे हैं

    • Media Chrome के design principles और architecture notes पसंद आए, और scalability तथा file size को लेकर चिंता है
    • यह बताया कि media-elements repository में license file नहीं है, और एक स्पष्ट LICENSE file की ज़रूरत है
    • Media Chrome library का उपयोग करना चाहते हैं, और अपने component को media controller element में wrap करने के आइडिया को अपनाने की योजना है

  • Adobe Premiere की तरह audio के साथ तेज़ और smooth scrubbing को सपोर्ट करने वाले player implementation के बारे में सवाल है

    • अनुमान है कि 16khz mono audio track और 1fps sprite या 240p video format की ज़रूरत होगी

  • application development करते समय user-select: none; सेट करना ज़रूरी होना चाहिए, ऐसा मानते हैं

    • यह उल्लेख करते हैं कि एक खास theme bar selectable है, और काम के लिए धन्यवाद देते हैं

  • Mux की marketing strategy को शानदार मानते हैं

    • open source projects को acquire करते हैं या नए बनाते हैं ताकि developers Mux तक पहुँचें
    • React Player जैसे उदाहरण का उल्लेख करते हैं

  • Player.style को शानदार बताते हैं, और यह उल्लेख करते हैं कि पिछली startup में video.js theme खुद बनाने की कोशिश की थी लेकिन आखिर में default का उपयोग करना पड़ा

    • साझा करने के लिए धन्यवाद

  • video focus से जुड़ी समस्या की ओर इशारा करते हुए रचनात्मक आलोचना देते हैं

    • video पर click करने पर left/right arrow keys से scrubbing संभव है, लेकिन scrubber पर click करने पर यह काम नहीं करता
    • खाली जगह पर click करने पर कोई भी controls काम नहीं करते

  • सुंदर काम के लिए धन्यवाद, और इसे FOSS के रूप में उपलब्ध कराने पर बधाई

  • Mux में web components का अच्छा उपयोग किया गया है, ऐसा मानते हैं

  • ऐसा style जोड़ने का सुझाव देते हैं जो video को ढके नहीं, और project को कुल मिलाकर शानदार बताते हैं

  • project पसंद है, और subtitle track जोड़ने का अनुरोध करते हैं

    • फिलहाल documentation नहीं है और Media Chrome अलग syntax इस्तेमाल करता है, इसलिए इसे जोड़ना मुश्किल है