एचटीएमएल 5 वीडियो टैग आपके वेब पृष्ठों पर वीडियो जोड़ने में आसान बनाता है। लेकिन जब यह सतह पर आसान दिखाई देता है, तो आपके वीडियो को चलाने और चलाने के लिए आपको बहुत सी चीजें करने की ज़रूरत होती है। यह ट्यूटोरियल आपको HTML 5 में एक पृष्ठ बनाने के लिए चरणों के माध्यम से ले जाएगा जो सभी आधुनिक ब्राउज़रों में वीडियो चलाएगा।
- यूट्यूब का उपयोग कर अपने स्वयं के एचटीएमएल 5 वीडियो बनाम होस्टिंग
- वेब पर वीडियो समर्थन का त्वरित अवलोकन
- अपना वीडियो बनाएं और संपादित करें
- फ़ायरफ़ॉक्स के लिए वीडियो को ओग में कनवर्ट करें
- सफारी के लिए वीडियो एमपी 4 में कनवर्ट करें
- इंटरनेट एक्सप्लोरर के लिए वीडियो को FLV में कनवर्ट करें
- अपने वेब पेज पर वीडियो तत्व जोड़ें
- भाग 1 काम करने के लिए इंटरनेट एक्सप्लोरर प्राप्त करने के लिए जावास्क्रिप्ट और फ्लैश प्लेयर जोड़ें
- जैसा कि आप कर सकते हैं के रूप में कई ब्राउज़रों में परीक्षण करें
10 में से 01
यूट्यूब का उपयोग कर अपने स्वयं के एचटीएमएल 5 वीडियो बनाम होस्टिंग
यूट्यूब एक महान साइट है। यह वीडियो को वेब पृष्ठों में त्वरित रूप से एम्बेड करना आसान बनाता है, और कुछ मामूली अपवादों के साथ उन वीडियो के निष्पादन में काफी सहजता है। अगर आप यूट्यूब पर एक वीडियो पोस्ट करते हैं, तो आप पूरी तरह से भरोसा कर सकते हैं कि कोई भी इसे देख पाएगा।
लेकिन आपके वीडियो एम्बेड करने के लिए यूट्यूब का उपयोग कुछ कमियां हैं
यूट्यूब के साथ अधिकांश समस्याएं डिजाइनर पक्ष की बजाय उपभोक्ता पक्ष पर हैं, जैसे चीजें:
- धीमी खोज और अनुक्रमण
- सर्वर आउटेज
- सामग्री को मनमाने ढंग से हटाया जा रहा है (प्रतीत होता है)
- बहुत खराब सामग्री
लेकिन कुछ कारण हैं कि यूट्यूब सामग्री डेवलपर्स के लिए भी बुरा क्यों है, जिसमें निम्न शामिल हैं:
- वीडियो के लिए 10 मिनट की अधिकतम लंबाई (मुफ्त खातों के लिए)
- खराब अपलोड प्रदर्शन
- यूट्यूब आपके वीडियो के असीमित उपयोग अधिकार प्राप्त करता है
- किसी भी YouTube उपयोगकर्ता को आपके वीडियो के असीमित उपयोग अधिकार प्राप्त होते हैं
एचटीएमएल 5 वीडियो यूट्यूब पर कुछ फायदे देता है
वीडियो के लिए एचटीएमएल 5 का उपयोग करने से आप अपने वीडियो के हर पहलू को नियंत्रित कर सकते हैं, इसे कौन देख सकता है, यह कितना समय है, सामग्री में क्या है, जहां यह होस्ट किया गया है और सर्वर कैसे करता है। और एचटीएमएल 5 वीडियो आपको अपने वीडियो को कई प्रारूपों में एन्कोड करने का मौका देता है, क्योंकि आपको यह सुनिश्चित करने की आवश्यकता है कि अधिकतम संख्या में लोग इसे देख सकें। आपके ग्राहकों को प्लगइन की आवश्यकता नहीं है या जब तक यूट्यूब एक नया संस्करण जारी नहीं करता तब तक प्रतीक्षा करें।
कोर्स के, एचटीएमएल 5 वीडियो कुछ drawbacks प्रदान करता है
इसमें शामिल है:
- आपको कम से कम तीन अलग-अलग कोडेक्स में अपने वीडियो को एन्कोड करना होगा
- आपको HTML 5 का समर्थन नहीं करने वाले ब्राउज़र सुनिश्चित करने के लिए कुछ जावास्क्रिप्ट शामिल करना होगा
- आपके सर्वर को होस्टिंग वीडियो की बैंडविड्थ आवश्यकताओं को संभालने में सक्षम होना चाहिए
10 में से 02
वेब पर वीडियो समर्थन का त्वरित अवलोकन
वेब पृष्ठों पर वीडियो जोड़ना एक कठिन प्रक्रिया रही है। ऐसी बहुत सी चीज़ें थीं जो गलत हो सकती थीं:
- सबसे पहले, आप अपने वीडियो को अपने पृष्ठ में एम्बेड करने के लिए <एम्बेड> टैग का उपयोग करते हैं। लेकिन उस टैग को किसी अन्य टैग के पक्ष में बहिष्कृत किया गया है। और कुछ ब्राउज़रों ने वैसे भी इसे कभी भी समर्थित नहीं किया है।
- तो आप
- फिर आप सोचते हैं " फ्लैश !" और अपने वीडियो को एक एफएलवी फ़ाइल के रूप में एन्कोड करें। लेकिन फ्लैश कई मोबाइल उपकरणों पर समर्थित नहीं है और बहुत से लोग फ्लैश से नफरत करते हैं इससे कोई फर्क नहीं पड़ता कि इसका उपयोग कैसे किया जाता है (मेरे सर्वेक्षण में 25% उत्तरदाताओं ने फ्लैश के बारे में आपको कैसा महसूस किया है, वे कहते हैं कि वे किसी भी तरह से फ्लैश नहीं खड़े कर सकते हैं)।
- तो आप यूट्यूब जैसी वीडियो एम्बेडिंग साइट पर अपना वीडियो अपलोड करने का निर्णय लेते हैं, लेकिन फिर आपके पास YouTube के साथ समस्याएं हैं जिन पर हमने चर्चा की थी।
- अंत में, आप एचटीएमएल 5 के साथ जाने का फैसला करते हैं, लेकिन इंटरनेट एक्सप्लोरर इसका समर्थन नहीं करता है (इंटरनेट एक्सप्लोरर 9 तक नहीं)। और यहां तक कि यदि आप करते हैं, तो दो वीडियो कोडेक मानक हैं जो समर्थित हैं और केवल एक ब्राउज़र है जो दोनों का उपयोग कर सकता है। वीडियो कोडेक्स और कंटेनर के लिए ब्राउज़र समर्थन
तो आपको क्या करना है? वीडियो पर देना अब अधिकांश साइटों के लिए एक विकल्प नहीं है, क्योंकि वीडियो अधिक से अधिक महत्वपूर्ण हो रहा है। और कई साइटों ने सफलतापूर्वक वीडियो पर स्विच किया है।
इस आलेख के निम्नलिखित पृष्ठ आपको फ़ायरफ़ॉक्स 3.5, ओपेरा 10.5, क्रोम 3.0, सफारी 3 और 4, आईफ़ोन और एंड्रॉइड, फ्लैश और इंटरनेट एक्सप्लोरर 7 और 8 में काम करने वाले आपके वेब पृष्ठों पर वीडियो जोड़ने के तरीके के माध्यम से कदम उठाएंगे। यदि आवश्यक हो तो अन्य पुराने ब्राउज़रों के लिए समर्थन जोड़ने के लिए आपको वह कुंजी भी चाहिए।
10 में से 03
अपना वीडियो बनाएं और संपादित करें
जब आप किसी वेब पेज पर वीडियो डालने जा रहे हैं तो पहली चीज़ आपको वास्तविक वीडियो है। आप या तो एक सुविधा बनाने के लिए लगातार शूट कर सकते हैं और बाद में संपादित कर सकते हैं, या आप इसे स्क्रिप्ट कर सकते हैं और समय से पहले इसकी योजना बना सकते हैं। किसी भी तरह से अच्छी तरह से काम करता है, यह वही है जो आप सहज हैं। यदि आपको नहीं पता कि आपको किस प्रकार का वीडियो बनाना चाहिए, तो डेस्कटॉप वीडियो गाइड से इन विचारों को देखें:
- पारिवारिक वीडियो परियोजनाएं
- विपणन और प्रोमोशनल वीडियो
- वीडियो आभासी दौरे
- वीडियो कैसे करें
- शादी के वीडियो
उच्च गुणवत्ता वाले वीडियो को रिकॉर्ड करने का तरीका जानें
सुनिश्चित करें कि आप घर के अंदर और बाहर रिकॉर्ड करने के साथ-साथ ऑडियो रिकॉर्ड करने के तरीके को कैसे रिकॉर्ड करते हैं। प्रकाश भी बहुत महत्वपूर्ण है - शॉट्स जो बहुत उज्ज्वल हैं, आंखों को चोट पहुंचाते हैं, और बहुत अंधेरा सिर्फ गंदे और गैर-व्यावसायिक दिखते हैं। यहां तक कि यदि आप केवल अपनी साइट पर 30-सेकंड का वीडियो रखने की योजना बना रहे हैं, तो उच्च गुणवत्ता यह बेहतर होगी कि यह आपकी वेबसाइट पर दिखाई देगी।
यह भी याद रखें कि कॉपीराइट किसी भी ध्वनि या संगीत (साथ ही स्टॉक फुटेज) पर लागू होता है जिसे आप अपने वीडियो में उपयोग करना चाहते हैं। अगर आपके पास ऐसे दोस्त तक पहुंच नहीं है जो आपके लिए एक गीत लिख और खेल सके, तो आपको पृष्ठभूमि में खेलने के लिए रॉयल्टी मुक्त संगीत ढूंढना होगा। ऐसे स्थान भी हैं जहां आप अपने वीडियो में जोड़ने के लिए फुटेज स्टॉक कर सकते हैं।
अपने वीडियो को संपादित करना
इससे कोई फर्क नहीं पड़ता कि आप किस संपादन सॉफ्टवेयर का उपयोग करते हैं, बस जब तक आप इससे परिचित हों और इसे प्रभावी ढंग से उपयोग कर सकें। ग्रेटचेन, डेस्कटॉप वीडियो गाइड में, कुछ पेशेवर वीडियो संपादन युक्तियां हैं जो आपके वीडियो को संपादित करने में आपकी सहायता कर सकती हैं ताकि वे शानदार लग सकें।
अपने वीडियो को एक एमओवी या एवीआई (या एमपीजी, सीडी, डीवी) में सहेजें
इस ट्यूटोरियल के बाकी हिस्सों के लिए, हम यह मानने जा रहे हैं कि आपने अपना वीडियो किसी प्रकार की उच्च गुणवत्ता (गैर संपीड़ित) प्रारूप में सहेजी है जैसे एवीआई या एमओवी। जबकि आप इन फ़ाइलों का उपयोग कर सकते हैं, वैसे ही आप वीडियो के साथ सभी समस्याओं में भाग लेते हैं जिन पर हमने पहले ही चर्चा की है। निम्नलिखित पृष्ठ बताएंगे कि आपकी फ़ाइल को तीन प्रकारों में कैसे परिवर्तित करें ताकि यह ब्राउज़रों की सबसे बड़ी संख्या द्वारा देखा जा सके।
10 में से 04
फ़ायरफ़ॉक्स के लिए वीडियो को ओग में कनवर्ट करें
पहला प्रारूप जिसे हम परिवर्तित करेंगे ओग (कभी-कभी ओग-थियोरा भी कहा जाता है)। यह प्रारूप एक है कि फ़ायरफ़ॉक्स 3.5, ओपेरा 10.5, और क्रोम 3 सभी देख सकते हैं।
दुर्भाग्यवश, जबकि ओग के पास ब्राउज़र का समर्थन है, आप कई प्रसिद्ध वीडियो प्रोग्राम जिन्हें आप खरीद सकते हैं (एडोब मीडिया एनकोडर, क्विकटाइम, आदि) एक ओग रूपांतरण विकल्प प्रदान नहीं करते हैं। तो अपने वीडियो को ओग में बदलने का एकमात्र तरीका वेब पर एक रूपांतरण कार्यक्रम ढूंढना है।
रूपांतरण विकल्प
मीडिया-कन्वर्ट नामक एक ऑनलाइन टूल है जो वीडियो (और ऑडियो) के विभिन्न प्रारूपों को अन्य वीडियो (और ऑडियो) स्वरूपों में परिवर्तित करने का दावा करता है। जब हमने इसे अपने 3-सेकेंड टेस्ट वीडियो के साथ करने की कोशिश की, तो हम इसे अपने मैक पर काम नहीं कर पाए। लेकिन आप बेहतर भाग्य हो सकता है। इस साइट को मुफ्त होने का लाभ है।
हमने पाया कुछ अन्य उपकरण में शामिल हैं:
- मिरो वीडियो कन्वर्टर (विंडोज मैकिंतोश) - इस कार्यक्रम को ओग और एमपी 4 (एच .264) और यह ओपन सोर्स दोनों में परिवर्तित करने का लाभ है।
- Koyote वीडियो कनवर्टर (विंडोज़)
- मुफ्त वीडियो कनवर्टर हम सोचते हैं कि इसमें विंडोज और मैकिन्टोश संस्करण दोनों हैं, लेकिन उनकी साइट से बताना मुश्किल था
- सरल थियोरा एन्कोडर (मैकिंतोश) - यह वह है जिसे हम उपयोग करते हैं।
एक बार जब आप अपना वीडियो ओग प्रारूप में सहेज लेते हैं, तो इसे अपनी वेबसाइट पर किसी स्थान पर सहेजें और अन्य ब्राउज़रों के लिए इसे अन्य प्रारूपों में बदलने के लिए अगले पृष्ठ पर जाएं।
10 में से 05
सफारी के लिए वीडियो एमपी 4 में कनवर्ट करें
अगला प्रारूप आपको अपने वीडियो को एमपी 4 (एच .264 वीडियो) में परिवर्तित करना चाहिए ताकि इसे सफारी 3 और 4 और आईफोन और एंड्रॉइड पर खेला जा सके। इसके अलावा, फ्लैश पर देखने के लिए एच .264 वीडियो आसानी से एफएलवी फाइलों में परिवर्तित हो सकते हैं।
यह प्रारूप वाणिज्यिक उत्पादों में अधिक आसानी से उपलब्ध है, और आपके पास शायद पहले से ही एक प्रोग्राम है जो एमपी 4 में परिवर्तित होगा यदि आपके पास वीडियो संपादक है। यदि आपके पास Adobe Premiere है तो आप एडोब वीडियो एन्कोडर का उपयोग कर सकते हैं, या यदि आपके पास क्विकटाइम प्रो है जो भी काम करेगा। पिछले पृष्ठ पर चर्चा किए गए कई कनवर्टर्स वीडियो को MP4 में भी कनवर्ट करेंगे।
- मीडिया कनवर्ट - एक ऑनलाइन उपकरण
- मिरो वीडियो कन्वर्टर (विंडोज मैकिंतोश) - इस कार्यक्रम को ओग और एमपी 4 (एच .264) और यह ओपन सोर्स दोनों में परिवर्तित करने का लाभ है।
- सुपर (विंडोज) - एमपी 4 और एफएलवी में कई अलग-अलग फ़ाइल प्रकारों को परिवर्तित करेगा
- मुफ्त वीडियो कनवर्टर हम सोचते हैं कि इसमें विंडोज और मैकिन्टोश संस्करण दोनों हैं, लेकिन उनकी साइट से बताना मुश्किल था
अपनी एमपी 4 फ़ाइल को अपनी वेबसाइट पर सहेजें और फिर आपको इसका उपयोग करने के लिए इंटरनेट एक्सप्लोरर के लिए फ्लैश में कनवर्ट करना होगा।
10 में से 06
इंटरनेट एक्सप्लोरर के लिए वीडियो को FLV में कनवर्ट करें
वीडियो को FLV में कनवर्ट करने का सबसे आसान तरीका फ्लैश का उपयोग करना है। इस तरह हम अपने वीडियो को फ़्लैश में परिवर्तित करते हैं। लेकिन यदि आपके पास फ्लैश नहीं है, तो फाइलों को FLV में परिवर्तित करने के लिए यहां दो लोकप्रिय टूल हैं:
- सुपर (विंडोज) - एमपी 4 और एफएलवी में कई अलग-अलग फ़ाइल प्रकारों को परिवर्तित करेगा
- ffmpegX (मैकिंतोश) - कई अलग-अलग फ़ाइल प्रकारों को एमपी 4 और एफएलवी में परिवर्तित कर देगा।
अपनी एफएलवी फ़ाइल को अपनी वेबसाइट पर सहेजें और अगला पृष्ठ आपको HTML लिखने का तरीका दिखाएगा ताकि आप अपने वीडियो चला सकें।
10 में से 07
अपने वेब पेज पर वीडियो तत्व जोड़ें
वेब पृष्ठों पर वीडियो जोड़ने के लिए एचटीएमएल 5 का उपयोग करना बहुत आसान है। अधिकांश आधुनिक ब्राउज़र एचटीएमएल 5 वीडियो का समर्थन करते हैं, हालांकि वे सभी इसे उसी तरह समर्थन नहीं करते हैं। लेकिन इसका मतलब यह है कि यदि आप अपने वीडियो को ओग और एमपी 4 दोनों प्रारूपों के रूप में सहेजते हैं, तो आप इसे अधिकांश आधुनिक ब्राउज़रों (इंटरनेट एक्सप्लोरर 8 को छोड़कर) में प्रदर्शित करने के लिए HTML की केवल चार या पांच पंक्तियां लिखने में सक्षम होंगे। ऐसे:
- एचटीएमएल 5 डॉक्ट टाइप मार्कर लिखें ताकि ब्राउजर एचटीएमएल 5 की अपेक्षा कर सकें:
- अपना वेब पेज बनाएं जैसा कि आप इसे सामान्य रूप से बनाते हैं:
title>
Head>
Body>
Html> - शरीर के अंदर, <वीडियो> टैग रखें:
<वीडियो> वीडियो>
- तय करें कि आप अपने वीडियो के कौन से गुण चाहते हैं:
- ऑटोप्ले - जैसे ही इसे डाउनलोड किया जाता है, शुरू करने के लिए
- नियंत्रण - अपने पाठकों को वीडियो को नियंत्रित करने की अनुमति दें (रोकें, रिवाइंड करें, फास्ट-फॉरवर्ड करें)
- लूप - जब यह समाप्त होता है तो शुरुआत से वीडियो शुरू करें
- प्रीलोड - वीडियो को प्री-डाउनलोड करें ताकि जब ग्राहक उस पर क्लिक करता है तो यह तेज़ी से तैयार हो जाता है
- पोस्टर - उस वीडियो को परिभाषित करें जिसे आप उपयोग करना चाहते हैं जब वीडियो बंद हो जाता है
<वीडियो नियंत्रण प्रीलोड> वीडियो>
- फिर
- क्रोम 1, फ़ायरफ़ॉक्स 3.5, ओपेरा 10, और / या सफारी 4 में पेज खोलें और सुनिश्चित करें कि यह सही तरीके से प्रदर्शित होता है। आपको कम से कम फ़ायरफ़ॉक्स 3.5 और सफारी 4 में इसका परीक्षण करना चाहिए - क्योंकि वे प्रत्येक एक अलग कोडेक का उपयोग करते हैं।
बस। एक बार आपके पास यह कोड हो जाने के बाद आपके पास एक वीडियो होगा जो फ़ायरफ़ॉक्स 3.5, सफारी 4, ओपेरा 10 और क्रोम 1 में काम करता है लेकिन इंटरनेट एक्सप्लोरर के बारे में क्या?
इंटरनेट एक्सप्लोरर एचटीएमएल 5 या <वीडियो> टैग पसंद नहीं है
अगले खंड में, हम आपके एचटीएमएल 5 वीडियो टैग के साथ अच्छी तरह से खेलने और वीडियो प्रदर्शित करने के लिए आईई 8 प्राप्त करने के लिए क्या कर सकते हैं, इसके बारे में बात करेंगे। आपको फ्लैश का उपयोग करना होगा। अच्छी खबर यह है कि आईई 9 से एचटीएमएल 5 और वीडियो टैग का समर्थन करने की उम्मीद है।
10 में से 08
इंटरनेट एक्सप्लोरर को काम करने के लिए जावास्क्रिप्ट और फ्लैश प्लेयर जोड़ें
आपने देखा होगा कि पिछले पृष्ठ के HTML में, FLV फ़ाइल के लिए कोई स्रोत लाइन नहीं थी। और यदि आपने इंटरनेट एक्सप्लोरर में उस पृष्ठ का परीक्षण किया है तो यह काम नहीं करेगा। ऐसा इसलिए है क्योंकि इंटरनेट एक्सप्लोरर एचटीएमएल 5 को नहीं पहचानता है और यह ओजीजी या एमपी 4 वीडियो को मूल रूप से नहीं चला सकता है। काम करने के लिए इंटरनेट एक्सप्लोरर 7 और 8 प्राप्त करने के लिए, आपको इसे फ्लैश के रूप में वीडियो चलाने की आवश्यकता है। लेकिन एफएलवी फ़ाइल जोड़ने से काम करने के लिए और भी कदम हैं।
चरण 1: अपनी वेबसाइट के लिए एक फ्लैश वीडियो प्लेयर प्राप्त करें
हम फ़्लोप्लेयर प्राप्त करने की अनुशंसा करते हैं क्योंकि यह एक ओपन सोर्स फ्लैश वीडियो प्लेयर है जिसे आप अपने वेब सर्वर पर इंस्टॉल कर सकते हैं और जब भी आपके पास फ्लैश वीडियो खेलने के लिए उपयोग किया जा सकता है। फ़्लोप्लेयर का मुफ्त संस्करण आपके वीडियो में विज्ञापन डालता है, लेकिन यदि आपको उनकी ज़रूरत है तो आप व्यावसायिक लाइसेंस भी खरीद सकते हैं।
अपनी वेबसाइट पर फ़्लोप्लेयर स्थापित करने के लिए फ़्लोप्लेयर साइट पर निर्देशों का पालन करें। संक्षेप में, आप अपनी साइट पर 2 एसडब्ल्यूएफ फाइलें और एक जावास्क्रिप्ट फाइल स्थापित करेंगे। अपने एचटीएमएल के नीचे, ( body> टैग से पहले) आप एक पंक्ति जोड़ देंगे: