वेबसाइट पर ट्रांसपेरेंट वीडियो (Safari सहित)

कौन से ब्राउज़र ट्रांसपेरेंट WebM सपोर्ट करते हैं?

Chromium ब्राउज़र और Firefox अल्फ़ा चैनल वाला WebM वीडियो चलाते हैं। Chrome 31 से Chrome, VP8 WebM में अल्फ़ा को मानता है और VP9 अल्फ़ा भी सपोर्ट करता है, और Edge को यह व्यवहार Chromium से मिलता है। Firefox भी VP9 अल्फ़ा सही ढंग से रेंडर करता है।

Safari इसका अपवाद है। वह काफ़ी समय से WebM चलाता है (Can I use के अनुसार macOS पर Safari 16 और iOS पर Safari 17.4 से पूरा सपोर्ट), लेकिन अल्फ़ा प्लेन हटा देता है। वीडियो चलता है, पर हर ट्रांसपेरेंट पिक्सेल अपारदर्शी हो जाता है।

मोबाइल पर सपोर्ट कम भरोसेमंद है। Jake Archibald के 2024 के टेस्ट में Android पर Chrome में एक अल्फ़ा बग था, जो उस समय Canary में ठीक हो चुका था, और Android पर Firefox कभी-कभी प्लेबैक में अटक जाता था। शिप करने से पहले असली डिवाइस पर टेस्ट करें।

Safari में मेरा ट्रांसपेरेंट WebM काला क्यों दिखता है?

क्योंकि Safari का WebM डिकोडर VP9 अल्फ़ा चैनल को नज़रअंदाज़ करता है। कलर फ़्रेम ठीक से डिकोड होते हैं, लेकिन अलग से रखा ट्रांसपेरेंसी डेटा फेंक दिया जाता है, इसलिए पीछे का पेज दिखने के बजाय बैकग्राउंड काला या ग्रे दिखता है।

यह WebKit की एक जानी-पहचानी कमी है, आपकी फ़ाइल की समस्या नहीं। WebKit bug 275908 के लिए एक पैच मई 2026 में pull request #64837 के रूप में सबमिट किया गया था। उसके विवरण में लिखा है: "the alpha plane data was discarded during parsing, causing transparent videos to play fully opaque." 12 अक्टूबर 2026 तक वह pull request अभी भी खुला है, इसलिए कोई भी रिलीज़ हुआ Safari वर्ज़न ट्रांसपेरेंट WebM रेंडर नहीं करता।

आज इसका हल कोई दूसरी WebM सेटिंग नहीं है। हल है एक दूसरी फ़ाइल, ऐसे फ़ॉर्मेट में जिसे Safari ट्रांसपेरेंसी के साथ रेंडर करता है: अल्फ़ा वाला HEVC। फिर हर ब्राउज़र को वह फ़ाइल चुनने दें जिसे वह सही दिखा सके, और नीचे दिया गया markup यही करता है।

ट्रांसपेरेंसी के लिए GIF पर न जाएँ। GIF सिर्फ़ एक पूरी तरह ट्रांसपेरेंट पैलेट इंडेक्स सपोर्ट करता है, इसलिए नरम किनारे, शैडो और anti-aliasing टेढ़ी-मेढ़ी किनारी में बदल जाते हैं, जैसा ऊपर की तुलना में दिखता है।

अल्फ़ा वाला HEVC क्या है?

अल्फ़ा वाला HEVC, H.265 (HEVC) वीडियो के साथ ट्रांसपेरेंसी चैनल रखने का Apple का तरीका है। Apple ने iOS 13, tvOS 13 और macOS Catalina में इसका प्लेबैक सपोर्ट शुरू किया, और इन सिस्टम पर Safari इसे सामान्य <video> element में चला सकता है।

यह फ़ाइल आमतौर पर hvc1 टैग वाली QuickTime .mov होती है। Apple का WWDC19 सेशन "HEVC Video with Alpha" AVFoundation (AVAssetWriter, AVAssetExportSession) और VideoToolbox से एनकोडिंग समझाता है। Compressor और बिल्ट-इन avconvert कमांड भी यही सिस्टम एनकोडर इस्तेमाल करते हैं।

