HTML 5 भिडीयो ट्यागले तपाईंको वेब पृष्ठहरूमा भिडियो थप्न सजिलो बनाउँछ। तर जब यो सतहमा सजिलो देखिन्छ, त्यहाँ तपाईंको भिडियो अप र दौड गर्न तपाईंले धेरै आवश्यक कुराहरूहरू छन्। यो ट्यूटोरियलले HTML 5 मा एक पेज सिर्जना गर्न चरणहरू मार्फत लैजान्छ जुन सबै आधुनिक ब्राउजरमा भिडियो चलाउनेछ।
- तपाईंको आफ्नै HTML 5 भिडियो बनाइदै YouTube को प्रयोग गरी
- वेबमा भिडियो समर्थनको द्रुत अवलोकन
- तपाईंको भिडियो सिर्जना र सम्पादन गर्नुहोस्
- भिडियोलाई Ogg मा फायरफक्सको रूपान्तरण गर्नुहोस्
- भिडियो सफारी को लागि MP4 मा बदल्नुहोस्
- इन्टरनेट एक्सप्लोररको लागि भिडियोलाई FLV मा रूपान्तरित गर्नुहोस्
- तपाईंको वेब पृष्ठमा भिडियो तत्व थप्नुहोस्
- भाग 1 कार्य गर्न इन्टरनेट एक्सप्लोरर प्राप्त गर्न जाभास्क्रिप्ट र फ्लैश प्लेयर थप्नुहोस्
- तपाईं धेरैजसो धेरै ब्राउजरमा परीक्षण गर्नुहोस्
01 को 10
तपाईंको आफ्नै HTML 5 भिडियो बनाइदै YouTube को प्रयोग गरी
YouTube एक उत्कृष्ट साइट हो। यसले भिडियोहरू छिट्टै वेब पृष्ठहरूमा छिटो इम्बेड गर्न सजिलो बनाउँछ, र केहि सानो अपवादहरूको साथ ती भिडीयोहरूको निष्पादनमा निर्दोष छ। यदि तपाईंले YouTube मा एक भिडियो पोस्ट गर्नुभयो भने, तपाईं एकदम पक्का हुन सक्नुहुन्छ कि कसैले यसलाई हेर्न सक्षम हुनेछ।
तर YouTube को तपाईंको भिडियो एम्बेड गर्न को लागी केहि पछाडि छ
युट्युबको साथमा अधिकांश समस्याहरू उपभोक्ता पक्षमा छन्, बरु डिजाइनर साइडमा, चीजहरू जस्तै:
- ढिलो खोजी र अनुक्रमणिका
- सर्भर आउटपुटहरू
- सामाग्री हटाइयो (प्रतीत भई) मनमाने
- धेरै खराब सामग्री
तर YouTube कारण सामाग्री डेवलपर्सका लागि खराब छ केहि कारणहरू छन्, सहित:
- भिडियोहरूको लागि 10-मिनेट अधिकतम लम्बाइ (नि: शुल्क खाताहरूका लागि)
- खराब अपलोड प्रदर्शन
- तपाईंको भिडियोमा YouTube लाई असीमित उपयोग अधिकार प्राप्त गर्दछ
- कुनै पनि YouTube प्रयोगकर्ताले तपाइँको भिडियोमा असीमित उपयोग अधिकार प्राप्त गर्यो
HTML 5 भिडियोले YouTube मा केहि लाभ दिन्छ
भिडियोको लागि HTML 5 प्रयोग गरेर तपाइँले तपाइँको भिडियोको प्रत्येक पक्षलाई नियन्त्रण गर्न दिनेछ, कुन कुराले हेर्न सक्छ, कति लामो छ, सामग्री समावेश गर्दछ, यो होस्ट गरिएको छ र सर्भरले कसरी प्रदर्शन गर्दछ। र एचटीएमएल 5 भिडियोले तपाइँलाई तपाइँको भिडियोलाई धेरै ढाँचामा इन्कोड गर्ने मौका दिन्छ भनेर तपाईंलाई निश्चित गर्न आवश्यक छ कि अधिकतम व्यक्तिले यसलाई हेर्न सक्दछ। तपाईंको ग्राहकहरूले प्लगइन आवश्यक पर्दैन वा YouTube लाई नयाँ संस्करण जारी नगरेसम्म पर्खन पर्दैन।
पाठ्यक्रम, एचटीएमएल 5 भिडियोले केही ड्राबक्स प्रदान गर्दछ
यसमा समावेश छ:
- तपाइँसँग तपाइँको भिडियो कम्तिमा तीन फरक कोडेकहरू मा एन्कोड गर्नु पर्छ
- तपाईंले केहि जाभास्क्रिप्ट समावेश गर्न आवश्यक छ कि ब्राउजर जसले HTML समर्थन गर्दैन 5 काम गर्नेछ
- तपाइँको सर्भरले भिडियोहरू होस्टिङ गर्ने ब्यान्डविड्थ आवश्यकताहरू ह्यान्डल गर्न सक्षम हुनु पर्छ
02 को 10
वेबमा भिडियो समर्थनको द्रुत अवलोकन
वेब पृष्ठमा भिडियो थप्न लामो समयसम्म एक कठिन प्रक्रिया भएको छ। त्यहाँ धेरै चीजहरू थिए जुन गलत हुन सक्थे:
- पहिलो, तपाइँले तपाइँको भिडियोलाई तपाईंको पृष्ठमा एम्बेड गर्न
- त्यसैले तपाई <वस्तु> ट्यागमा स्विच गर्नुहुन्छ, तर पुरानो ब्राउजरहरूले यसको समर्थन गर्दैनन् र नयाँ ब्राउजर यसको समर्थनमा स्केच हुन्छ।
- त्यसोभए तपाईंले " फ्लैश !" सोच्नुहुन्छ र तपाईंको भिडियो FLV फाईलको रूपमा इन्कोड गर्नुहोस्। तर फ्याक्स धेरै मोबाइल उपकरणहरूमा समर्थित छैन र धेरै व्यक्तिले यसलाई कसरी प्रयोग गरिरहेको छ भनेर फ्याँकिएको छैन (मेरो सर्वेक्षणमा 25% उत्तरदायीहरूले तपाइँलाई फ्ल्याशको बारेमा सोचेका थिए भने उनीहरूले फ्लैश खैर खडा गर्न सक्दैनन्)।
- त्यसैले तपाइँ आफ्नो भिडियोलाई YouTube जस्तै भिडियो इम्बेडिंग साइटमा अपलोड गर्न निर्णय गर्नुहुन्छ, तर तपाइँसँग हामीले छलफल गरेका यूट्यूबका मुद्दाहरू छन्।
- अन्तमा, तपाईं HTML 5 मा जानुहुन्छ, तर इन्टरनेट एक्सप्लोररले यसको समर्थन गर्दैन (इन्टरनेट एक्सप्लोरर 9 सम्म)। र यदि तपाईले गर्नुभयो भने, त्यहाँ दुई भिडियो कोडेक मानकहरू छन् जुन समर्थित छन् र केवल एक ब्राउजर जुन प्रयोग गर्न सक्दछ। भिडियो कोडेक र कन्टेनरहरूको लागि ब्राउजर समर्थन
त्यसो त के गर्नु पर्छ? भिडीयो माथि दिइएका अधिकांश साइटहरूको लागि विकल्प अब विकल्प छैन, किनकि भिडियो अधिक र अधिक महत्त्वपूर्ण छ। र धेरै साइटहरू सफलतापूर्वक भिडियोमा स्विच गरियो।
यस लेखको निम्न पृष्ठहरूले तपाईंको वेब पृष्ठहरूमा भिडियो थप्न कसरी मद्दत गर्नेछ भनेर फायरफक्स 3.5, ओपेरा 10.5, क्रोम 3.0, सफारी 3 र 4, आईफोन र एन्ड्रोइड, फ्लैश, र इन्टरनेट एक्सप्लोरर 7 र 8. मा काम गर्नेछ। यदि आवश्यक भएमा अन्य पुराना ब्राउजरहरूको लागि समर्थन थप्न आवश्यक कुञ्जीहरू छन्।
03 मध्ये 10
तपाईंको भिडियो सिर्जना र सम्पादन गर्नुहोस्
तपाइँ वेब पेजमा भिडियो राख्न जाँदै हुनुहुन्छ जब तपाइँलाई आवश्यक पहिलो कुरा वास्तविक भिडियो हो। तपाईं या त निरन्तर गोली मार्न र त्यस पछि सम्पादन गर्नको लागि एक सुविधा सिर्जना गर्न सक्नुहुन्छ, वा तपाईं यसलाई लिपि गर्न सक्नुहुन्छ र यसलाई अगाडी बढावा गर्न सक्नुहुन्छ। कुनै पनि तरिका राम्रो काम गर्दछ, यो तपाईं जो आराम संग जो केहि छ। यदि तपाईलाई थाहा छैन कि तपाईंले कस्तो प्रकारको भिडियो बनाउन सक्नुहुनेछ, यी विचारहरू डेस्कटप भिडियो गाइडबाट जाँच गर्नुहोस्:
- परिवार भिडियो परियोजनाहरू
- मार्केटिंग र प्रोमोशनल भिडियोहरू
- भिडियो भर्चुअल टूर
- कसरी भिडियोहरू
- विवाहका भिडियोहरू
उच्च गुणवत्ता भिडियो कसरी रेकर्ड गर्ने जान्नुहोस्
निश्चित गर्नुहोस् कि तपाईं कसरी घरको बाहिर र बाहिर रेकर्ड कसरी गर्ने साथै साथै कसरी अडियो रेकर्ड गर्न सक्नुहुन्छ। लाइटिंग पनि एकदम महत्त्वपूर्ण छ - शटहरू जुन उज्ज्वल हुन्छ आँखालाई चोट पुर्याउँछ, र अँध्यारो मात्र दुखी र अपरिचित देखिन्छ। यदि तपाईं आफ्नो साइटमा 30-सेकेन्ड भिडियो मात्र योजना बनाउनुहुन्छ भने, उच्च गुणस्तर अझ राम्रो छ यो तपाईंको वेबसाइटमा प्रतिबिंबित हुनेछ।
याद राख्नुहोस् कि प्रतिलिपि अधिकार कुनै पनि ध्वनि वा संगीत (साथै स्टक फुटेज) मा लागू हुन्छ जुन तपाईले तपाइँको भिडियोमा प्रयोग गर्न चाहानुहुन्छ। यदि तपाइँसँग एक मित्रको पहुँच छैन भने जसले तपाईंको लागि गीत लेख्न र गीत बजाउन सक्छ, तपाइँलाई पृष्ठभूमिमा प्ले गर्नको लागि रोयल्टी-मुक्त संगीतलाई आवश्यक पर्दछ। तपाईंको भिडियोहरूमा थप्नका लागि स्टक फुटेज पनि हुन सक्ने स्थानहरू छन्।
तपाईंको भिडियो सम्पादन गर्दै
यसले तपाइँलाई प्रयोग गर्ने सम्पादन सफ्टवेयरमा कुनै कुरा गर्दैन, तपाइँसँग यो परिचित हो जबसम्म लामो समय सम्म यो प्रभावकारी प्रयोग गर्न सक्दछ। डेस्कटप भिडियो गाइडमा Gretchen, केहि पेशेवर भिडियो संपादन सुझावहरू छन् जसले तपाईंलाई आफ्नो भिडियो सम्पादन गर्न मद्दत गर्न सक्छ ताकि तिनीहरू राम्रो देखिन्छ।
तपाईंको भिडियो एक MOV वा AVI (वा MPG, CD, DV) मा बचत गर्नुहोस्
यस ट्यूटोरियलको बाँकीको लागि, हामी तपाईंको भिडियो को केहि प्रकारको उच्च गुण (गैर-संकुचित) ढाँचामा AVI वा MOV जस्ता सुरक्षितमा सुरक्षित गरेको मानिन्छ। जब तपाइँ यी फाईलहरू तिनीहरूका रूपमा प्रयोग गर्न सक्नुहुनेछ, तपाइँसँग हामीले पहिले नै छलफल गरेको भिडियोको साथ सबै समस्याहरू चलाउछौँ। निम्न पृष्ठहरूले तपाईको फाइल कसरी तीन प्रकारमा रूपान्तरण गर्ने भनेर व्याख्या गर्नेछ ताकि यो ब्राउजरको सबैभन्दा ठूलो संख्या द्वारा हेर्न मिल्छ।
04 मध्ये 10
भिडियोलाई Ogg मा फायरफक्सको रूपान्तरण गर्नुहोस्
पहिलो ढाँचा हामी ओभरमा रूपान्तरण गर्नेछौं (कहिलेकाहीँ Ogg-Theora भनिन्छ)। यो ढाँचा एक हो कि फायरफक्स 3.5, ओपेरा 10.5 र क्रोम 3 ले सबै अवलोकन गर्न सक्दछ।
दुर्भाग्यवश, Ogg सँग ब्राउजर समर्थन गर्दा, धेरै प्रसिद्ध ज्ञात भिडियो कार्यक्रमहरू जुन तपाईं किन्न सक्नुहुनेछ (एडोब मिडिया एन्कोडर, क्विक टाइम, आदि) एक Ogg रूपान्तरण विकल्प प्रस्ताव गर्दैन। त्यसैले Ogg मा तपाईंको भिडियो कन्वर्ट गर्ने एकमात्र तरिका वेबमा रूपान्तरण कार्यक्रम खोज्न हो।
रूपान्तरित विकल्पहरू
त्यहाँ मिडिया-कन्वर्ट भनिन्छ अनलाइन उपकरण हो जुन भिडियोको विभिन्न ढाँचाहरू (र अडियो) लाई अन्य भिडियो (र अडियो) ढाँचाहरूमा रूपान्तरण गर्न दावी गर्दछ। जब हामीले यसलाई मेरो 3-सेकेन्ड परीक्षण भिडियोको साथ प्रयास गर्यौं, हामीले यसलाई मेरो म्याकमा काम गर्न सकेनौँ। तर तपाईं राम्रो भाग्य हुन सक्छ। यस साइटमा नि: शुल्कको फाइदा छ।
हामीले फेला पाएका केही अन्य उपकरणहरू:
- Miro भिडियो कन्वर्टर (विन्डोज म्याकिनोटोस) - यो कार्यक्रममा Ogg र MP4 (H.264) मा परिवर्तित गर्ने को लागी लाभ छ र यो खुला स्रोत हो।
- कोयटेट भिडियो कनवर्टर (विन्डोज)
- नि: शुल्क भिडियो कनवर्टर हामी सोच्दछौं कि यसमा यो एक विन्डोज र एक Macintosh संस्करण छ, तर यो उनीहरूको साइटबाट बताउन गाह्रो थियो
- सरल Theora Encoder (Macintosh) - यो हामी हो प्रयोग गर्ने गर्छौं।
एकपटक तपाईं Ogg ढाँचामा बचत भएपछि एकपटक तपाईंको वेबसाइटमा स्थान बचत गर्नुहोस् र अर्को पृष्ठमा अन्य ब्राउजरका लागि अन्य ढाँचाहरूमा रूपान्तरण गर्न जानुहोस्।
05 मध्ये 10
भिडियो सफारी को लागि MP4 मा बदल्नुहोस्
अर्को ढाँचा तपाईंले आफ्नो भिडियो MP4 (H.264 भिडियो) मा रूपान्तरित गर्नुपर्छ ताकि यो सफारी 3 र 4 मा र आईफोन र एन्ड्रोइडमा खेल्न सकिन्छ। साथै, H.264 भिडियोहरू फ्ल्यास हेर्नका लागि FLV फाइलहरूमा सजिलै रूपान्तरण गर्न सकिन्छ।
यो ढाँचा व्यापारिक उत्पादनहरूमा अधिक सजिलै संग उपलब्ध छ, र तपाईसँग पहिले नै एउटा प्रोग्राम छ जुन तपाईंको भिडियो सम्पादक छ यदि MP4 मा रूपान्तरित हुनेछ। यदि तपाइँसँग एडोब प्रीमियर छ भने तपाई एडोब भिडियो एनकोडर प्रयोग गर्न सक्नुहुन्छ, वा यदि तपाइँसँग छ QuickTime प्रो जसले पनि काम गर्नेछ। हामीले अघिल्लो पृष्ठमा छलफल गरेका धेरै कन्वर्टर्सहरूले भिडियोहरू MP4 मा पनि परिवर्तित गर्दछन्।
- मिडिया-रूपान्तरण - एक अनलाइन उपकरण
- Miro भिडियो कन्वर्टर (विन्डोज म्याकिनोटोस) - यो कार्यक्रममा Ogg र MP4 (H.264) मा परिवर्तित गर्ने को लागी लाभ छ र यो खुला स्रोत हो।
- सुपर (विन्डोज) - धेरै फाइल प्रकारहरू MP4 र FLV मा रूपान्तरित हुनेछन्
- नि: शुल्क भिडियो कनवर्टर हामी सोच्दछौं कि यसमा यो एक विन्डोज र एक Macintosh संस्करण छ, तर यो उनीहरूको साइटबाट बताउन गाह्रो थियो
तपाईंको MP4 फाइललाई तपाइँको वेबसाइटमा बचत गर्नुहोस् र त्यसपछि तपाइँ यसलाई फ्लैशमा इन्टरनेट एक्सप्लोरर प्रयोग गर्न यसलाई फेरबदल गर्न आवश्यक छ।
06 मध्ये 10
इन्टरनेट एक्सप्लोररको लागि भिडियोलाई FLV मा रूपान्तरित गर्नुहोस्
FLV मा भिडियोहरू कन्वर्ट गर्ने सबैभन्दा सजिलो तरीका फ्लैशलाई प्रयोग गर्न हो। हामी कसरी मेरो भिडियोहरू फ्ल्यास गर्न रूपान्तरण गर्दछौं। तर यदि तपाइँसँग फ्लैश छैन भने, यहाँ FLV फाइलहरू परिवर्तित गर्न दुई लोकप्रिय उपकरणहरू छन्:
- सुपर (विन्डोज) - धेरै फाइल प्रकारहरू MP4 र FLV मा रूपान्तरित हुनेछन्
- ffmpegX (Macintosh) - धेरै फाइल प्रकारहरू Mp4 र FLV मा रूपान्तरित हुनेछन्।
तपाईंको FLV फाइललाई तपाइँको वेबसाइटमा बचत गर्नुहोस् र अर्को पृष्ठले तपाईंलाई कसरी HTML लेख्न सक्छ भनेर तपाइँले तपाईंका भिडियोहरू प्ले गर्न सक्नुहुन्छ।
07 मध्ये 10
तपाईंको वेब पृष्ठमा भिडियो तत्व थप्नुहोस्
वेब पृष्ठहरूमा भिडियो थप्न HTML 5 प्रयोग गर्न सजिलो छ। प्रायजसो आधुनिक ब्राउजरले एचटीएमएल 5 भिडीयोलाई समर्थन गर्दछ, यद्यपि तिनीहरू सबैले त्यसो नै समर्थन गर्दैनन्। तर यसको अर्थ यो हो कि यदि तपाइँ आफ्नो भिडियो दुवै Ogg र MP4 ढाँचाको रूपमा बचत गर्नुहुन्छ भने, तपाईं सबै भन्दा आधुनिक ब्राउजरहरूमा प्रदर्शन गर्न (केवल एक्टर एक्सप्लोरर 8 बाहेक) को लागि केवल चार वा पाँच रेखा एचटीएमएलहरू लेख्न सक्नुहुनेछ। यहाँ कसरी छ:
- HTML 5 Doctype मार्कर लेख्नुहोस् ताकि ब्राउजर HTML 5 को आशा गर्न जान्दछन्:
- तपाईंको वेब पेज बनाउनुस् जसको रूपमा तपाइँले सामान्यतया यसलाई सिर्जना गर्नुहुनेछ:
<शीर्षक>
- शरीर भित्र, <भिडियो> ट्याग राख्नुहोस्:
- निर्णय गर्नुहोस् कि तपाइँले तपाइँको भिडियोको लागि के गर्न चाहानुहुन्छ कि विशेषताहरू:
- स्वत: प्ले - चाँडै डाउनलोड गर्न सुरू गर्न सुरु गर्नुहोस्
- नियन्त्रण - तपाईंको पाठकहरूलाई भिडियो नियन्त्रण गर्न अनुमति दिनुहोस् (पज, उल्टो, छिटो-अगाडि)
- लूप - भिडियो सुरूबाट सुरू गर्नुहोस् जब यो समाप्त हुन्छ
- प्रीलोड - भिडियो पूर्व-डाउनलोड गर्नुहोस् ताकि ग्राहकले यसलाई क्लिक गर्दा यो छिटो तयार छ
- पोस्टर - भिडियो बन्द हुँदा छवि प्रयोग गर्न चाहानुहुन्छ
<भिडियो नियन्त्रण पूर्वलोड>
- त्यसपछि तपाईंको भिडियो (MP4 र OGG) को दुई संस्करणहरूको लागि स्रोत फाइलहरू <भिडियो> तत्त्व भित्र थप्नुहोस्:
<भिडियो नियन्त्रण पूर्वलोड>
- क्रोम 1, फायरफक्स 3.5, ओपेरा 10, र / वा सफारी 4 मा पृष्ठ खोल्नुहोस् र यो निश्चित गर्नुहोस् कि यो सही रूपमा प्रदर्शन गर्दछ। तपाईंले कम्तिमा फायरफक्स 3.5 र सफारी 4 मा यो परीक्षण गर्नुपर्छ - किनकि तिनीहरू प्रत्येक फरक कोडेक प्रयोग गर्छन्।
त्यो हो। एकपटक तपाईले यस कोडको साथ एकपटक तपाईंको भिडियो पाउनुहुनेछ जुन फायरफक्स 3.5, सफारी 4, ओपेरा 10, र क्रोममा काम गर्दछ। तर के भन्नाले Internet Explorer को बारेमा?
इन्टरनेट एक्सप्लोररले HTML 5 वा
अर्को खण्डमा, हामी तपाईंको HTML 5 भिडियो ट्यागको साथ राम्रो तरिकाले प्ले गर्न IE 8 प्राप्त गर्न के गर्न सक्नुहुन्छ भन्ने कुराको बारेमा कुरा गर्नेछौं र एक भिडियो प्रदर्शन गर्नेछौं। तपाईंले फ्लैश प्रयोग गर्नु पर्छ। सुसमाचार यो हो कि आईई 9 एचटीएमएल 5 र भिडीयो ट्यागको समर्थन गर्ने अपेक्षा गरिन्छ।
08 को 10
जाभास्क्रिप्ट र फ्लैश प्लेयर कार्य गर्न इन्टरनेट एक्सप्लोरर प्राप्त गर्न
तपाईंले अघिल्लो पृष्ठको एचटीएमएलमा देख्नु भएको थियो, FLV फाईलको लागि कुनै स्रोत रेखा थिएन। र यदि तपाईंले त्यो पृष्ठ इन्टरनेट एक्सप्लोररमा परीक्षण गर्नुभयो भने यसले काम गर्दैन। यो किनभने किनभने इन्टरनेट एक्सप्लोररले HTML 5 चिन्न सकेन र यो ओजीजी वा एमपी 4 भिडियोहरू natively नि: शुल्क खेल्न सक्दैन। काम गर्नको लागि इन्टरनेट एक्सप्लोरर 7 र 8 प्राप्त गर्न, तपाईंले भिडियोलाई फ्लैशको रूपमा प्ले गर्नु आवश्यक छ। तर FLV फाईल जोड्नु भन्दा यसलाई काम गर्न को लागी थप कदमहरू छन्।
चरण 1: तपाईंको वेबसाइटको लागि फ्लैश भिडियो प्लेयर पाउनुहोस्
हामी फ्लोप्लेयर प्राप्त गर्न सिफारिस गर्दछौं किनभने यो खुला स्रोत फ्लैश भिडियो प्लेयर हो जुन तपाइँ आफ्नो वेब सर्भरमा स्थापना गर्न सक्नुहुनेछ र जब तपाइँसँग फ्लैश भिडीयो प्ले गर्न प्रयोग गर्नुहोस्। FlowPlayer को नि: शुल्क संस्करण तपाईंको भिडियोमा विज्ञापन सम्मिलित गर्दछ, तर तपाईलाई उनीहरूको आवश्यकता भएमा ब्यापारिक इजाजत पत्र खरिद गर्न सक्नुहुन्छ।
तपाईंको वेबसाइटमा FlowPlayer स्थापना गर्न FlowPlayer साइटमा निर्देशनहरू पालना गर्नुहोस्। संक्षेपमा, तपाईं 2 SWF फाइलहरू र तपाईको साइटमा जाभास्क्रिप्ट फाइल स्थापना गर्नुहुनेछ। तपाईंको एचटीएमएलको तल ( ट्याग भन्दा पहिले) तपाईंले एउटा रेखा थप्नुहुनेछ: