एचटीएमएल 5 वीडियो - ए टू जेड

हाँ, हाँ, यह html5 और <video> टैग के बारे में एक अन्य लेख है। लेकिन इसका मुख्य अंतर यह होगा कि यह सबसे बुनियादी अवधारणाओं और सिद्धांतों पर विचार करेगा। तो हम ध्यान से पढ़ने और लिखने के लिए तैयार हैं, एचटीएमएल 5 चट्टानों !

एक कोड लिखना

तो, वीडियो को अपने वेब पेज पर दिखाने के लिए, निम्नलिखित कोड लिखें:

< video >

< source src ="movie.mp4" type ='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />

</ video > >

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



बेशक, वीडियो डालने का एक सरल विकल्प है:

< video src ="movie.webm" ></ video >

यह आशा की जाती है कि सभी ब्राउज़रों के लिए निकट भविष्य में यह विकल्प पर्याप्त होगा।



और अब यह एक और महत्वपूर्ण बात का उल्लेख करने योग्य है। अपने सर्वर पर सामग्री प्रकार हेडर में सही MIME प्रकार सेट करना याद रखें। अन्यथा, वीडियो या तो बिल्कुल भी काम नहीं करेगा, या यह सभी के लिए काम नहीं करेगा। अपाचे के मामले में, httpd.conf के लिए निम्नलिखित पंक्तियों को जोड़कर सब कुछ हल किया गया है:



AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm







यदि आप Google ऐप इंजन के साथ काम करते हैं, तो ऐप में प्रत्येक वीडियो प्रारूप के लिए। आपको फ़ाइल के लिए फ़ॉर्म की प्रविष्टि जोड़ने की आवश्यकता है:

- url: /(.*\.ogv)

static_files: videos_folder/\1

mime_type: video/ogg

upload: videos_folder/(.*\.ogv)









और एक और बहुत महत्वपूर्ण बात जो ध्यान देने योग्य है। आपको स्रोत टैग में प्रकार पैरामीटर के मूल्यों को निर्दिष्ट करना होगा ताकि ब्राउज़र स्वचालित रूप से वांछित प्रारूप को पहचान सके और उसे लोड कर सके, जिससे उत्पादकता बढ़ेगी।

वीडियो प्रारूप

किसी भी वीडियो प्रारूप में एक वीडियो फ़ाइल को ज़िप स्ट्रीम के रूप में लिया जाना चाहिए जिसमें एक वीडियो स्ट्रीम और एक ऑडियो स्ट्रीम है । यहां नेट पर तीन सबसे आम वीडियो प्रारूप हैं:

• mp4 = एच .264 + एएसी
• .ogg / .ogv = थियोरा + वोरबिस
• .webm = VP8 + वोरबिस

(दुर्भाग्य से, हब आपको मूल साइट से उदाहरण सम्मिलित करने की अनुमति नहीं देता है, इसलिए आपको उन्हें वहां देखना होगा - लगभग प्रति।)



लेखन के समय (अगस्त 2010), वीडियो डालने के लिए सबसे सही और पूर्ण कोड निम्नानुसार है:

< video >

< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />

< source src ="movie.mp4" type ='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />

Video tag not supported. Download the video < a href ="movie.webm" > here </ a > .

< video > >

एक "BUT" - यदि आप अपनी साइट को iPad के तहत उपयोग करने की उम्मीद करते हैं, तो पहले .mp4 प्रारूप में वीडियो निर्दिष्ट करें, यह सुविधा iPad पर ही एक बग से संबंधित है।



और जब से हम .mp4 के बारे में बात कर रहे हैं, कई बिंदुओं पर ध्यान दिया जाना चाहिए। सबसे पहले, h.264 वीडियो कोडेक मुफ्त नहीं है, इसलिए आपको लाइसेंस के लिए भुगतान करना होगा। आप इसके बारे में यहां पढ़ सकते हैं। दूसरे, आपको निर्दिष्ट वीडियो और ऑडियो कोडेक्स के बारे में पूरी तरह से निश्चित होना चाहिए, वे वीडियो से वीडियो में भिन्न हो सकते हैं। सबसे आम माना जा सकता है "avc1.42E01E, mp4a.40.2", इसलिए केवल मामले में, यहां देखें ।

आईई;)

जब नया IE 9 सामने आया तो इंटरनेट पर खुशी की लहर दौड़ गई। हालांकि, जब तक IE 6 के भाग्यशाली मालिक हैं, तब तक आपको अपने आप को निखारना होगा। संभव समाधान के एक जोड़े।

क्रोम फ्रेम

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

वापस फ्लैश पर

खैर, किसी ने फ्लैश को रद्द नहीं किया - हम ब्राउज़र को पहचानते हैं, इसे देखते हैं, फ्लैश लोड करते हैं। खासकर जब से Adobe ने .webm फॉर्मेट को प्ले करने योग्य वीडियो प्रारूपों की सूची में जोड़ा है। इसलिए आपको ट्रांसकोडिंग के बारे में कुछ सोचना भी नहीं चाहिए।

एन्क्रिप्ट करें, या वीडियो ट्रांसकोड करने की आवश्यकता है

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