दो व्यावहारिक बातें:

• सिर्फ़ Apple प्लेटफ़ॉर्म पर भरोसा किया जा सकता है। macOS पर Chrome इसे सिस्टम डिकोडर से डिकोड कर सकता है (अक्टूबर 2026 के हमारे टेस्ट में यह ट्रांसपेरेंट रेंडर हुआ), लेकिन Windows, Linux और Android पर Chrome और Firefox नहीं कर पाते, इसीलिए आपको WebM की ज़रूरत फिर भी है।
• यह अक्सर बड़ी होती है। Archibald के टेस्ट में वही क्लिप VP9 अल्फ़ा में 1.1 MB और HEVC अल्फ़ा में 3.4 MB थी। यह अनुपात कंटेंट और सेटिंग पर निर्भर करता है, इसलिए अपनी फ़ाइलें खुद मापें।

सामान्य H.264 MP4 में ट्रांसपेरेंसी बिल्कुल नहीं हो सकती। अगर कोई टूल "transparent MP4" देता है, तो देखें कि वह असल में कौन सा codec लिखता है।

कौन सा HTML markup हर ब्राउज़र में काम करता है?

एक <video> element इस्तेमाल करें, जिसमें दो <source> child हों। HEVC फ़ाइल सबसे पहले आनी चाहिए। ब्राउज़र वह पहला सोर्स लेते हैं जिसे वे चला सकें, और Safari VP9 चला सकता है, इसलिए अगर WebM पहले होती तो Safari उसे चुन लेता और ट्रांसपेरेंसी खो जाती।

<video autoplay muted loop playsinline width="480" height="480">
  <source src="/media/mascot-idle.mov"
          type='video/quicktime; codecs="hvc1.1.6.H120.b0"'>
  <source src="/media/mascot-idle.webm"
          type='video/webm; codecs="vp09.00.41.08"'>
</video>

हर attribute क्यों है:

• autoplay और muted: ब्राउज़र म्यूट ऑटोप्ले की अनुमति देते हैं। Chrome की पॉलिसी कहती है: "Muted autoplay is always allowed."
• playsinline: इसके बिना iPhone Safari वीडियो को पेज के अंदर चलाने के बजाय फ़ुलस्क्रीन में चलाता है।
• loop: क्लिप को GIF की तरह बार-बार चलाता है।
• width और height: जगह पहले से रिज़र्व करते हैं और लेआउट शिफ़्ट से बचाते हैं।

Safari HEVC codec string पहचानता है और पहले सोर्स पर रुक जाता है। Archibald की टेस्टिंग में Chrome और Firefox इसे छोड़कर WebM चलाते हैं। अगर बहुत पुराने ब्राउज़र के लिए आप बिना ट्रांसपेरेंसी वाला फ़ॉलबैक भी चाहते हैं, तो तीसरे सोर्स के रूप में MP4 जोड़ सकते हैं, ऐसे बैकग्राउंड पर जो आपके पेज से मेल खाता हो।

VP9 और HEVC अल्फ़ा को एनकोड कैसे करें?

ऐसे मास्टर से शुरू करें जिसमें पहले से अल्फ़ा हो, जैसे PNG सीक्वेंस या ProRes 4444 .mov। फिर हर फ़ॉर्मेट के लिए एक फ़ाइल बनाएँ।

VP9 alpha WebM (किसी भी प्लेटफ़ॉर्म पर)

ffmpeg -i master.mov -pix_fmt yuva420p -an \
  -c:v libvpx-vp9 -crf 45 -b:v 0 mascot-idle.webm

yuva420p पिक्सेल फ़ॉर्मेट ही अल्फ़ा प्लेन को बनाए रखता है। ज़्यादा CRF का मतलब है छोटी फ़ाइल और कम क्वालिटी। Archibald की script two-pass एनकोडिंग भी इस्तेमाल करती है, जो किसी तय क्वालिटी पर फ़ाइल साइज़ कम करने में मदद करती है।

HEVC alpha MOV (सिर्फ़ macOS)

avconvert -s master.mov -p PresetHEVCHighestQualityWithAlpha -o mascot-idle.mov

