Video.js v10 - 88% छोटा हुआ ओपन सोर्स वीडियो प्लेयर
(videojs.org)- 16 साल बाद पूरी तरह दोबारा लिखा गया Video.js v10 अब bundle size को 88% तक घटाकर आधुनिक development environment के अनुरूप नई संरचना के साथ पेश किया गया है
- यह React·TypeScript·Tailwind को first-class support देता है, साथ ही आकर्षक default UI और AI-friendly documentation structure प्रदान करता है
- नए Streaming Processor Framework(SPF) के साथ केवल ज़रूरी फीचर्स को जोड़कर इस्तेमाल करने योग्य modular streaming engine बनाया गया है, जो HLS.js की तुलना में 12% स्तर तक हल्का है
- Composition-based architecture और React/Web Components skin system की मदद से UI और फीचर्स को स्वतंत्र रूप से बदला या हटाया जा सकता है
- इसका लक्ष्य 2026 में औपचारिक रिलीज़ है, और AI सहयोगी development तथा विस्तार योग्य preset ecosystem के जरिए यह अगली पीढ़ी के open source media platform की दिशा में विकसित हो रहा है
Video.js v10 बीटा का अवलोकन
- Video.js v10.0.0 बीटा 16 साल में पहली पूर्ण पुनर्लेखन है, और यह सिर्फ Video.js ही नहीं बल्कि Plyr, Vidstack, Media Chrome जैसे कई open source projects के सहयोग का परिणाम है
- कुल 75 हजार GitHub stars और हर महीने अरबों प्लेबैक वाले ecosystem की भागीदारी के साथ, इसे आधुनिक development workflow और AI-assisted development environment को ध्यान में रखकर फिर से डिज़ाइन किया गया है
- इसके मुख्य लक्ष्य हैं bundle size में 88% कमी, React·TypeScript·Tailwind के लिए first-class support, सुंदर default UI, और AI-friendly documentation structure
Bundle size और performance में सुधार
- आधारभूत Video.js v10 player में v8 की तुलना में default bundle size 88% कम है, और ABR(Adaptive Bitrate) फीचर हटाने पर भी 66% कमी रहती है
- उदाहरण: v8 default 260.5kB(minified) → v10 HTML video player 97.4kB(minified), जबकि React version 62.0kB है
- नए Streaming Processor Framework(SPF) के कारण अब केवल आवश्यक फीचर्स के संयोजन से modular streaming engine बनाया जा सकता है
- साधारण HLS उपयोग में v10+SPF, v8+VHS की तुलना में file size का 19% है
- SPF engine स्वयं HLS.js-light के आकार का 12%(38.5kB minified) है और सरल ABR processing के लिए अनुकूलित है
- SPF, HLS.js, Shaka, dash.js जैसे मौजूदा engines के साथ पूरी तरह compatible है, और जब जटिल DRM या advertising फीचर्स की ज़रूरत न हो तो बेहद हल्का configuration संभव है
Composition-based architecture
- v10 में State, UI, Media को अलग करने वाली component structure अपनाई गई है, जिससे हर हिस्से को स्वतंत्र रूप से बदला या हटाया जा सकता है
createPlayer()फ़ंक्शनfeaturesarray लेता है और केवल ज़रूरी फीचर्स शामिल करता है- उदाहरण: अगर audio फीचर की ज़रूरत नहीं है, तो
volume,muteकोड bundle में शामिल नहीं होगा
- UI हटाने के लिए सिर्फ skin को लोड न करना पर्याप्त है — यानी अनावश्यक code को पूरी तरह बाहर रखा जा सकता है
- न्यूनतम React configuration का उदाहरण 5kB से कम(gzipped) में चलता है और इसमें सिर्फ play/pause button शामिल है
UI customization और skin system
- v10, React और Web Components आधारित skin system प्रदान करता है और Base UI, Radix आदि से प्रेरित unstyled UI primitives संरचना अपनाता है
- हर UI component एक ही HTML element आउटपुट करता है, जिससे उसे सीधे नियंत्रित किया जा सकता है
- v8 में जहाँ timeline handle को CSS pseudo-elements से नियंत्रित किया जाता था, वहीं v10 में यह वास्तविक DOM element के रूप में दिया गया है, जिससे styling आसान हो जाती है
- बीटा में दो skins शामिल हैं
- Default skin: frosted जैसी सौंदर्य शैली और स्मूद animations
- Minimal skin: customization के लिए सरल आधार
- skin के error dialog design को भी एकरूप किया गया है, जिससे दृश्य गुणवत्ता बेहतर होती है
Preset system
- v10, उपयोग उद्देश्य के अनुसार preset की अवधारणा लाता है, जो skin, फीचर्स और media configuration को मिलाकर तुरंत इस्तेमाल योग्य player templates देता है
- Video preset: सामान्य web video के लिए
- Audio preset: podcast आदि के लिए audio-only
- Background video preset: background video के लिए, जिसमें controls और audio हटाए गए हैं
- preset तेज़ शुरुआत का आधार देते हैं, लेकिन साथ ही हर component को बदला जा सकता है, इसलिए पूरी extensibility बनी रहती है
- आगे चलकर education, short-form, creator platform के लिए अतिरिक्त presets जोड़े जाएंगे
AI-friendly design
- v10 का लक्ष्य ऐसी संरचना बनाना है जिसमें AI agents भी development में साथ काम कर सकें
- कम abstraction वाले components और unstyled UI primitives से code को समझना आसान होता है
- documentation navigation को बेहतर बनाने के लिए llms.txt फ़ाइल दी गई है, जिसमें framework-specific versions भी शामिल हैं
- सभी docs Markdown format में दिए गए हैं, ताकि AI बिना अनावश्यक HTML context के सीधे उन्हें उपयोग कर सके
- repository के भीतर AI skill sets के जरिए आगे चलकर user development support देने की योजना है
बीटा उपयोग गाइड
- API अभी स्थिर नहीं है, इसलिए औपचारिक रिलीज़ से पहले कुछ interfaces बदल सकते हैं
- अभी इसका फोकस बेसिक वेबसाइट playback functionality पर है; accessibility, subtitles, और विभिन्न formats का समर्थन संभव है, लेकिन settings menu जैसी सुविधाएँ अभी लागू नहीं हुई हैं
- GitHub issues और Discord feedback सक्रिय रूप से एकत्र किए जा रहे हैं
- मौजूदा version उपयोगकर्ताओं को migration guide जारी होने के बाद स्थानांतरण करने की सलाह दी गई है
आगे की roadmap
- 2026 के मध्य में औपचारिक रिलीज़(GA) का लक्ष्य
- Plyr, Vidstack, Media Chrome के स्तर की feature parity हासिल करने की योजना
- advertising support 2026 की दूसरी छमाही के लिए नियोजित है
- migration guide और अतिरिक्त presets उपलब्ध कराए जाएंगे
1 टिप्पणियां
Hacker News की राय
जो लोग जानना चाहते हों, उनके लिए बता दूँ कि इस वेबसाइट का syntax highlighting color theme “gruvbox” है
मुझे यह व्यक्तिगत रूप से बहुत पसंद है, लेकिन इसे ढूँढने में मुझे काफ़ी समय लगा
gruvbox GitHub लिंक
मैंने video.js कभी इस्तेमाल नहीं किया, लेकिन यह साइट या विज्ञापन मुझे ऐसे लगा जैसे उन लोगों के लिए हो जो पहले से परिचित हैं
पढ़ते समय मेरे मन में एक सवाल था: यह HTML video tag से अलग कैसे है? क्या बस controller अलग है?
आजकल video tag काफ़ी अच्छा हो गया है, लेकिन Video.js की अलग पहचान browser के बीच consistent styling, advanced features (analytics, DRM, 360-degree video आदि), और कई streaming formats का support (HLS, DASH आदि) जैसी चीज़ों से बनती है
आखिरकार video tag से भी यह बनाया जा सकता है, लेकिन ऐसा करते-करते आप अंत में खुद Video.js जैसा कुछ बना बैठते हैं
अगर आपको stable player या streaming features चाहिए, तो Video.js इस्तेमाल करना बेहतर है
संदर्भ के लिए, मैंने Georgia देश के लिए TV broadcast player बनाया था, जो 2009 के LG smart TV से लेकर नवीनतम browser तक support करता था
यह इसलिए महत्वपूर्ण है क्योंकि dynamic bitrate adjustment की ज़रूरत होती है। caching भी ज़्यादा efficient हो जाती है
WebVTT को लेकर क्या आजकल स्थिति बदल गई है, यह जानने की जिज्ञासा है
पहले मैंने subtitle rendering को customize करने की कोशिश की थी, लेकिन वह बहुत मुश्किल था
यह Web Component के रूप में क्यों जारी नहीं किया गया, यह जानने की जिज्ञासा है
मेरी नज़र में यह एकदम सही use case लगता है — क्योंकि इसमें meaningful object में built-in controls होते हैं
आखिर में React के लिए shim बनाकर उसे हल किया, लेकिन उससे दूसरी समस्याएँ पैदा हो गईं
VJS 10 में headless core + rendering layer संरचना के साथ एक practical middle ground निकाला गया
इसकी वजह से React components और Web Component दोनों का support मिलता है
media-chrome GitHub लिंक
Shadow DOM bugs या frameworks के बीच compatibility की वजह से, player से ज़्यादा समय environment setup पर लगने लगता है
ज़्यादातर users को इन बातों की परवाह नहीं होती। मुझे लगता है कि JS library + clean API कहीं बेहतर है
लेकिन React इस्तेमाल करने की वजह यह है कि tree-shaking के कारण सिर्फ़ ज़रूरी code ही शामिल किया जा सकता है
साधारण HTML में ऐसी optimization अभी भी कठिन है, इसलिए build pipeline एक तरह के Web Component generator की तरह काम करती है
मैंने अपने audio player को, जो Plyr इस्तेमाल करता था, Video.js में बदलने की कोशिश की, लेकिन default setup में कुछ feature gaps थे
1x से कम playback speed नहीं, mobile पर volume control नहीं, seek buttons नहीं, color customization मुश्किल, demos कम, आदि
अभी हमारा लक्ष्य Plyr आदि के साथ feature parity हासिल करना है, और GA timing के लिए इस साल के मध्य का लक्ष्य है
मुझे video hosting की ज़्यादा समझ नहीं है, लेकिन HTML5 video player का इस्तेमाल किया है
क्या server side पर video chunks को सीधे serve करने वाला endpoint बनाना पड़ता है?
अगर मैं ffmpeg से 2MB के हिस्सों में बाँटूँ, तो उन्हें कहाँ रखना बेहतर होगा? CDN? अपना server?
Video.js को सबसे smoothly चलाने के लिए कौन-सा setup सबसे अच्छा होगा?
यह Video.js के साथ अच्छी तरह काम करता है, और LG TV पर भी tag-based playback संभव होता है
server अगर Range requests support करता है, तो browser बाकी सब खुद संभाल लेता है
मैं DO Spaces जैसे object storage + CDN संयोजन का उपयोग करता हूँ, और यह अच्छी तरह काम करता है
encoding और segment splitting एक साथ करनी होती है (उदाहरण: ffmpeg का dash formatter)
audio और video segment की लंबाई मिलाने के लिए GOP calculator उपयोगी है
आम तौर पर, high-quality source से कई resolutions में encode करने के बाद, उसे HLS/DASH manifest के साथ S3 जैसी जगह पर अपलोड किया जाता है
player फिर एक manifest URL से सभी ज़रूरी resources ढूँढ लेता है
ब्लॉग पोस्ट सच में बहुत अच्छी तरह लिखी गई थी
पाठक को expert की तरह सम्मान देने वाली व्याख्या शैली बहुत प्रभावशाली लगी। काश इस तरह की product announcements और ज़्यादा हों
Steve बधाई!
पहले JW Player में काम करते समय Video.js की सादगी और theme system ने मुझे प्रभावित किया था
उम्मीद है यह version भी बड़ी सफलता हासिल करेगा
FOMS और कई conferences में JW team के साथ बातचीत करना बहुत अच्छा अनुभव था
video tech अभी भी काफ़ी सक्रिय क्षेत्र है, इसलिए कभी भी वापस आ जाइए
88% का आँकड़ा चौंकाने वाला है
जानना चाहूँगा कि सबसे बड़ा improvement point क्या था — शायद plugin system
यह भी जानना है कि rewrite के दौरान कहीं major integration features टूट तो नहीं गए
rewrite के दौरान हुए architecture changes और पुराने Video.js design की तुलना में क्या trade-offs रहे, यह जानने की जिज्ञासा है