🎎 📬 🤷🏿 अपना खुद का एचटीएमएल 5 वीडियो प्लेयर कैसे बनाएं 🤵🏻 ⏳ 👨‍🎤

इससे पहले, हमने पहले से ही एचटीएमएल 5 ऑडियो और वीडियो का उपयोग करने के सामान्य मुद्दों को देखा और विवरण में गोता लगाने लगे, यह निर्धारित करने के कार्य के साथ शुरू हुआ कि क्या ब्राउज़र वांछित कोडेक का समर्थन करता है । आज हम HTML5 वीडियो का उपयोग करके अपने वीडियो प्लेयर बनाने का कार्य देखेंगे।

आपको याद दिला दूं कि प्लेबैक को नियंत्रित करने के लिए वीडियो तत्व पहले से ही नियंत्रण का आवश्यक सेट प्रदान करता है। प्लेबैक कंट्रोल पैनल दिखाई देने के लिए, बस नियंत्रण विशेषता निर्दिष्ट करें।

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

हालांकि, जैसा कि मैंने परिचयात्मक लेख में उल्लेख किया है, मानक नियंत्रण के साथ एक समस्या है, जो इस तथ्य में निहित है कि वे गैर-मानक दिखते हैं। दूसरे शब्दों में, वे प्रत्येक ब्राउज़र में अलग दिखते हैं (आप उदाहरण के रूप में ietestdrive.com पर वीडियो प्रारूप समर्थन का उपयोग करके विभिन्न ब्राउज़रों में नियंत्रण कैसे देख सकते हैं - बस इसे दो या तीन अलग-अलग ब्राउज़रों में खोलें)।

प्लेबैक प्रबंधन एपीआई

वीडियो के साथ काम करने के लिए HTML5 मानक DOM - HTMLVideoElement में एक नया इंटरफ़ेस पेश करता है, जो बदले में HTMLMediaElement इंटरफ़ेस को इनहेरिट करता है।

HTMLMediaElement इंटरफ़ेस

यह मीडिया तत्वों (ऑडियो और वीडियो) दोनों के लिए एक सामान्य इंटरफ़ेस है जो मीडिया सामग्री के साथ काम करने की बुनियादी क्षमताओं तक पहुंच का वर्णन करता है: सामग्री स्रोत का नियंत्रण, प्लेबैक नियंत्रण, ध्वनि स्तर में परिवर्तन और त्रुटि से निपटने। मुख्य गुण और तरीके जिनकी हमें आवश्यकता होगी:

नेटवर्क स्थिति और उपलब्धता
src - link (url) बजाने वाली सामग्री के लिए
शौकीन - वीडियो के बफ़र्ड टुकड़े

प्लेबैक और नियंत्रण
वर्तमान समय - वर्तमान खेल समय (सेकंड)
अवधि - मीडिया सामग्री की अवधि (सेकंड)।
रोका गया - क्या प्लेबैक रोका गया है
समाप्त - क्या प्लेबैक समाप्त हुआ
मौन - ध्वनि चालू / बंद करें
वॉल्यूम - ध्वनि स्तर [0, 1]
play () - खेलना शुरू करें
ठहराव () - ठहराव

घटनाओं
oncanplay - आप खेलना शुरू कर सकते हैं
ontimeupdate - खेलने की स्थिति बदल गई
ऑनप्ले - रनिंग प्लेयर
onpause - ठहराव दबाया हुआ
onेंडेड - प्लेबैक समाप्त हो गया है

महत्वपूर्ण: ये HTMLMediaElement इंटरफ़ेस के माध्यम से निर्धारित सभी विधियों और गुणों से बहुत दूर हैं।

HTMLVideoElement इंटरफ़ेस

वीडियो ऑडियो से कई अतिरिक्त गुणों में भिन्न है:
चौड़ाई और ऊंचाई - वीडियो चलाने के लिए कंटेनर की चौड़ाई और ऊंचाई;
वीडियोवाइट और वीडियोहाइट - वीडियो की चौड़ाई और ऊंचाई का आंतरिक मूल्य, यदि आकार ज्ञात नहीं हैं, तो 0 के बराबर;
पोस्टर - वीडियो के लिए एक लिंक जो प्रदर्शित किया जा सकता है जबकि वीडियो उपलब्ध नहीं है (आमतौर पर यह एक है
पहले गैर-खाली फ्रेम से)।

चौड़ाई / ऊंचाई और वीडियोविडियो / वीडियोहाइट के बीच का अंतर यह है कि उत्तरार्द्ध वीडियो की अपनी विशेषताएं हैं, विशेष रूप से, पहलू अनुपात और अन्य विशेषताओं को ध्यान में रखते हुए, जबकि वीडियो कंटेनर किसी भी आकार (बड़े, छोटे, एक अलग अनुपात के साथ हो सकता है) )।

