हम प्रसिद्ध हैरी पॉटर अखबार जैसे पृष्ठों पर वीडियो बनाते हैं।
अधिकतम विसर्जन बनाने के लिए!
इसे बनाने के लिए, हमें एक लघु वीडियो (पूर्वावलोकन) की आवश्यकता होती है, जिसे लूप किया जाएगा और ध्वनि के बिना। दूसरा वीडियो ध्वनि के साथ एक नियमित वीडियो है जो जब आप होवर करेंगे, तो क्लिक करें या स्क्रॉल करें।
Html कोड पृष्ठ में सन्निहित है:
<div class="smartVideo graysv"> <video data-cprotate data-cprotatehover muted loop data-inits="autoplay" data-src="./test1.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> <video data-cprotate data-volume="1" data-src="./test2.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> </div>
डिव में लिपटे 2 वीडियो को
स्मार्टवीडियो क्लास के साथ चिह्नित किया गया है और अगर आप इसे चालू या बिना ध्वनि के बिना वीडियो पर एक काले और सफेद फिल्टर की आवश्यकता होती है तो
ग्रेसेव क्लास को
जोड़ा जाता है!
data-cprotate - स्क्रिप्ट को बताता है कि मुख्य और पूर्वावलोकन वीडियो का एक रोटेशन होगा।
data-src - वीडियो फ़ाइल का पथ।
डेटा-पोस्टर - वीडियो लोड करने के दौरान प्रदर्शित होने वाले चित्र का पथ।
playinline - स्मार्टफ़ोन के तहत ऑटोरन के लिए, इसके बिना शुरू नहीं होगा।
पाइप = "झूठा" - ताकि ब्राउज़र डाउनलोड बटन न दिखाए।
पहली क्लिप के लिए, हमें विशेषताएँ
म्यूट किए गए लूप डेटा-इनिट्स = ऑटोप्ले को सेट करना होगा, जिसका अर्थ है: स्क्रीन पर दिखाई देने पर ध्वनि के बिना, लूप किए गए, और ऑटोस्टार्ट।
पहली वीडियो क्लिप के लिए, एक
डेटा-cprotatehover विशेषता है , जो वैकल्पिक है और इसका मतलब है कि जब आप इस पर होवर करते हैं तो वीडियो को प्रारंभ करना है। आपको इसे दूसरे वीडियो पर डालने की आवश्यकता नहीं है!
दूसरे वीडियो में
डेटा-वॉल्यूम = 1 वॉल्यूम निर्दिष्ट करने की आवश्यकता होती है, लेकिन यदि आप ध्वनि नहीं चाहते हैं, तो आपको
0 सेट करने की आवश्यकता है।
पृष्ठ पर समीक्षा कैसे करें, इसका एक उदाहरण।कनेक्ट करने के लिए, आपको पृष्ठ पर CSS शैलियों को सम्मिलित करना होगा:
<style> .smartVideo{ width:300px; } .smartVideo video { width:100%; z-index:0; position: absolute; top:0; left:0; user-select:none; border:0; padding:0; margin:0; vertical-align:middle; cursor:pointer; outline:none; } .smartVideo > video:first-child { position:relative; z-index:1; } .smartVideo video:not([data-inits="autoplay"]){visibility:hidden;z-index:0;} .graysv video{ -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .graysv.cpsound video,.graysv:hover video:not([data-mouseout]){ -webkit-filter: none; -ms-filter: none; filter: none; } </style>
और हमें एक जेएस फाइल की जरूरत है जिसे क्लोजिंग
बॉडी टैग से पहले कनेक्ट करना होगा।
<script src="/smartvideo.js"></script>
डाउनलोड के लिए स्रोतस्क्रिप्ट जल्दी में इकट्ठा!
यदि कई रुचि रखते हैं, तो विभिन्न सेटिंग्स के साथ एक पूर्ण पुस्तकालय बनाना संभव होगा और इसे गीथूब पर डाल दिया जाएगा!
फिर, अगर कोई जावास्क्रिप्ट के तकनीकी पक्ष में रुचि रखता है, तो लिखो, मैं अगले लेख में जावास्क्रिप्ट कोड को पेंट कर सकता हूं (हालांकि मुझे इसे अच्छी तरह से कंघी करना होगा और उससे पहले इसे साफ करना होगा! :-)
स्मार्टविडियो की मुख्य बातें:
- स्मार्टफोन और टैबलेट के तहत काम करता है।
- यदि कोई व्यक्ति ब्राउज़र टैब के बीच कॉल या स्विच करता है तो वीडियो स्वचालित रूप से बंद हो जाता है।
- पृष्ठ स्क्रॉल करते समय वीडियो को स्वचालित रूप से रोकता है या प्रारंभ करता है!
- वीडियो और पोस्टर डाउनलोड करना तब ही शुरू करता है जब वीडियो दृष्टि के भीतर हो।
पुनश्च: स्क्रीन पाठकों के लिए स्मार्टवीडियो HTML कोड कैसे प्रारूपित करें?
निष्ठा से, फ्रीलांसरों सीएमएस cPortfolio के लिए लैंडिंग डिजाइनर के निर्माता