avconvert macOS के साथ आता है और Apple का अपना HEVC-with-alpha एनकोडर इस्तेमाल करता है; इसे अल्फ़ा वाला ऐसा मास्टर दें जिसे macOS पढ़ सके, जैसे ProRes 4444 .mov। अक्टूबर 2026 के हमारे टेस्ट में आउटपुट AVFoundation में ट्रांसपेरेंसी के साथ सही पढ़ा गया। ffmpeg के hevc_videotoolbox एनकोडर में भी -alpha_quality विकल्प है, लेकिन उसी टेस्ट में ffmpeg 7.1.1 से लिखी फ़ाइलें AVFoundation में नहीं खुलीं, इसलिए ffmpeg से बनी किसी भी HEVC फ़ाइल को शिप करने से पहले Safari में जाँच लें। Compressor और AVFoundation (AVAssetWriter) दूसरे भरोसेमंद रास्ते हैं।

दोनों में ऑडियो ट्रैक हटा दें (-an)। बिना आवाज़ वाली फ़ाइल छोटी होती है और सिर्फ़ muted attribute पर निर्भर रहे बिना ऑटोप्ले नियमों को पूरा करती है।

iPhone पर मेरा वीडियो ऑटोप्ले क्यों नहीं होता?

iOS Safari किसी <video autoplay> को तभी ऑटोप्ले करता है जब तीन शर्तें पूरी हों। वीडियो में ऑडियो ट्रैक न हो या वह म्यूट हो। वह स्क्रीन पर दिख रहा हो। iPhone पर उसे playsinline भी चाहिए, वरना प्लेबैक सिर्फ़ फ़ुलस्क्रीन में होता है। ये नियम WebKit के "New video policies for iOS" से आते हैं।

ऑटोप्ले को एक अनुरोध समझें, गारंटी नहीं। play() एक Promise लौटाता है, जो नियम पूरे न होने पर reject होता है, और MDN इसे हैंडल करने और एक play बटन देने की सलाह देता है:

const video = document.querySelector("video");
video.play().catch(() => {
  // NotAllowedError: show a static poster or a play button instead.
  video.controls = true;
});

हमेशा पहले फ़्रेम से मेल खाती poster इमेज सेट करें। यह वीडियो लोड होते समय और ऑटोप्ले रोके जाने पर दिखती है। ट्रांसपेरेंट PNG या WebP poster इस्तेमाल करें, ताकि फ़ॉलबैक में भी आर-पार दिखने वाला लुक बना रहे।

ट्रांसपेरेंट वीडियो फ़ाइलों को छोटा कैसे रखें?

अल्फ़ा वीडियो सामान्य (opaque) वीडियो से भारी होता है, क्योंकि इसमें एक अतिरिक्त प्लेन स्टोर होता है। कुछ आदतें इसे काबू में रखती हैं:

• लूप छोटे रखें। idle या attention स्टेट के लिए आमतौर पर 3-5 सेकंड का सीमलेस लूप काफ़ी होता है।
• डिस्प्ले के हिसाब से साइज़ रखें। उतने ही बड़े साइज़ पर encode करें जितना आप असल में दिखाते हैं। inline कैरेक्टर के लिए अक्सर 480-720 px काफ़ी है, 1080 px नहीं।
• टाइट क्रॉप करें। खाली ट्रांसपेरेंट हिस्सा भी बिट्स खर्च करता है।
• हर फ़ॉर्मेट के लिए क्वालिटी अलग से ट्यून करें। WebM के लिए CRF बढ़ाएँ और HEVC के लिए -q:v या -alpha_quality घटाएँ, जब तक किनारे टूटने न लगें, फिर एक कदम पीछे आएँ।
• फ़ोल्ड के नीचे के वीडियो लेज़ी लोड करें, preload="none" और एक poster इमेज के साथ।

संदर्भ के लिए, Charmotion सेट का एक 4 सेकंड, 1080×1080 idle लूप opaque MP4 के रूप में 208 KB, VP9-alpha WebM के रूप में 488 KB और HEVC-alpha MOV के रूप में 728 KB का होता है। उसी सेट की Rive फ़ाइल में सभी 17 एनिमेशन 40 KB में आ जाते हैं।