खेलते हैं और रोकते हैं

हम एक सरल कार्य के साथ अपने स्वयं के वीडियो प्लेयर का निर्माण शुरू करेंगे: हम सीखेंगे कि वीडियो प्लेबैक कैसे शुरू करें और प्लेबैक बंद करें। ऐसा करने के लिए, हमें प्ले () और पॉज़ () विधियों और कई गुणों की आवश्यकता है जो वीडियो स्ट्रीम की वर्तमान स्थिति का वर्णन करते हैं (हम jQuery लाइब्रेरी का उपयोग भी करेंगे, इसे कनेक्ट करना न भूलें)।

सबसे पहले, हमें एक वीडियो तत्व की आवश्यकता है जिसे हम नियंत्रित करना चाहते हैं, और एक तत्व जिसे हम वर्तमान स्थिति को नियंत्रित करने के लिए क्लिक कर सकते हैं:

 <div> <video id="myvideo" width="480" height="270" poster="poster.gif" > <source src="trailer_480p.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /> <source src="trailer_480p.webm" type='video/webm; codecs="vorbis,vp8"'/> </video> </div> <div id="controls"> <span id="playpause" class="paused" >Play</span> </div>

 #controls span { display:inline-block; } #playpause { background:#eee; color:#333; padding:0 5px; font-size:12pt; text-transform:uppercase; width:50px; }

बटन की स्थिति (रुका हुआ) और कार्रवाई (नाटक) को प्राप्त करने पर ध्यान दें।

अब हमें थोड़ा js-code जोड़ने की आवश्यकता है ताकि प्ले बटन पर क्लिक करने से इसकी स्थिति बदल जाए और तदनुसार वीडियो क्लिप या पोज़ शुरू हो जाए:

 $(document).ready(function(){ var controls = { video: $("#myvideo"), playpause: $("#playpause") }; var video = controls.video[0]; controls.playpause.click(function(){ if (video.paused) { video.play(); $(this).text("Pause"); } else { video.pause(); $(this).text("Play"); } $(this).toggleClass("paused"); }); });

यदि आप चाहें, तो आप तुरंत नियंत्रण बटन और उनके विभिन्न राज्यों के लिए कई सीएसएस शैली जोड़ सकते हैं और ...

... ऐसा लगता है कि सब कुछ पहले से ही महान काम करता है, लेकिन यह वहाँ नहीं था! कुछ छोटी चीजें हैं जिन पर हमें भी विचार करने की जरूरत है।

पहले खेलते हैं

सबसे पहले, हमें वीडियो क्लिप के अंत को सही ढंग से संसाधित करने की आवश्यकता है (जब तक, निश्चित रूप से, इसे लूप किया जाता है), और उस समय हमें नियंत्रण बटन को स्विच करने की आवश्यकता होती है ताकि "ठहराव" स्थिति के बजाय एक "प्ले" स्थिति हो:

 video.addEventListener("ended", function() { video.pause(); controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); });

प्रसंग मेनू

दूसरे, ब्राउज़र आमतौर पर संदर्भ मेनू के माध्यम से प्लेबैक को नियंत्रित करने की क्षमता जोड़ते हैं। इसका मतलब है कि उपयोगकर्ता, आम तौर पर बोल रहा है, हमारे नियंत्रणों को दरकिनार करके कुछ बदल सकता है। आपको इस क्षण को भी पकड़ना चाहिए और नियंत्रण की उपस्थिति में आवश्यक बदलाव करना चाहिए। ऐसा करने के लिए, बस ऑनप्ले और ऑनपॉइंट घटनाओं की सदस्यता लें।

 video.addEventListener("play", function() { controls.playpause.text("Pause"); controls.playpause.toggleClass("paused"); }); video.addEventListener("pause", function() { controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); });

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

 var controls = { ... togglePlayback: function() { (video.paused) ? video.play() : video.pause(); } ... }; controls.playpause.click(function(){ controls.togglePlayback(); });

क्लिक करने योग्य वीडियो

अंत में, निश्चित रूप से, हम चाहते हैं कि प्लेबैक और ठहराव स्वयं वीडियो पर क्लिक करके स्विच किया जाए, इसलिए हमें कुछ और लाइनें जोड़ने की आवश्यकता है:

 controls.video.click(function() { controls.togglePlayback(); });

वर्तमान परिणाम:

प्रगति

अब प्लेबैक की प्रगति प्रदर्शित करने के लिए आगे बढ़ते हैं। पहले आपको कुछ तत्वों को जोड़ने की आवश्यकता है जो वर्तमान स्थिति को प्रदर्शित करने और वर्तमान स्थिति को नियंत्रित करने के लिए उपयोग किए जाएंगे:

 <span id="progress"> <span id="total"> <span id="buffered"><span id="current"></span></span> </span> </span> <span id="time"> <span id="currenttime">00:00</span> / <span id="duration">00:00</span> </span>

