रिएक्ट में वीडियो प्लेयर कैसे बनाएं

रिएक्ट में एक वीडियो प्लेयर बनाना एक चुनौतीपूर्ण काम लग सकता है। लेकिन सही उपकरण और तकनीकों के साथ, आप सापेक्ष आसानी से ऐसा कर सकते हैं।

रिएक्ट में वीडियो प्लेयर बनाने के दो तरीके हैं: बिल्ट-इन सुविधाओं का उपयोग करना और तीसरे पक्ष के पुस्तकालयों का उपयोग करना।

प्रतिक्रिया में एक वीडियो प्लेयर बनाना

रिएक्ट वीडियो प्लेयर बनाने से पहले, सुनिश्चित करें कि आपको HTML, CSS और JavaScript की बुनियादी समझ है।

से शुरू एक बुनियादी रिएक्ट ऐप बनाना निम्नलिखित वीडियो प्लेयर कार्यक्षमता को जोड़ने के लिए।

अंतर्निर्मित सुविधाओं का उपयोग करना (प्रतिक्रिया हुक)

रिएक्ट में वीडियो प्लेयर बनाने का पहला विकल्प बिल्ट-इन सुविधाओं का उपयोग करना है।

प्लेयर घटक बनाकर प्रारंभ करें जो वीडियो और उसके सभी नियंत्रणों को प्रदर्शित करेगा। ऐसा करने के लिए, "Player.js" नामक फ़ाइल बनाएं और निम्न कोड जोड़ें:

आयात प्रतिक्रिया से 'प्रतिक्रिया';

कॉन्स्ट प्लेयर = () => {
वापस करना (
<डिव

instagram viewer

>
<वीडियो चौड़ाई ="100%" ऊँचाई ="100%" को नियंत्रित करता है>
<स्रोत स्रोत ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" टाइप ="वीडियो/mp4" />
</video>
</div>
)
}

निर्यातगलती करना खिलाड़ी;

यह कोड रिएक्ट लाइब्रेरी को इम्पोर्ट करता है और एक प्लेयर कंपोनेंट बनाता है। यह "सत्य" पर सेट नियंत्रण विशेषता के साथ एक वीडियो तत्व भी जोड़ता है। यह मूल वीडियो प्लेयर को पेज में जोड़ देगा।

अगला, प्ले / पॉज़ बटन जोड़ें। ऐसा करने के लिए, आपको खिलाड़ी घटक में कोड की कुछ पंक्तियाँ जोड़नी होंगी। निम्नलिखित कोड को Player.js फ़ाइल में जोड़ें:

आयात प्रतिक्रिया, {useState, useRef} से 'प्रतिक्रिया';

कॉन्स्ट प्लेयर = () => {
कॉन्स्ट [isPlaying, setIsPlaying] = useState(असत्य);
कॉन्स्ट videoRef = useRef (व्यर्थ);

कॉन्स्ट टॉगलप्ले = () => {
अगर (खेल रहा है) {
वीडियोसंदर्भ।मौजूदा।रोकना();
} अन्य {
वीडियोसंदर्भ।मौजूदा।खेल();
}
सेटइजप्लेइंग (!इजप्लेइंग);
};

वापस करना (
<डिव>
<वीडियो
रेफ = {वीडियोरेफ}
चौड़ाई ="100%"
ऊँचाई ="100%"
को नियंत्रित करता है
>
<स्रोत स्रोत ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" टाइप ="वीडियो/mp4" />
</video>
<बटन ऑनक्लिक = {टॉगलप्ले}>
{खेल रहे है? "रोकना": "खेल"}
</button>
</div>
)
}

निर्यातगलती करना खिलाड़ी;

यह कोड उपयोग करता है useState और useRef हुक वीडियो की स्थिति पर नज़र रखने के लिए (चाहे वह चल रहा हो या रुका हुआ हो) और वीडियो तत्व का संदर्भ। यह एक टॉगलप्ले फ़ंक्शन भी जोड़ता है जो वीडियो चलाएगा और रोक देगा। बटन तत्व टॉगलप्ले फ़ंक्शन को ट्रिगर करेगा।

