 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL HTML और CSS tutorial में आपका स्वागत है। आज हम लेसन १४ सीखेंगे।
पिछले लेसन में हम ने <div> tag और <span> tag के बारे में सीखा।
आज हम वेब पेज में वीडियो डिस्प्ले करना सीखेंगे।
HTML video tag
HTML5 में <video> tag होता है। इसका उपयोग वेब पेज में वीडियो दिखाने के लिये होता है।
Video tag के दो attributes - width और height होते हैं। इनका उपयोग वीडियो के height और width के लिए होता है। वीडियो इन दो attributes के बिना भी डिस्प्ले हो सकता है। लेकिन इन attributes से वेब ब्रउर को वीडियो के height और width मालूम होते हैं और वीडियो ठीक तरह से डिस्प्ले होता है। इसलिये यह attributes कभी भी देने चाहिए।
इस tag का और एक attribute होता है - "controls". यह attribute वीडियो के controls दिखता है, जैसे play, pause, volume control वगैरह।
Source element of video tag
Video element में और एक element होता है - <source>। इसका उपयोग वीडियो का नाम देने के लिए होता है। <source> element को attribute होता है - "src"। इस attribute में वीडियो का नाम लिखते हैं। <source> element का और एक attribute होता है - "type"। इस में वीडियो की फाइल type दी जाती है।
अब ध्यान से देखिये की <source> tag कैसा लिखते हैं।
<source src="name of video" type="video/mp4">
तो एक वीडियो display करने के लिये कोडिंग ऐसा होता है।
<video width="320" height="240" controls>
<source src="vid1.mp4" type="video/mp4">Video is not supported by your browser
</video>
हम यह हमारे प्रोग्राम में लिखेंगे। एक नयी Notepad फाइल ओपन कीजिये। इस में "lesson-13" का पहले लाइन से </head> तक कोड कॉपी कीजिये। इस के नीचे <body> लिखिए और इस के नीचे ऊपर लिखा हुआ वीडियो का कोड कॉपी कीजिये। </body> and </html> लिखिये। Source कोड की PDF फाइल देखने के लिए आकृति १४-१. पर क्लिक कीजिये।
 |
| आकृति १४-१ HTML video tag, display video on a web page |
इस फाइल को "Lesson-14" और "Lesson-14.html" नाम से save कीजिये। HTML document पर डबल क्लिक कीजिये।
 |
| आकृति १४-२ HTML video tag, video in web page |
वेब पेज में हमारा वीडियो दिख रहा है। इसके प्ले, स्टॉप, वोल्युम वगैरह कंट्रोल्स डिस्प्ले हुए हैं। यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
हम <source> element में एक से ज्यादा वीडियो के नाम दे सकते हैं। अगर browser पहला वीडियो नहीं दिखा सकता है तो दूसरा वीडियो दिखायेगा।
<video> tag में जो टेक्सट लिखा होता है ("Video is not supported by your browser") डिस्प्ले नहीं होता। जब वीडियो डिस्प्ले नहीं होता है तभी यह टेक्सट वेब पेज में डिस्प्ले होता है।
Important Points:
१. HTML5 में <video> tag होता है जिस का उपयोग वेब पेज में एक वीडियो इन्सर्ट करने के लिये होता है।२. <video> tag के width, height, और controls, attributes होते हैं।
३. <source> element का उपयोग वीडियो फाइल का नाम देने के लिये होता है।
४. <source> element का "src" attribute होता है जिसमें वीडियो फाइल का नाम लिखते हैं। इस element का "type"attribute होता है जिसमें वीडियो फाइल का type दिया जाता है।
लेसन १३ लेसन १५