और संबंधित शैलियों:

 #progress { width:290px; } #total { width:100%; background:#999; } #buffered { background:#ccc; } #current { background:#eee; line-height:0; height:10px; } #time { color:#999; font-size:12pt; }

और नियंत्रण वस्तु के त्वरित उपयोग के लिए संबंधित तत्वों के लिए कुछ लिंक:

 var controls = { ... total: $("#total"), buffered: $("#buffered"), progress: $("#current"), duration: $("#duration"), currentTime: $("#currenttime"), hasHours: false, ... };

सबसे पहले, हमें यह समझने की आवश्यकता है कि वीडियो की अवधि क्या है - इसके लिए, वीडियो तत्व की अवधि संपत्ति है। आप इस मान को ट्रैक कर सकते हैं, उदाहरण के लिए, जब वीडियो खेलने के लिए तैयार हो - ऑनकैनप्ले इवेंट द्वारा:

 video.addEventListener("canplay", function() { controls.hasHours = (video.duration / 3600) >= 1.0; controls.duration.text(formatTime(video.duration, controls.hasHours)); controls.currentTime.text(formatTime(0),controls.hasHours); }, false);

इस मामले में, हम एक साथ यह निर्धारित करते हैं कि वीडियो प्लेयर में घंटे की संख्या प्रदर्शित करने के लिए (वैसे, आम तौर पर, विनिर्देशन यह मानता है कि क्लिप की अवधि बदल सकती है - ऑनड्राड्यूसचेंज घटना उस पल में आग लग जाती है , और यह भी उल्लंघन हो सकती है - उदाहरण के लिए, जब स्ट्रीमिंग रेडियो)।

हम सेकंड को HH: mm: ss या mm: ss: सेकंड में बदलने के लिए विशेष फंक्शन फॉर्मेट टाइम का भी उपयोग करते हैं।

 function formatTime(time, hours) { if (hours) { var h = Math.floor(time / 3600); time = time - h * 3600; var m = Math.floor(time / 60); var s = Math.floor(time % 60); return h.lead0(2) + ":" + m.lead0(2) + ":" + s.lead0(2); } else { var m = Math.floor(time / 60); var s = Math.floor(time % 60); return m.lead0(2) + ":" + s.lead0(2); } } Number.prototype.lead0 = function(n) { var nz = "" + this; while (nz.length < n) { nz = "0" + nz; } return nz; };

प्लेबैक प्रक्रिया को प्रदर्शित करने के लिए, हमें उस ऑनटाइमअपडेट घटना की आवश्यकता है जो वर्तमान क्षण में परिवर्तन होने पर आग लगाती है :

 video.addEventListener("timeupdate", function() { controls.currentTime.text(formatTime(video.currentTime, controls.hasHours)); var progress = Math.floor(video.currentTime) / Math.floor(video.duration); controls.progress[0].style.width = Math.floor(progress * controls.total.width()) + "px"; }, false);

वर्तमान समय संपत्ति वर्तमान सेकंड में वापस आती है । यह खेलने के समय को बदलने के लिए भी इस्तेमाल किया जा सकता है:

 controls.total.click(function(e) { var x = (e.pageX - this.offsetLeft)/$(this).width(); video.currentTime = x * video.duration; });

यह वीडियो बफ़रिंग दिखाने के लिए भी उपयोगी होगा, इसके लिए आप onprogress घटना का निर्माण कर सकते हैं जो वीडियो के नए हिस्से लोड होने पर आग लगाती है:

 video.addEventListener("progress", function() { var buffered = Math.floor(video.buffered.end(0)) / Math.floor(video.duration); controls.buffered[0].style.width = Math.floor(buffered * controls.total.width()) + "px"; }, false);

बफ़र्ड संपत्ति को ध्यान में रखने के बारे में एक महत्वपूर्ण चेतावनी यह है कि यह न केवल सेकंड में समय प्रदान करता है, बल्कि एक TimaRanges ऑब्जेक्ट के रूप में समय अंतराल। ज्यादातर मामलों में, यह 0 के सूचकांक के साथ केवल एक अंतर होगा, और 0c से शुरू होगा। हालाँकि, यदि ब्राउज़र सर्वर पर HTTP रेंज अनुरोधों का उपयोग करता है, उदाहरण के लिए, वीडियो स्ट्रीम के अन्य हिस्सों में जाने के प्रयासों के जवाब में, कई अंतराल हो सकते हैं। यह भी ध्यान में रखा जाना चाहिए कि कार्यान्वयन के आधार पर, ब्राउज़र मेमोरी बफर से पहले से ही खोए हुए वीडियो टुकड़ों को हटा सकता है।