बन

चूंकि हम वीडियो को पूर्ण HTML तरीके से एम्बेड करते हैं, इसका मतलब है कि हम अपने उद्देश्यों के लिए वेब की पूरी शक्ति का उपयोग कर सकते हैं। नीचे मैं वर्णन करूँगा कि इस शक्ति में क्या है। ( दुर्भाग्य से, फिर से, उदाहरणों के बिना, इसलिए मूल साइट पर जाएं )

वीडियो + एचटीएमएल

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

< video poster ="star.png" autoplay loop controls tabindex ="0" >

< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />

< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />

</ video >



खैर, मानकों का अनुपालन करने वालों के लिए एक विकल्प:

< video poster ="star.png" autoplay ="autoplay" loop ="loop" controls ="controls" tabindex ="0" >

< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />

< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />

</ video >



वीडियो + जेएस

वीडियो टैग में कई पैरामीटर हैं जिन्हें जावास्क्रिप्ट का उपयोग करके नियंत्रित किया जा सकता है। W3 वेबसाइट पर एक उदाहरण देखा जा सकता है।



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

video.addEventListener( 'canplay' , function (e) {

this .volume = 0.4;

this .currentTime = 10;

this .play();

}, false



कस्टम सेटिंग्स पहले से ही नेटवर्क पर दिखाई देती हैं, जिससे आप नियंत्रित कर सकते हैं, उदाहरण के लिए, प्लेबैक गति या 2 वीडियो के बीच इंटरैक्शन जोड़ें।

वीडियो + सीएसएस

व्यावहारिक रूप से कोई टिप्पणी नहीं है - वेब पेज के एक तत्व के रूप में वीडियो सीएसएस से सभी प्रकार की चीजों को मानता है - सीमा , अपारदर्शिता से लेकर मुखौटे, ग्रेडिएंट, ट्रांसफ़ॉर्म, बदलाव और एनिमेशन। यह सब पूरी तरह से आपकी कल्पना पर निर्भर करता है।

वीडियो + कैनवास

HTML5 इस दुनिया में एक और शक्तिशाली चीज लेकर आया है - कैनवास। और क्या हमें इन दो नवाचारों का एक साथ उपयोग करने से रोकता है? यह सही है - कुछ भी नहीं।



कैनवास और वीडियो साझा करने का एक उदाहरण निम्नानुसार हो सकता है - वीडियो चलाए जाने से स्क्रीनशॉट प्राप्त करना। कैनवस में एक ड्राइमेज विधि है जो आपको 3 स्रोतों से वीडियो प्राप्त करने की अनुमति देती है: एक छवि से जैसे कि, एक अन्य कैनवास से, और वीडियो से ! और एक अन्य विधि की मदद से - toDataURL हम पहले से ही उस छवि को निर्यात कर रहे हैं जिसकी हमें आवश्यकता है। निम्नलिखित सूची से पता चलता है कि हर 1.5 सेकंड में वीडियो से स्क्रीनशॉट कैसे लिया जाता है:

video_dom.addEventListener( 'play' , function () {

video_dom.width = canvas_draw.width = video_dom.offsetWidth;

video_dom.height = canvas_draw.height = video_dom.offsetHeight;

var ctx_draw = canvas_draw.getContext( '2d' );

draw_interval = setInterval( function () {

// import the image from the video

ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);

// export the image from the canvas

var img = new Image();

img.src = canvas_draw.toDataURL( 'image/png' );

img.width = 40;

frames.appendChild(img);

}, 1500)

}, false );



मुझे लगता है कि कल्पनाशील लोग पहले ही कल्पना कर चुके हैं कि वे यहां क्या सोच सकते हैं। उनके लिए और हर कोई जो वीडियो फ्रेम प्राप्त करने की संभावना में रुचि रखता है, के लिए एक दिलचस्प बात है - वेबजीएल ।

वीडियो + एसवीजी

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

< svg id ='image' version ="1.1" xmlns ="http://www.w3.org/2000/svg" >

< defs >

< filter id ="myblur" >

< feGaussianBlur stdDeviation ="1" />

</ filter >

</ defs >

</ svg >

< style >

video { filter:url(#myblur); border: 2px solid red; }

</ style >

फ़ायरफ़ॉक्स 4 और IE9 में एक समान इनलाइन प्रोसेसिंग विकल्प काम करता है, अन्य ब्राउज़रों के लिए जावास्क्रिप्ट और सीएसएस पहले से ही आवश्यक हैं।

निष्कर्ष

एक शक के बिना, कई पहले से ही नए HTML घटक के फायदों की सराहना करने में कामयाब रहे हैं। इंटरनेट पर ( और हैबे पर - लगभग। ) पहले से ही बहुत सारे उदाहरण पोस्ट किए गए हैं ( 1 , 2 , 3 , 4 , 5 , 6 )



अच्छी खबर यह है कि जो हासिल किया गया है उस पर कोई भी रोक लगाने वाला नहीं है और शायद भविष्य में हमारे पास माइक्रोफोन और कैमरा के साथ काम करने और प्रसारण का समर्थन करने का अवसर होगा।