Windows, फीके दिखने वाले iPhone और MOV से WebM के बारे में क्या?

markup काम करने के बाद तीन समस्याएँ सामने आती हैं:

• HEVC फ़ाइल के लिए Mac नहीं है। Apple के encoder सिर्फ़ macOS पर चलते हैं। FFmpeg 8.0 में libx265 alpha encoding जोड़ी गई है, लेकिन उस पर भरोसा करने से पहले उसका आउटपुट Safari में टेस्ट करें। Windows पर HEVC चलाने के लिए ही Microsoft के पेड HEVC Video Extensions चाहिए, और वहाँ के ब्राउज़र वैसे भी HEVC ट्रांसपेरेंसी नहीं दिखाते।
• MOV को WebM में बदलना। ffmpeg ProRes 4444 से alpha पढ़ लेता है, लेकिन हमारे टेस्ट में ffmpeg 7.1.1 ने HEVC-alpha MOV फ़ाइलों को बिना alpha के decode किया। इसलिए पहले avconvert से ProRes 4444 में बदलें।
• iPhone पर ज़्यादा चमकीली या फीकी ट्रांसपेरेंसी। डेवलपर्स ने रिपोर्ट किया है कि iPhone और iPad पर ट्रांसपेरेंट हिस्से अपने पीछे की चीज़ों को ज़्यादा चमकीला कर देते हैं, और इसका कोई पक्का समाधान अभी नहीं मिला है; Safari के Web Inspector में फ़ाइल के color tags जाँचें और असली डिवाइस पर टेस्ट करें।

तीनों के लिए कमांड और विवरण ट्रांसपेरेंट MP4 और alpha वाला HEVC गाइड में हैं।

ट्रांसपेरेंट वीडियो की जगह Rive कब इस्तेमाल करें?

किसी एक सजावटी लूप, हीरो बैकग्राउंड या प्रोडक्ट शॉट के लिए ट्रांसपेरेंट वीडियो सही टूल है। यह बिना JavaScript के काम करता है और बाद में आसानी से बदला जा सकता है।

मुश्किल तब होती है जब कैरेक्टर को रिएक्ट करना हो। हर स्टेट के लिए फ़ाइलों का एक और जोड़ा बनता है, और उनके बीच स्विच करने के लिए source बदलना पड़ता है, जिससे फ़्लैश या अटकन हो सकती है। Rive फ़ाइल वेक्टर-आधारित होती है और canvas पर स्वाभाविक रूप से ट्रांसपेरेंट रहती है, और उसकी स्टेट मशीन एक ही फ़ाइल के अंदर idle, loading, success और error के बीच बदलती है।

इसकी कीमत player के रूप में चुकानी पड़ती है। Rive का वेब रनटाइम एक WASM module है, जो पैकेज के हिसाब से brotli-compressed होकर लगभग 222-648 KB का होता है (Rive की रनटाइम साइज़ टेबल के अनुसार); हम जो canvas-lite 2.44.0 पैकेज इस्तेमाल करते हैं, वह अक्टूबर 2026 में brotli के साथ लगभग 373 KB मापा गया, और पूरी साइट पर एक बार लोड होता है। यह खर्च तब वसूल होता है जब आप कई स्टेट या कई कैरेक्टर दिखाते हैं, एक सजावटी लूप के लिए नहीं। फ़ॉर्मेट-दर-फ़ॉर्मेट तुलना के लिए GIF vs WebM vs MP4 vs Lottie vs Rive देखें।

वेबसाइट पर ट्रांसपेरेंट वीडियो कैसे जोड़ें

