कंटेंट पर जाएँ
charmotion
शुरू करें

WordPress में Lottie, Rive और वीडियो एनिमेशन कैसे जोड़ें

Charmotion टीम द्वारा · अपडेट:

गाइड का कवर illustration: WordPress में Lottie, Rive और वीडियो एनिमेशन कैसे जोड़ें, Charmotion के डेमो कैरेक्टर के साथ

WordPress में Lottie जोड़ने के लिए ऑफ़िशियल LottieFiles plugin इंस्टॉल करके उसका block डालें, या dotLottie web component को Custom HTML block में पेस्ट करें। Core WordPress वीडियो को native रूप से संभालता है: Video block autoplay, loop, mute और inline play कर सकता है। Rive के लिए MotionPlayer जैसा third-party plugin या Custom HTML embed चाहिए।

मुख्य बातें

  • core Video block में Autoplay, Loop, Muted, Play inline और Preload सेटिंग्स होती हैं।
  • WordPress core में Lottie या Rive block नहीं है; plugins या Custom HTML इस्तेमाल करें।
  • LottieFiles ने block editor के लिए बना एक ऑफ़िशियल plugin पब्लिश किया है।
  • Custom HTML में scripts के लिए unfiltered_html capability ज़रूरी है।
  • Muted और Play inline चालू करें, वरना फ़ोन पर ऑटोप्ले काम नहीं करेगा।

पहले से कोई कैरेक्टर या लोगो है? अपने कैरेक्टर को असली ऐप स्क्रीन में देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन। यह फ़्री है, आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।

क्या core Video block ऑटोप्ले और लूप कर सकता है?

हाँ। block editor के Video block में Autoplay, Loop, Muted, Play inline, Playback controls, Preload और poster image की सेटिंग्स हैं। इससे बिना किसी plugin के क्लासिक "GIF जैसा" लूपिंग एनिमेशन बन जाता है।

ऐसे बिना आवाज़ वाले लूप के लिए जो अपने आप शुरू हो:

  1. एक Video block जोड़ें और MP4 अपलोड करें या चुनें।
  2. Autoplay, Loop, Muted और Play inline चालू करें।
  3. अगर वीडियो सिर्फ़ सजावट के लिए है, तो Playback controls बंद करें।
  4. पेज पर नीचे (below the fold) वाले वीडियो के लिए Preload को Metadata या None पर रखें, और एक poster image चुनें।

Muted और Play inline वैकल्पिक नहीं हैं। ब्राउज़र सिर्फ़ muted वीडियो ही ऑटोप्ले करते हैं, और iPhone Safari वीडियो को inline सिर्फ़ playsinline attribute के साथ चलाता है, जिसे Play inline सेटिंग जोड़ती है।

Video block एक ही फ़ाइल लेता है, इसलिए यह वह दो-source सेटअप नहीं दे सकता जिसकी ज़रूरत Safari और Chrome दोनों में ट्रांसपेरेंट वीडियो के लिए होती है। इसे मिलते-जुलते बैकग्राउंड रंग पर MP4 के साथ इस्तेमाल करें, या ट्रांसपेरेंट वर्ज़न के लिए Custom HTML वाला सेक्शन देखें।

Block editor में Lottie कैसे जोड़ें?

WordPress core में कोई Lottie block नहीं है। सबसे आसान तरीका आधिकारिक LottieFiles plugin है, जो block editor के लिए बनाया गया है:

  1. Plugins में जाकर Add New खोलें, "LottieFiles" सर्च करें और LottieFiles द्वारा जारी plugin इंस्टॉल करें।
  2. इसे activate करें, फिर इसका block किसी post या page में जोड़ें।
  3. अपने LottieFiles अकाउंट से एनिमेशन चुनें या file URL दें, और loop व autoplay सेट करें।

Plugins अपनी scripts और settings screens जोड़ते हैं, इसलिए किसी खास option पर निर्भर होने से पहले plugin के पेज पर देखें कि मौजूदा वर्ज़न क्या सपोर्ट करता है।

अगर आप plugin नहीं जोड़ना चाहते, तो dotLottie web component एक Custom HTML block में काम करता है, जैसा नीचे दिखाया गया है। दोनों में से कोई भी तरीका हो, Lottie का इस्तेमाल उन illustrations के लिए करें जो शुरू से अंत तक चलती हैं, जैसे empty-state ड्रॉइंग या एनिमेटेड आइकन। स्टेट बदलने वाले मैस्कॉट के लिए आमतौर पर Rive file बेहतर रहती है।

17 एनिमेशन वाले एक सेट के असली फ़ाइल साइज़ का बार चार्ट: Rive 40 KB, जबकि MP4 2.6 MB, ट्रांसपेरेंट WebM 6.1 MB, GIF 8.0 MB और HEVC MOV 9.4 MB
एक असली Charmotion सेट (Pip) के फ़ाइल साइज़। वीडियो साइज़ एक 4 सेकंड के एनिमेशन के हैं।

क्या WordPress के लिए कोई Rive plugin है?

WordPress core में कोई Rive block नहीं है और अक्टूबर 2026 तक Rive द्वारा जारी कोई plugin भी नहीं है। एक third-party plugin, MotionPlayer for Rive, एक block जोड़ता है जिससे आप Media Library से .riv फ़ाइलें अपलोड या चुन सकते हैं; इसमें Rive का WebGL2 web runtime शामिल है। किसी भी third-party plugin को production site पर इंस्टॉल करने से पहले उसकी update history और सपोर्ट जाँच लें।

विकल्प है Rive के अपने web runtime के साथ Custom HTML block, जो आपको पूरा कंट्रोल देता है, जिसमें मूड और ट्रिगर के लिए data binding भी शामिल है।

एक व्यावहारिक अड़चन: WordPress सिर्फ़ अपनी allowed list वाले file types के अपलोड स्वीकार करता है, और .riv व .lottie स्टैंडर्ड types नहीं हैं। इस format के लिए बना plugin आमतौर पर इसे संभाल लेता है। नहीं तो फ़ाइल को ऐसी जगह host करें जो आपके कंट्रोल में हो, जैसे आपका theme folder या CDN, और उसका URL इस्तेमाल करें।

अगर आप पूरी साइट पर Rive इस्तेमाल करना चाहते हैं, तो एक ही कैरेक्टर फ़ाइल कई जगहों पर काम आती है: header में idle, search page पर thinking, contact form के thank-you मैसेज पर success रिएक्शन। Rive क्या है, यह गाइड स्टेट मशीन मॉडल समझाती है।

एक वेबसाइट मॉकअप: बाईं ओर हेडलाइन और हीरो में Rive फ़ाइल से चलता एनिमेटेड मैस्कॉट Kiko
वेबसाइट के हीरो सेक्शन में मैस्कॉट: हेडलाइन के बगल में canvas में एक छोटी Rive फ़ाइल।

आप जो भी तरीका चुनें, block में या उसकी CSS में canvas को तय width और height दें। Rive एक canvas पर ड्रॉ करता है जिसका अपना कोई साइज़ नहीं होता, इसलिए dimensions के बिना कुछ themes में यह सिकुड़कर गायब हो सकता है या full-width column में फैल सकता है।

Custom HTML block से Rive या Lottie कैसे एम्बेड करें?

Custom HTML block सीधा markup स्वीकार करता है। WordPress 7.0 से इसमें HTML, CSS और JavaScript के लिए अलग panels हैं, लेकिन CSS और JavaScript panels सिर्फ़ उन users को दिखते हैं जिनके पास unfiltered_html capability है। बाकी users के लिए WordPress content को wp_kses() से गुज़ारता है और save करते समय <script> और <iframe> जैसे tags हटा देता है।

dotLottie:

<dotlottie-wc src="/animations/confetti.lottie" autoplay loop
  style="width: 320px; height: 320px"></dotlottie-wc>
<script type="module"
  src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

Rive, load होते ही मूड सेट के साथ:

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.44.2"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "/wp-content/uploads/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
</script>
<script>
  r.on(rive.EventType.Load, () => {
    r.viewModelInstance.number("mood").value = 2; // wave
  });
</script>

ट्रांसपेरेंट वीडियो, Safari समेत:

<video autoplay muted loop playsinline preload="metadata"
       width="400" height="400" poster="/mascot-poster.png">
  <!-- Safari: HEVC with alpha must come first -->
  <source src="/mascot.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
  <!-- Chrome, Edge, Firefox: VP9 with alpha -->
  <source src="/mascot.webm" type="video/webm; codecs=vp09.00.41.08">
</video>

Charmotion एक अपलोड से तीनों एक्सपोर्ट करता है: mood नंबर और रिएक्शन ट्रिगर वाली .riv, ट्रांसपेरेंट WebM और MOV, साथ में MP4 और GIF। कोर Video ब्लॉक के लिए MP4 और GIF काफ़ी हैं; हर फ़ाइल पेड प्लान के साथ मिलती है।

WordPress एनिमेशन को पेज धीमा करने से कैसे रोकें?

एनिमेशन plugins और embeds अक्सर अपनी scripts हर पेज पर लोड करते हैं। कुछ जाँचें इस खर्च को सीमित रखती हैं:

  • Players सिर्फ़ वहीं लोड करें जहाँ ज़रूरत हो। पूरी साइट के header script के बजाय उसी खास पेज पर Custom HTML block को तरजीह दें। अगर plugin इस्तेमाल करते हैं, तो देखें कि क्या वह assets सिर्फ़ उन्हीं पेजों पर enqueue करता है जहाँ उसका block है।
  • जो वीडियो load पर दिखते नहीं, उनके लिए Preload: None या Metadata इस्तेमाल करें, और हमेशा poster image सेट करें।
  • GIF की जगह MP4 या WebM चुनें। web.dev के उदाहरण में 3.7 MB का GIF, 551 KB का MP4 और 341 KB का WebM बन गया।
  • हर एनिमेशन का साइज़ तय करें। canvases, players और वीडियो पर width और height सेट करें ताकि load होते समय layout शिफ़्ट न हो।
  • मोशन कम करें सेटिंग का ध्यान रखें। अपनी Custom HTML script में prefers-reduced-motion चेक जोड़ें और यह सेट होने पर ऑटोप्ले रोकें या छोड़ दें।

अपने caching या optimization plugin को चालू रखकर टेस्ट करें। कुछ plugins scripts को ऐसे combine या defer करते हैं कि web components और module scripts टूट जाते हैं, इसलिए अगर एनिमेशन दिखना बंद हो जाए तो player script को exclude करें।

WordPress पेज में लूपिंग एनिमेशन कैसे जोड़ें

  1. फ़ॉर्मेट चुनें. सिंपल लूप के लिए MP4, वेक्टर illustration के लिए Lottie file, या इंटरैक्टिव कैरेक्टर के लिए .riv इस्तेमाल करें।
  2. वीडियो के लिए Video block जोड़ें. MP4 अपलोड करें और Autoplay, Loop, Muted और Play inline चालू करें, फिर poster image सेट करें।
  3. Lottie के लिए plugin या embed जोड़ें. आधिकारिक LottieFiles plugin इंस्टॉल करें, या dotLottie web component को Custom HTML block में पेस्ट करें।
  4. Rive के लिए plugin या embed जोड़ें. Rive block plugin इस्तेमाल करें, या Rive web runtime और अपनी hosted .riv के साथ Custom HTML block जोड़ें।
  5. permissions और स्पीड जाँचें. पक्का करें कि scripts के लिए आपके role के पास unfiltered_html है, फिर caching चालू रखकर page speed टेस्ट करें।

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

WordPress ने मेरा script tag क्यों हटा दिया?

शायद आपके user role के पास unfiltered_html capability नहीं है। ऐसे में WordPress Custom HTML को wp_kses() से sanitize करता है और save करते समय <script> और <iframe> tags हटा देता है। किसी administrator से embed जुड़वाएँ, या raw script की जगह ऐसा plugin block इस्तेमाल करें जो आपके लिए player लोड करे।

क्या मैं Media Library में .riv या .lottie फ़ाइल अपलोड कर सकता हूँ?

कई सेटअप में डिफ़ॉल्ट रूप से नहीं, क्योंकि WordPress सिर्फ़ अपनी allowed list वाले file types स्वीकार करता है। इस format के लिए बना plugin आमतौर पर अपलोड संभाल लेता है। नहीं तो फ़ाइल को अपने theme folder या CDN पर host करें और उसका URL इस्तेमाल करें।

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

Video block की सेटिंग्स में Muted और Play inline चालू करें। मोबाइल ब्राउज़र सिर्फ़ muted वीडियो ऑटोप्ले करते हैं, और iPhone Safari inline सिर्फ़ playsinline के साथ चलाता है। Low Power Mode फिर भी ऑटोप्ले रोक सकता है, इसलिए ऐसी poster image सेट करें जो अपने आप में ठीक लगे।

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

स्रोत

संबंधित गाइड