अंतिम चरण प्रगति पट्टी को जोड़ना है। ऐसा करने के लिए, आपको Player.js फ़ाइल में कोड की कुछ और पंक्तियाँ जोड़नी होंगी। निम्नलिखित जोड़ें:

आयात प्रतिक्रिया, {useState, useRef} से 'प्रतिक्रिया';

कॉन्स्ट प्लेयर = () => {
कॉन्स्ट [isPlaying, setIsPlaying] = useState(असत्य);
कॉन्स्ट [प्रगति, सेटप्रोग्रेस] = उपयोगस्टेट (0);
कॉन्स्ट videoRef = useRef (व्यर्थ);

कॉन्स्ट टॉगलप्ले = () => {
अगर (खेल रहा है) {
वीडियोसंदर्भ।मौजूदा।रोकना();
} अन्य {
वीडियोसंदर्भ।मौजूदा।खेल();
}
सेटइजप्लेइंग (!इजप्लेइंग);
};

कॉन्स्ट संभाल प्रगति = () => {
कॉन्स्ट अवधि = videoRef.current.duration;
कॉन्स्ट वर्तमान समय = videoRef.current.currentTime;
कॉन्स्ट प्रगति = (वर्तमान समय / अवधि) * 100;
सेटप्रोग्रेस (प्रगति);
};
वापस करना (
<डिव>
<वीडियो
ऑनटाइमअपडेट = {हैंडल प्रोग्रेस}
रेफ = {वीडियोरेफ}
चौड़ाई ="100%"
ऊँचाई ="100%"
को नियंत्रित करता है
>
<स्रोत स्रोत ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" टाइप ="वीडियो/mp4" />
</video>
<डिव>
<बटन ऑनक्लिक = {टॉगलप्ले}>
{खेल रहे है? "रोकना": "खेल"}
</button>
<प्रगति मूल्य = {प्रगति} अधिकतम ="100" />
</div>
</div>
)
}

निर्यातगलती करना खिलाड़ी;

यह कोड हैंडल प्रोग्रेस फ़ंक्शन जोड़ता है। यह फ़ंक्शन प्रगति बार को अपडेट करेगा। यह वीडियो तत्व में एक ऑनटाइमअपडेट ईवेंट श्रोता भी जोड़ता है जो हैंडलप्रोग्रेस फ़ंक्शन को ट्रिगर करेगा। अंत में, यह पृष्ठ पर एक प्रगति तत्व जोड़ता है जिसमें मूल्य और अधिकतम गुण क्रमशः प्रगति और 100 पर सेट होते हैं।

तृतीय-पक्ष लाइब्रेरी का उपयोग करना

रिएक्ट में वीडियो प्लेयर बनाने का दूसरा विकल्प थर्ड-पार्टी लाइब्रेरी का उपयोग करना है। कई पुस्तकालय उपलब्ध हैं, लेकिन कुछ सबसे लोकप्रिय हैं रिएक्टप्लेयर और रिएक्ट-मीडिया-प्लेयर।

रिएक्टप्लेयर

ReactPlayer एक सरल, हल्की लाइब्रेरी है जो आपको कोड की कुछ पंक्तियों के साथ एक वीडियो प्लेयर बनाने की अनुमति देती है। इसे स्थापित करने के लिए, अपने टर्मिनल में निम्न कमांड चलाएँ:

NPM स्थापित करना प्रतिक्रिया-खिलाड़ी

एक बार इंस्टॉल हो जाने पर, आप इसे इस तरह उपयोग कर सकते हैं:

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात रिएक्टप्लेयर से 'प्रतिक्रिया-खिलाड़ी';

कॉन्स्ट प्लेयर = () => {
वापस करना (
<रिएक्टप्लेयर
यूआरएल ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
चौड़ाई ="100%"
ऊँचाई ="100%"
को नियंत्रित करता है
/>
)
}

निर्यातगलती करना खिलाड़ी;

यह कोड रिएक्टप्लेयर घटक को रिएक्शन-प्लेयर लाइब्रेरी से आयात करता है और इसे पेज पर जोड़ता है। यह यूआरएल, चौड़ाई, ऊंचाई और नियंत्रण विशेषताओं को सेट करता है। इनमें से प्रत्येक पैरामीटर को एक-एक करके देखें:

