Up next in 10
Video, Audio & Media in HTML _ Sigma Web Development Course - Tutorial #10
93 views
Mar 11, 2024
In Tutorial #10 of the Sigma Web Development Course, we explore the dynamic world of multimedia integration with HTML. This session delves into the incorporation of video, audio, and other media elements, providing participants with the skills to enrich their web content. Viewers will learn the ins and outs of embedding videos, audio files, and other media formats into HTML, along with essential attributes and options for customization. Whether you're a novice seeking to enhance your website's engagement or an experienced developer looking to expand your toolkit, this tutorial offers practical guidance on leveraging HTML for seamless multimedia integration. Join us as we uncover the possibilities of creating interactive and engaging web experiences through the strategic use of video, audio, and other media elements.
View Video Transcript
0:00
कि आज के इस वीडियो में हम लोग जानेंगे कि ऑडियो वीडियो और मीडिया एलिमेंट से इस टीम में किस तरह स��
0:04
इस्तेमाल किए जाते हैं हम लोगों अपने वेरी फर्स्ट वीडियो में देखा था है कि हम लोग एस्टीएमल के अंदर वीडिय��
0:09
इंबेट कर सकते हैं, आज मैं आप लोगों को बताऊंगा किस तरह से वीडियो को आटो प्ले किया जाता है, किस तरह स��
0:13
म्यूटेड वीडियो को रखा जा सकता है, और किस तरह से आप लोग वीडियो के कंट्रोल्स को इनेबल और डिसेबल कर सकते हैं
0:19
उसी के साथ हम लोग audio के बारे में भी बहुत closely देखेंगे कि media को overall एक page में किस तरह से दिखाया जा सकता ह��
0:25
तो इस video को like जरूर कर देना और इस video में बने रहना क्योंकि जो examples मैंने use किये हुए हैं ना video tags के लिए वो बड़े धमाके दार है��
0:32
चलते हैं अब वीडियो स्क्रीन में लेट्स रोल दे इंट्रो दोस्तो इस बार मैंने वीडियो 10 नाम से फोल्डर बना लिया है औ��
0:47
शिव्ट राइट लिख करके ओबन विथ कोड खोल कर बार बार आपका टाइम विस्ट नहीं करूँग��
0:51
इन पाक इंडेक्स टॉट एसटीमल बनाऊंगा और आज के वीडियो का मुद्धा है वीडियो कि वीडियो किस तरह से प्ले किया जा��
0:58
एक एच्टीमल फाइल के अंदर वीडियो किस तरह से डाला जाए और यू किस तरह से डाला जाए मीडिया किस तरह से डाली आ��
1:05
तो वीडियो को आड़ करना एकदम स्ट्रेटफॉर्वर्ड है, मैं यहाँ पर कॉपी करूँगा इसको, जो कि हमारे वीडियो टैग है, इसका एक SRC अट्रिब्यूट होता है, और इसके कुछ और अट्रिब्यूट से इसके बारे में मैं आप लोगों से डिस्कस करूँगा, ��
1:35
तो मैं क्या कर सकता हूं कि इसकी विट दे सकता हूं तो मैं कह सकता हूं यहां पर विट इस इकवाल टू 555 पिक्सिल्स औ��
1:42
जैसे में 555 पिक्सिल्स करूंगा इन फैक्ट मुझे पीएक्स लिखने की जरूरत है मैं सिर्फ आईट पाइट पर हुआ था इमेज मे��
1:47
पीएक्स लिखने की जरूरत नहीं पड़ती है यहां भी हमें पीएक्स लिखने की जरूरत नहीं पड़ेगी तो जैसे ही मै��
1:52
विट इज इकल टू फाइव फाइव किया मैं इन फैक्ट मैं काम करता हूं हाइड इज इकल टू फाइव फाइव करता हूं त��
1:57
और छोटा हो जाए इन पैक्टर इसको और छोटा करता हूं मैं टू फाइप कर देता हूं और आप देखो यहां पर ��
2:02
गया ठीक है अब मैं इसे प्ले करता हूं कि मैंने कंट्रोल से कमेंट से प्ले कर सकता हूं यहां देखो अमेरिक��
2:07
अच्छी रोडे अभी तो फैला लगाएगा तो यहां पर कुछ एट्रिब्यूट से वीडियो टैक तो यह वीडियो टैक को यूज करना एकदम सिंपल है आपक��
2:22
वीडियो होना चाहिए वीडियो का जो आपने पाथ है वो दी दिया उसको आपने कंट्रोल्स ली दिया तो य��
2:26
कंट्रोल्स आ जाएंगे आपके पास आप इसे डाउनलोड कर सकते हो फुल स्क्रीन कर सकते हो म्यूट कर सकत��
2:30
पिछ inside पिछर कर सकते हो यह सब आपके ब्राउजर ऑटोमाटिकली प्रदान करता है लेकिन कुछ आट्रिब्यू��
2:35
से बारे में बताता हूं सबसे पहले आट्रिब्यूट है एस आर सी तो आपको पता ही होगा कि यार वीडियो डाल दो यहा��
2:39
वीडियो फाइल का नाम वह ऐसा रशिय है यह वीडियो फाइल एक्सटरनल यूआरल से भी आ सकती है समझ लो आप लोगे नहीं कि अगर मैंने आमजो��
2:46
पर यह कहीं और वीडियो अपलोड कर दिया तो वहां का यूअरल भी डाल सकता हूं यहां पर मतलब जरूरी नहीं है आपक��
2:51
कंप्यूटर में ही वह फाइल आपके सर्वर पर भी हो सकती है थर्ड पार्टी से भी आ सकती है अब कंट्रोल्स क्या करत��
2:57
आट्स वीडियो कंट्रोल्स लाइक प्लेपॉज एंड वॉल्यूम जो कि हमने यहां पर देखा बुपिंदर जोगी वाले वीडियो में क��
3:02
आप यहां पर जो है कंट्रोल सबको देखने को मिल रहा है अब क्या है कि यह चीज था ब्राउजर ऑटोमाटिकली देखत��
3:08
कि क्या गंट्रोल है उनके आपके वीडियो में क्या नहीं होंगे फिर देखो ऑटो प्ले क्या करेगा ऑटोमेटिकली प्ल��
3:13
कर देगा जैसे पीज लोड होगा ठीक है तो ऑटो प्ले अगर मैं यहां पर लगा दूं मैं यहां पर लगा देता हूं ऑटो प्ल��
3:18
यहां देखो आपने मार्केट के रोडे कैसी क्या हो रही है तो देखो यहां पर आप देख सकते हैं यहां पर क��
3:25
ऑटो प्ले हो गया ठीक है तो मैं ऑटो प्ले को उठा दूंगा यहां से और अगला जो हमारा एट्रीब्यूट है वह ENTER
3:49
कर देता है तो मैं अगर यहां पर लिख दूं म्यूटेड कभी-कभी हम चाहते हैं कि वीडियो म्यूटेड हो इ��
3:53
फाक्ट जब मैं यहां पर वीडियो आड करता हूं को डेट कॉम पर और मैं कोई चीज डेमोंस्ट्रेट करता हूं इस��
3:58
इसको डाउनलोड करना है कुछ तो मैं म्यूटेड एट्रिब्यूट का इस्तेमाल करता हूं यह मैं नहीं चाहता कि ज��
4:03
मैंने वीडियो रिकॉर्ड किया अगर कोई बैकराउंड नॉइस है वह आपको सुनाई दे फॉर एग्जांपल मैं आपको दिखान��
4:07
आता हूं कि एलिमेंट है तो मैं ऐसे स्क्रॉल करके वीडियो बनाऊंगा इसको ऐसे हाइलाइट करूंगा तो उसमे��
4:11
आडियो नहीं चाहिए तो मैं म्यूटेड कर देता हूं उसको तो आप लोग अपनी वेबसाइट में म्यूटेड एटरब्यूट क��
4:16
अपने आपको आपको पता है कि वीडियो के डिमेंशन को स्पेसिफाइड करती है जैसे कि मैंने आपको विट और हाइट दोनों आईट करीं आपने देख��
4:46
तो I hope कि यह चीज समझ में आ गई होगी आप लोगों को अब इसके बाद जो चीज मैं आप लोगों को बताना चाहता हू��
4:53
वो है audio तो यह तो आपने वीडियो के सारे attributes दे के लिए एकदम straight forward ह��
4:57
मैं चाहता हूँ कि आप एक website बनाओ बढ़िया सी जो कि मैं आप लोगों इस वीडियो को एंड में भी देने वाला हूं कोई क्विज में तो कोई क्विज जरूर सुन लेन��
5:03
इन फैक्ट मैं आप डाली देता हूं हेडिंग अभी से कोई क्विज ठीक है ताकि मैं भूलू ना यह आपको भी दूंगा औ��
5:10
इस प्रोब्लम को लिखें और सब्सक्राइब करें और इस प्रोब्लम को लिखें और सब्सक्राइब करे��
5:20
और इस प्रोब्लम को लिखें और सब्सक्राइब करें और इस प्रोब्लम को लिखें और सब्सक्राइब करे��
5:30
लेंगे यहां पर कंट्रोल्स भी रिखना होगा मुझे तो अगर मैं कंट्रोल से लिखोंगा तो मुझे आडियो नही��
5:35
दिखेगी देखो अब आगे यह ऑडियो आपको कंट्रोल्स मुझे दिखेगा इसकी वॉल्यूम भी सेट कर सकता हूं मैं त��
5:39
ले करता हूं इस ऑडियो को चाहिए तो यह ऑडियो हमारी इसको म्यूट करके चला तो यह नहीं चलेगी और आगे भ��
5:47
बढ़ा सकता है इसको लगा ठीक है आप लोगों ने देख ली तो यह सचिन और एंड एंड इस नाम की ऑडियो है अब हम क्य��
5:52
करेंगे कि इस ऑडियो के कुछ एट्रीब्यूट्स को देखेंगे ऐसा आपको पता है कि सोट्स वीडियो फाइल का ठीक है फि��
6:00
इसके बाद कंट्रोल आप लोगों को पता है कि प्लेप ऑजर वॉल्यूम जो कि हमने अभी देखा ऑटोप्ले क्या करेग��
6:04
automatically play कर देगा अगर मैंने यहाँ पर auto play क्या है सचिन मैं automatically play होगी लपूसा सचिन है तो auto play करने से क्या हुआ है यह automatically play होगी audio हमारी इसके बाद अगला attribute जो है वो है loop loop क्या करेगा इसको repeat कर देगा अगर मैं इसको loop करना चाहता तो मैंने auto play कर दिया और मैं loop कर दूँ सचिन क्या ��
6:34
क्योंकि लूप कर रही थी मैंने ऑडियो ठीक है तो यह चीज आप लोगों ने देख ली सचिन टो टेंपी थी लूप कर दी मैंन��
6:40
यानि कि एक बार बजी फिर बच गई फिर बच गई ठीक है सचिन क्या है सचिन ठीक है बार-बार बोले जाती थी वह क्योंक��
6:46
MP3 बार बार play होगी तो कई use cases है इसके की आप जब चाहोगे की MP3 ये repeat हो ठीक है तो अगर आप चाहते हो की MP3 repeat हो तो आप इसको use कर सकते ह��
6:57
अब इसके बाद जो है muted क्या करेगा mute कर देगा audio को and definitely आप नहीं चाहते की by default आपकी audio mute most of the cases मे��
7:06
बट हम कभी-कभी चाहेंगे कि जो ऑडियो हो म्यूटेड और हम यहां पर बोल सकते हैं यूजर को भाई जिसको सुनन��
7:13
और न्यूट करके इसका क्या है ऐसा कब करते हैं जो मल्टिपल ऑडियो होती है आप पांच ऑडियो एक साथ दिखान��
7:18
use mute play unmute control use I hope
7:48
अगर आप चाहते हो कि ब्राउजर data को fetch कर ले तब आप preload attribute को use करोग��
7:54
वरना आप preload attribute को use नहीं करोगे ठीक है preload is equal to none
7:58
default value है preload is equal to metadata मतलब कि ब्राउजर सिर्फ metadata
8:02
यानि कि उस audio file के बारे में जो information है उसको preload करेग��
8:06
यानि कि पहले से load करेगा और आटो करने से क्या होगा कि browser preload कर लेगा entire audio को, ठीक है
8:11
तो preload is equal to auto अगर मैं करूँगा तो यह download हो जाएगी और automatically load हो जाएगी ताकि जब भी user play करें इसक��
8:18
तो बच जाए audio, ठीक है? तो preload attribute का यह काम होता ह��
8:22
और interviews में बहुत पूछा जाता है यह जो preload attribute है तो आपको पता होना चाहिए कि मैं preload attribute क्या ह��
8:27
आगे बढ़ने से पहले मैं चाहता हूँ कि आप इस playlist को share करो अपने दोस्तों के साथ क्योंकि मैं देख रहा हूँ कि या��
8:31
interest काफी decline हो रहा है जैसे हैं हम videos में आगे बढ़ते जा रहे हैं मेरी आपको से गुजारी चाहिए कि यार आप लोग इस वीडियो को लाइक कर��
8:38
और उसी के साथ साथ जैसे जैसे आप इस repository को fork कर रहे हो इसको star भी करते जाना या ठीक ह��
8:43
आपका star आपके likes ये सब काफी help करेंगे मुझे इस तरह के free courses लाने मे��
8:48
तो यार ये था audio और video tags के बारे में ठीक है मैंने आपको सारे attributes भी बताए यहाँ प��
8:53
और आप लोग इसको definitely use करना है यह जो सारी images हैं यह मैं आपको दे दूँग��
8:56
ताकि आप लोग अच्छे से try out कर पाओ इस चीज़ को अब बहुत सारे लोग ये पूछ रहे थे कि क्या ह��
9:00
replit का इस्तेमाल कर सकते हैं देखो इस course में मैंने replit का इस्तेमाल नहीं किया ह��
9:05
बट replit.com is an amazing website अगर आप लोग चाहते हो आप phone मे��
9:09
use करो, html वगैरा अगर आप लोग चलाना चाहते हो, replit की app भी ह��
9:13
iOS के लिए भी है, Android के लिए भी है, तो अब इसको try out कर सकते हैं, बहुत सारी लोग पूछ रहे हैं कि यार phone में कैसे कर recording
9:18
replate, लेकिन मैं अभी क्या चाह रहा हूँ न, कि VS Code, जो कि most of the लोग जो है, use करना चाहते हैं, prefer करते हैं
9:24
तो मैंने सोचा क्यों ना Vs Code में मैं बनाऊँ videos बट मैं personally काफी जो है replate का इस्तेमाल करता हू��
9:30
in fact videos भी आते हैं replate में अगला जो topic है वो SVG है media से related
9:34
SVG क्या होती है SVG एक format होता है जिससे कि आप लोग जो है image को create कर सकते ह��
9:40
काफी high graphics वाले vector images तो copy करोगे आप लोग तो इसमें basically circle वगैरह ये सब आप बना सकते ह��
9:46
तो SVG को बिल्कुल उसी तरह से use किया जाता है जिस तरह से use किया जाता ह��
9:51
हमारे IMG tag को तो देखो अगर मैं यहाँ पर SVG डालूँगा तो यह SVG यहाँ पर आ जाएग��
9:55
तो यह तो यह सरकुलर सब्सक्राइब यह इन लाइन एलिमेंट्स तो अब यहां पर क्या है कि आप सब्सक्राइब कर सकते ह��
10:09
अलग से SVG फाइल को सेव कर सकते हैं जो कि मैं यहां पर लिख दूं कि IMG डॉट SVG और SVG का content इसमें सेव कर दू��
10:16
तो अगर मैं यहां पर फिर IMG करके लिखूंगा इसको और ऐसा जी लिखूंगा IMG डॉट SVG तो आप लोग यहां पर देख��
10:24
कि ये मुझे नहीं देखने को मिली image अगर मैं यहाँ पर alt लिख दू��
10:27
और लिखू my svg image तो आप देखना यहाँ पर my svg image ऐसे आ गया लेकिन svg मुझे देखने को नहीं मिल��
10:34
ऐसा क्यों हुआ ऐसा इसलिए हुआ क्योंकि जो svg है svg file in browser मैं लिखता हू��
10:41
और SVG फाइल आप जब भी ब्राउजर में चाहेंगे कि आपको दिखे तो आप एक declaration ऊपर डालेंगे मैं आपको दिखाता हू��
10:49
तो मैंने यहाँ पर लिखा SVG फाइल not showing तो यहाँ पर stack overflow का एक answer है जो कि आपको बता देग��
10:55
XML Namespace declaration SVG SVG important
11:10
और बहुत सारे लोग, फ्यूचर में जब भी वेबसाइट बनाओगे आप लोग अपनी अपनी तो इस प्रॉब्लम में जरूर फसेंगे मैं फसता रहत��
11:16
हूं ठीक है तो मैं आपको बता रहा हूं कि आप जिन प्रॉब्लम में आप फस होगे वह पहले ही बता दी मैंने आपक��
11:20
आपको प्रॉब्लम आई नहीं है मैंने प्रॉब्लम भी बता दी कि आने वाली है और सॉल्यूशन भी बता दिय��
11:24
अगला टॉपिक है आई फ्रेम्स आई फ्रेम्स भी बहुत ही सिंपल सी चीज है कि आई फ्रेम्स से आपको एक दूसर��
11:29
website को embed कर सकते हूँ अपनी website में ठीक है जैसे कि अगर मैं चाहता हूँ कि यह web page क��
11:34
मैं embed कर दूं तो मैं कुछ इस तरह से i frame को इस्तेमाल करके कर सकता हूँ तो देखो मैंने लिखा i
11:38
यह और इस यूआरल को मैं कॉपी करूंगा और यहां पर मैं पेस्ट करूंगा और आप लोग यहां पर देखो कि ज��
11:45
वेबसाइट यह पूरी जो है एमबेड हुई यहां पर इतने से आई फ्रेम में ठीक है आप डेफिनेटली चाहोगे कि बड़��
11:50
रहें मैं आप एमबेड करो पर अगर आप चाहते हो कि एमबेड हो जाती है कुछ इस तरह से आप एमबेड कर सकते ह��
11:54
मैं काम करता हूं इसकी हाइट को थोड़ा सा बढ़ा लेता हूं तो विट इगल टो विट लिखा हुआ है विट इगल टो कर देत��
12:00
मैं लेटर से वन ट्वेंटी टू आईट इगल टू कर देता हूं फॉर फॉर फॉर ठीक है मान लो तो यह देखो यह कुछ इस तरह स��
12:06
आ गई ठीक है अब डेफिनेटली यह इस विड्ड में आ पारी थी तो यह इसी लाइन में आ गई पर मैं विड्ड को थोड़ा अग��
12:11
दो लेटर से मैं बेट कर दूं 322 ठीक है तो यह देखो यह पूरी यहां पर एमबेड हो गई मेरी वेबसाइट देख रह��
12:19
है आप लोग तो एक वेबसाइट को अब एमबेड कर सकते हो एक और यूज के इफ्रेम का है यूट्यूब वीडियो अगर आ��
12:24
आप YouTube वीडियो को शेयर करके यहाँ पर एमबेड पर क्लिक करोगे तो यह आपको आई फ्रेम कोड दे देगा और आप यहा��
12:30
पर किसी भी तरह से इसको स्टार्ट कर सकते हो आप चाहते हो एक पर्टिकुलर टाइम पर स्टार्ट हो तो वह भी आप यहा��
12:34
कर सकते हैं जिस पॉइंट पर स्टार्ट करके आप लोग इसको शेयर करोगे वह टाइम यहां पर आ जाता है इसमें आपक��
12:39
दिखाता हूं रुको अ इसे बालों चाहता हूं यहां से स्टार्ट हो ठीक है बालों यहां से स्टार्ट वीडियो त��
12:45
शेयर पर क्लिक करूंगा शेयर पर क्लिक करने के बाद एमबेड पर क्लिक करूंगा स्टार्ट एट 12 19 करूंगा और इसको कॉपी कर लूँगा यह कॉपी बटन है देखो और इसको यहाँ पर अपने कोड में डाल दूँगा तो यह आईफ्रेम को मैं तरह कॉमेंट आउट कर��
13:15
इस टेमल में सिर्फ इतना ही होता है प्रेडी मच ठीक है मिस्लेनियस हर टॉपिक में आपको बहुत सारी चीजे��
13:20
देखने को मिलेंगी बट प्रेडी मच दाट्स ऑल अबॉट मीडिया इस टीम में ऑडियो वीडियो मीडिया बस इतना ही ह��
13:25
इस व्हाट इविल यूज नाइनी फाइफ परसेंट अब टाइम्स ठीक है अब मैं आप लोगों को एक क्विज देता हूं और आपकी क्वि��
13:31
यह है कि create a website which shows videos of different category ठीक है and audios of different
13:39
categories you can use YouTube videos in an iframe using YouTube's embedding feature ठीक है तो आपन��
13:47
करना क्या है आप लोगों ने एक website बनानी है जिसमें आपको बहुत सारा content मिलेगा अब आ��
13:52
video audio tags का इस्तेमाल करके और YouTube की इस share feature का इस्तेमाल करके इस तरह से मैंन��
13:57
मैंने यूट्यूब वीडियो एमबेट किया था यहाँ पर उसी तरह से आप लोग भी एमबेट कर सकते ह��
14:01
और एक बहुत ही बढ़िया सी वेबसाइट बनाकर मुझे दिखाना आप लोग आप लोग चाहो तो गेटप का कॉमेंट मुझे दे सकते ह��
14:06
और उसी के साथ साथ आप चाहो तो मुझे code भी बता सकते हो, explain कर सकते ह��
14:10
बट इस quiz को ज़रूर attempt करना और comment section में sigma batch op ज़रूर लिख देन��
14:14
इस playlist को access कर लेना वीडियो को like कर देना, sigma batch op ज़रूर लिख देन��
14:18
अभी के लिए इस वीडियो में इतना है guys Thank you so much guys for watching this video and I will see you next time
#Flash-Based Entertainment
#Fun & Trivia
#Multimedia Software
#Music Videos
#Photo & Video Sharing
#Software
#Video Sharing
#Voice & Video Chat