1. एक alpha मास्टर एक्सपोर्ट करें. अपने एनिमेशन को ट्रांसपेरेंट बैकग्राउंड के साथ PNG sequence या ProRes 4444 .mov के रूप में रेंडर करें।
2. WebM encode करें. VP9-alpha .webm बनाने के लिए ffmpeg को -pix_fmt yuva420p -c:v libvpx-vp9 के साथ और बिना audio track के चलाएँ।
3. HEVC MOV encode करें. Mac पर, ProRes 4444 मास्टर पर avconvert को PresetHEVCHighestQualityWithAlpha preset के साथ चलाएँ, या Compressor या AVFoundation से alpha वाला HEVC एक्सपोर्ट करें।
4. दोनों source जोड़ें, पहले HEVC. एक ही <video> element के अंदर .mov source को .webm source से पहले रखें, ताकि Safari वह फ़ाइल चुने जिसे वह ट्रांसपेरेंसी के साथ रेंडर करता है।
5. playback attributes सेट करें. autoplay muted loop playsinline, width, height और एक ट्रांसपेरेंट poster इमेज जोड़ें।
6. असली डिवाइस पर टेस्ट करें. iPhone और Mac पर Safari, Android और डेस्कटॉप पर Chrome, और Firefox को हल्के और गहरे, दोनों तरह के बैकग्राउंड पर जाँचें।

अक्सर पूछे जाने वाले सवाल

क्या MP4 में ट्रांसपेरेंट बैकग्राउंड हो सकता है?

सामान्य H.264 MP4 में नहीं, क्योंकि उसमें अल्फ़ा चैनल नहीं होता। Chrome, Edge और Firefox के लिए VP9 WebM और Safari के लिए .mov में alpha वाला HEVC इस्तेमाल करें। ProRes 4444 में भी alpha होता है, लेकिन यह एडिटिंग फ़ॉर्मेट है और वेब पेज पर सर्व करने के लिए बहुत ज़्यादा बड़ा है।

क्या Safari कभी ट्रांसपेरेंट WebM सपोर्ट करेगा?

शायद। VP9 alpha के लिए एक WebKit patch (bug 275908, pull request #64837) मई 2026 में सबमिट हुआ था और 12 अक्टूबर 2026 तक खुला था। जब तक यह किसी stable Safari रिलीज़ में नहीं आता और पुराने वर्ज़न चलन से बाहर नहीं होते, तब तक alpha वाला HEVC पहले सर्व करते रहें।

क्या type attribute में codecs parameter ज़रूरी है?

इसकी ज़ोरदार सलाह दी जाती है। codec string से हर ब्राउज़र कुछ भी डाउनलोड करने से पहले तय कर लेता है कि वह फ़ाइल को सच में decode कर सकता है या नहीं, और इसी से source order भरोसेमंद तरीके से काम करता है। आमतौर पर इस्तेमाल होने वाली values हैं: HEVC .mov के लिए hvc1.1.6.H120.b0 और VP9 WebM के लिए vp09.00.41.08।

क्या ट्रांसपेरेंट वीडियो पेज की परफ़ॉर्मेंस को नुकसान पहुँचाता है?

पहुँचा सकता है, क्योंकि alpha वीडियो opaque वीडियो से बड़ा होता है। लूप छोटे रखें, डिस्प्ले साइज़ पर encode करें, फ़ोल्ड के नीचे preload="none" इस्तेमाल करें और poster दें। Chrome किसी वीडियो के poster या उसके पहले paint हुए फ़्रेम को LCP element मान सकता है, इसलिए अगर वीडियो आपके हीरो सेक्शन में है तो हल्का poster मायने रखता है।

इस गाइड से झटपट जवाब

• क्या Safari ट्रांसपेरेंट WebM सपोर्ट करता है?
• वेबसाइट पर ट्रांसपेरेंट वीडियो कैसे जोड़ें?
• अल्फ़ा वाला HEVC क्या है?
• क्या MP4 में ट्रांसपेरेंट बैकग्राउंड हो सकता है?
• iPhone पर मेरा वीडियो ऑटोप्ले क्यों नहीं होता?

स्रोत

• Alpha transparency in Chrome video, Chrome for Developers
• HEVC Video with Alpha (WWDC19 session 506), Apple Developer
• New video policies for iOS, WebKit
• WebKit pull request #64837: VP9 alpha support (bug 275908), WebKit on GitHub
• WebM video format, Can I use
• Video with alpha transparency on the web, Jake Archibald
• Autoplay guide for media and Web Audio APIs, MDN Web Docs
• Runtime sizes, Rive
• Faulty transparent video in iPhone browsers, Apple Developer Forums