• यूआरएल: यह उस वीडियो का URL है जिसे आप चलाना चाहते हैं।
• चौड़ाई: यह वीडियो प्लेयर की चौड़ाई है।
• ऊंचाई: यह वीडियो प्लेयर की ऊंचाई है।
• नियंत्रण: यह एक बूलियन विशेषता है जो निर्धारित करती है कि वीडियो प्लेयर में नियंत्रण होगा या नहीं।

प्रतिक्रिया-वीडियो-जेएस-प्लेयर

प्रतिक्रिया-वीडियो-जेएस-प्लेयर एक और सरल, हल्का पुस्तकालय है जो आपको कोड की कुछ पंक्तियों के साथ एक वीडियो प्लेयर बनाने की अनुमति देता है। इसे स्थापित करने के लिए, अपने टर्मिनल में निम्न कमांड चलाएँ:

NPM स्थापित करना प्रतिक्रिया-वीडियो-जेएस-प्लेयर

एक बार इंस्टॉल हो जाने पर, आप इसे इस तरह उपयोग कर सकते हैं:

आयात प्रतिक्रिया से "प्रतिक्रिया";
आयात वीडियो प्लेयर से "प्रतिक्रिया-वीडियो-जेएस-प्लेयर";

कॉन्स्ट प्लेयर = () => {
वापस करना (
<वीडियो प्लेयर
चौड़ाई ="100%"
ऊँचाई ="100%"
स्रोत ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
को नियंत्रित करता है
/>
)
}

निर्यातगलती करना खिलाड़ी;

यह कोड वीडियोप्लेयर घटक को प्रतिक्रिया-वीडियो-जेएस-प्लेयर लाइब्रेरी से आयात करता है और इसे पृष्ठ पर जोड़ता है।

अतिरिक्त वीडियो प्लेयर सुविधाएँ

आप अपने वीडियो प्लेयर में अतिरिक्त सुविधाएं जोड़ सकते हैं, जैसे:

1. एक पोस्टर जोड़ना: आप छवि के यूआरएल में वीडियो तत्व की पोस्टर विशेषता सेट करके अपने वीडियो प्लेयर में एक पोस्टर छवि जोड़ सकते हैं।
2. पाशन: आप वीडियो तत्व की लूप विशेषता को "सत्य" पर सेट करके अपने वीडियो को लूप कर सकते हैं।
3. म्यूट किया गया: आप वीडियो तत्व की म्यूट विशेषता को "सही" पर सेट करके अपने वीडियो को म्यूट कर सकते हैं।
4. स्वत: प्ले: आप वीडियो तत्व की ऑटोप्ले विशेषता को "सही" पर सेट करके अपने वीडियो को ऑटोप्ले कर सकते हैं।

आप वीडियो प्लेयर में अपने स्वयं के कस्टम नियंत्रण भी जोड़ सकते हैं। ऐसा करने के लिए, आपको ईवेंट श्रोताओं को वीडियो तत्व में जोड़ना होगा और वीडियो को नियंत्रित करने के लिए फ़ंक्शन लिखना होगा।

एक वीडियो प्लेयर के साथ उपयोगकर्ता जुड़ाव बढ़ाएँ

सही टूल और तकनीकों के साथ, आप रिएक्ट में आसानी से एक वीडियो प्लेयर बना सकते हैं। उपयोगकर्ता जुड़ाव बढ़ाने के लिए आप अतिरिक्त सुविधाएँ भी जोड़ सकते हैं। मीडिया प्लेयर आपकी वेबसाइट या एप्लिकेशन पर उपयोगकर्ता जुड़ाव बढ़ाने का एक शानदार तरीका है।

अपनी साइट पर एक वीडियो प्लेयर जोड़ने के बाद, यह देखने के लिए उपयोगकर्ता जुड़ाव को ट्रैक करना सुनिश्चित करें कि इसका वांछित प्रभाव हो रहा है या नहीं। आप यह देखने के लिए A/B परीक्षण भी परिनियोजित कर सकते हैं कि वीडियो प्लेयर जोड़ने से रूपांतरण दर बढ़ती है या नहीं।