इस पाठ में हम एक वीडियो प्लेयर बनाएंगे, इसके लिए हम मॉडलिंग के लिए CSS3 और कार्यक्षमता के लिए "MediaElement.js" लाइब्रेरी का उपयोग करेंगे। MediaElement.js एक HTML5 ऑडियो और वीडियो प्लेयर है जो पुराने ब्राउज़रों में काम करता है जो Flash और Silverlight का उपयोग करके
MediaElement HTML5 API का अनुकरण करता है।
डेमो विकल्पस्रोत फ़ाइलेंचरण 1 - MediaElement.js डाउनलोड करें
सबसे पहले आपको
"MediaElement.js" डाउनलोड करना होगा और इसे अनज़िप करना होगा। "बिल्ड" फ़ोल्डर से, हमें तीन फ़ाइलों की आवश्यकता है:
- flashmediaelement.swf
- MediaElement और player.min.js
- silverlightmediaelement.xap
इन तीन फ़ाइलों को एक निर्देशिका में कॉपी करें, मैं इस फ़ोल्डर का नाम "js" रखूंगा।
चरण 2 - एचटीएमएल मार्कअप
अब हमें jQuery लाइब्रेरी का लिंक सेट करना होगा। फिर लिंक पर
"मीडियालेमेंट-एंड-प्लेयर.मिन.जेएस" स्क्रिप्ट जोड़ें और सीएसएस फ़ाइल जोड़ें:
<head> <title>Video Player</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="css/style.css" media="screen"> </head>
वीडियो प्लेयर बनाने के लिए, हमें एक नया
HTML5 वीडियो टैग चाहिए। फिर हम इस टैग के लिए कुछ विशेषताएँ जोड़ेंगे: वीडियो की चौड़ाई और ऊँचाई और "कवर"। वीडियो शुरू होने से पहले कवर (छवि) दिखाया जा सकता है, जब तक कि उपयोगकर्ता प्ले बटन पर क्लिक नहीं करता है।
<video width="640" height="267" poster="media/cars.png"> <source src="media/cars.mp4" type="video/mp4"> </video>
अब हमें नियंत्रण बटन के लिए निम्न कोड जोड़ने और कुछ सेटिंग्स सेट करने की आवश्यकता है:
- alwaysShowControls - हमेशा नियंत्रण बटन, या केवल जब मँडरा दिखाओ
- वीडियोवोल्यूम - वॉल्यूम स्लाइडर
- विशेषताएं: ['प्लेपॉज़', 'प्रगति', 'वॉल्यूम', 'फ़ुलस्क्रीन'] - वीडियो नियंत्रण बटन
"MediaElement.js" आधिकारिक दस्तावेज
<script type="text/javascript">
चरण 3 - मूल शैलियाँ
आइए कुछ शैलियों को जोड़कर शुरू करें।
.mejs-inner, .mejs-inner div, .mejs-inner a, .mejs-inner span, .mejs-inner button, .mejs-inner img { margin: 0; padding: 0; border: none; outline: none; }
फिर हम वीडियो ब्लॉक के लिए समग्र शैली सेट करते हैं। वीडियो ब्लॉक का लेआउट बनाने के लिए हम सभी CSS गुणों का उपयोग करते हैं। यह स्वयं वीडियो के लिए विशेष शैली नहीं बनाएगा, केवल सभी तत्वों को सही जगह पर रखना है।
.mejs-container { position: relative; background: #000000; } .mejs-inner { position: relative; width: inherit; height: inherit; } .me-plugin { position: absolute; } .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video, .mejs-embed, .mejs-embed body, .mejs-mediaelement { width: 100%; height: 100%; } .mejs-embed, .mejs-embed body { margin: 0; padding: 0; overflow: hidden; } .mejs-container-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; } .mejs-background, .mejs-mediaelement, .mejs-poster, .mejs-overlay { position: absolute; top: 0; left: 0; } .mejs-poster img { display: block; }
चरण 4 - नियंत्रण इकाई
खिलाड़ी के केंद्र में एक बड़ा प्ले बटन जोड़ें।
.mejs-overlay-play { cursor: pointer; } .mejs-inner .mejs-overlay-button { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(../img/play.png) no-repeat; }
हम नीचे से वीडियो के साथ ब्लॉक को स्थिति देंगे, ऊंचाई को 34px पर सेट करेंगे और पृष्ठभूमि का रंग जोड़ेंगे। बैकग्राउंड को पारदर्शी बनाने के लिए RGBA का उपयोग करना बेहतर है, लेकिन RGBA पुराने ब्राउज़रों द्वारा समर्थित नहीं है, इसलिए हम RGB को भी जोड़ देंगे। फिर हम एक सामान्य शैली और स्प्राइट छवि के साथ कुछ नियंत्रण बटन सेट करेंगे।
.mejs-container .mejs-controls { position: absolute; width: 100%; height: 34px; left: 0; bottom: 0; background: rgb(0,0,0); background: rgba(0,0,0, .7); } .mejs-controls .mejs-button button { display: block; cursor: pointer; width: 16px; height: 16px; background: transparent url(../img/controls.png); }
चरण 5 - वीडियो नियंत्रण बटन
अब आपको नियंत्रण इकाई पर प्रत्येक बटन की स्थिति को बदलने की जरूरत है, सभी बटन की चौड़ाई और ऊंचाई निर्धारित करें, पृष्ठभूमि छवि की स्थिति बदलें।
.mejs-controls div.mejs-playpause-button { position: absolute; top: 12px; left: 15px; } .mejs-controls .mejs-play button, .mejs-controls .mejs-pause button { width: 12px; height: 12px; background-position: 0 0; } .mejs-controls .mejs-pause button { background-position: 0 -12px; } .mejs-controls div.mejs-volume-button { position: absolute; top: 12px; left: 45px; } .mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button { width: 14px; height: 12px; background-position: -12px 0; } .mejs-controls .mejs-unmute button { background-position: -12px -12px; } .mejs-controls div.mejs-fullscreen-button { position: absolute; top: 7px; right: 7px; } .mejs-controls .mejs-fullscreen-button button, .mejs-controls .mejs-unfullscreen button { width: 27px; height: 22px; background-position: -26px 0; } .mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }
चरण 6 - वॉल्यूम स्लाइडर
वॉल्यूम स्लाइडर के लिए शैली सेट करें, स्थान बदलें, और फिर गोल कोनों के साथ चौड़ाई और ऊंचाई के लिए मान जोड़ें।
.mejs-controls div.mejs-horizontal-volume-slider { position: absolute; cursor: pointer; top: 15px; left: 65px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { width: 60px; background: #d6d6d6; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; width: 0; top: 0; left: 0; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { height: 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
चरण 7 - संकेतक देखें
नियंत्रण इकाई के शीर्ष पर देखने के संकेतक को रखें, प्रत्येक राज्य के लिए पृष्ठभूमि का रंग जोड़ें (लोडिंग के लिए पूर्ण पैमाने और समय)। चौड़ाई 0 पर सेट करें, जो मूवी डाउनलोड होने पर स्वचालित रूप से अपडेट हो जाएगी।
.mejs-controls div.mejs-time-rail { position: absolute; width: 100%; left: 0; top: -10px; } .mejs-controls .mejs-time-rail span { position: absolute; display: block; cursor: pointer; width: 100%; height: 10px; top: 0; left: 0; } .mejs-controls .mejs-time-rail .mejs-time-total { background: rgb(152,152,152); background: rgba(152,152,152, .5); } .mejs-controls .mejs-time-rail .mejs-time-loaded { background: rgb(0,0,0); background: rgba(0,0,0, .3); } .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }
चरण 8 - देखने और समय संकेतक के लिए मार्कर
इस बिंदु पर, हम व्यू बार और टूलटिप्स के लिए एक मार्कर जोड़ेंगे जो माउस पर होवर करते समय वर्तमान समय प्रदर्शित करेगा। अब हमें उन्हें एक स्थिति देने, एक पृष्ठभूमि छवि जोड़ने, चौड़ाई और ऊंचाई निर्धारित करने और कुछ टाइपोग्राफी शैलियों को जोड़ने की आवश्यकता है।
.mejs-controls .mejs-time-rail .mejs-time-handle { position: absolute; cursor: pointer; width: 16px; height: 18px; top: -3px; background: url(../img/handle.png); } .mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; width: 33px; height: 23px; top: -26px; margin-left: -17px; background: url(../img/tooltip.png); } .mejs-controls .mejs-time-rail .mejs-time-float-current { position: absolute; display: block; left: 0; top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #666666; text-align: center; } .mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }
चरण 9 - सीएसएस 3 ग्रेडिएंट
हमें केवल हरे रंग के
CSS3 ग्रेडिएंट को जोड़ने की जरूरत है, जिसका उपयोग व्यू स्केल और वॉल्यूम कंट्रोल पर किया जाएगा।
.mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: #82d344; background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%); background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); background: -o-linear-gradient(top, #82d344 0%, #51af34 100%); background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%); background: linear-gradient(top, #82d344 0%, #51af34 100%); }
डेमो विकल्पस्रोत फ़ाइलें