अंतरिम परिणाम:

ध्वनि

अंत में, चलो हमारे वीडियो प्लेयर में एक और थोड़ा स्पर्श जोड़ते हैं - ध्वनि को चालू और बंद करने की क्षमता। ऐसा करने के लिए, स्पीकर के साथ एक छोटा नियंत्रण जोड़ें ( द नॉन प्रोजेक्ट वेबसाइट से लिया गया SVG आइकन):

 <span id="volume"> <svg id="dynamic" version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 95.465 95.465"> <g > <polygon points="39.323,20.517 22.705,37.134 0,37.134 0,62.865 22.705,62.865 39.323,79.486 "/> <path d="M52.287,77.218c14.751-15.316,14.751-39.116,0-54.436c-2.909-3.02-7.493,1.577-4.59,4.59 c12.285,12.757,12.285,32.498,0,45.254C44.794,75.645,49.378,80.241,52.287,77.218L52.287,77.218z"/> <path d="M62.619,89.682c21.551-22.103,21.551-57.258,0-79.36c-2.927-3.001-7.515,1.592-4.592,4.59 c19.08,19.57,19.08,50.608,0,70.179C55.104,88.089,59.692,92.683,62.619,89.682L62.619,89.682z"/> <path d="M75.48,99.025c26.646-27.192,26.646-70.855,0-98.051c-2.936-2.996-7.524,1.601-4.592,4.59 c24.174,24.674,24.174,64.2,0,88.871C67.956,97.428,72.545,102.021,75.48,99.025L75.48,99.025z"/> </g> </svg> </span>

पर और बंद राज्यों के लिए उपयुक्त शैलियों के साथ:

 #dynamic { fill:#333; padding:0 5px; } #dynamic.off { fill:#ccc; }

स्पीकर की स्थिति बदलने के लिए, हमें म्यूट प्रॉपर्टी की आवश्यकता है:

 controls.dynamic.click(function() { var classes = this.getAttribute("class"); if (new RegExp('\\boff\\b').test(classes)) { classes = classes.replace(" off", ""); } else { classes = classes + " off"; } this.setAttribute("class", classes); video.muted = !video.muted; });

(सीएसएस कक्षाओं को बदलने के लिए मानक jQuery के तरीके एसवीजी तत्वों के साथ काम नहीं करते हैं।)
यदि आप वॉल्यूम स्तर भी बदलना चाहते हैं, तो वॉल्यूम प्रॉपर्टी, जो रेंज [0, 1] में मान लेती है, आपकी मदद करेगी।

अंतिम परिणाम:

और क्या ...

इस तथ्य के अलावा कि आप अपने विवेक पर नियंत्रण की शैलियों को आसानी से अनुकूलित कर सकते हैं, कई अन्य महत्वपूर्ण बिंदु हैं जो इस लेख के दायरे से बाहर हैं, लेकिन जो वास्तविक परियोजना में याद रखने के लिए उपयोगी हैं:

HMTL5 वीडियो के लिए ब्राउज़र समर्थन की जाँच,
सॉफ़्टवेयर परिभाषा और समर्थित कोडेक्स का स्विचिंग ,
उपशीर्षक के लिए समर्थन, जिसमें पहुंच सुनिश्चित करना शामिल है।

इसके अलावा, यह मत भूलो कि आपको घटनाओं को नियंत्रित करने के लिए घटनाओं को बांधने की आवश्यकता है क्योंकि यह स्पष्ट हो गया है कि वीडियो प्लेबैक (ऑनकेनप्ले) के लिए उपलब्ध है:

 video.addEventListener("canplay", function() { ... }, false);

या तो आपको उचित जांच करने या संभावित अपवादों को पकड़ने की आवश्यकता है। अपवादों को आम तौर पर पकड़ा जाना चाहिए, उदाहरण के लिए, वीडियो स्ट्रीम डाउनलोड होने पर होने वाली ऑनरर घटना :)

आपको जिन अतिरिक्त विकल्पों की आवश्यकता हो सकती है उनमें से: प्लेबैक की गति को बदलें। ऐसा करने के लिए, एक प्लेबैकरेट संपत्ति और संबंधित ऑनट्रेकचेंज घटना है।

तैयार खिलाड़ी

मुझे लगता है कि सीएसएस के माध्यम से लुकअप के सुविधाजनक अनुकूलन तक, सभी निर्भर लाभ के साथ एचटीएमएल 5 वीडियो का उपयोग करने के लिए तैयार समाधान खोजना आपके लिए मुश्किल नहीं है। यहां कुछ उपयोगी लिंक दिए गए हैं:

अंत में, विनिर्देश में एचटीएमएल 5 वीडियो ।

अपना खुद का एचटीएमएल 5 वीडियो प्लेयर कैसे बनाएं