HTML5 वीडियो कनवर्टर

आपकी वेबसाइट में HTML5 बैकग्राउंड वीडियो का उपयोग कैसे करें

बैकग्राउंड वीडियो का उपयोग करने के लिए, आप उनकी आदर्श रूप से 3 संस्करणों में आपूर्ति करते हैं। वे MP4, OGV और WEBM हैं। OGV वास्तव में जरूरी नहीं है, जब तक कि आप पुराने ब्राउज़र फ़ायरफ़ॉक्स 3.5 & 3.6, ओपेरा 10.5 और क्रोम 3, 4, & 5 को समर्थन ना करना चाहें।

आप एक HTML5 वीडियो टैग का उपयोग करेंगे जैसे

<video autoplay loop muted poster="media/image/road.jpg" id="background">
   <source src="media/video/road.mp4" type="video/mp4">
   <source src="media/video/road.webm" type="video/webm">
   <source src="media/video/road.ogv" type="video/ogg">
</video>


उपर्युक्त कोड भी पोस्टर सेट करता है। यह तब दिखाया जाता है जब वीडियो लोड हो रहा हो या उस ब्राउज़र में जो वीडियो नहीं चला सकता है। एक वीडियो पोस्टर बनाने के लिए, आप अपने कंप्यूटर पर वीडियो चला सकते हैं, इसे रोक सकते हैं और shift + command + 4 (मैक। विंडोज पर आप सामान्य स्निपिंग टूल का उपयोग कर सकते हैं।

और फिर आप इसे CSS:

#background {
   display:none;
   position: fixed;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -100;
   -webkit-transform: translateX(-50% translateY(-50%;
   transform: translateX(-50% translateY(-50%;
}


के साथ प्रारूपित करते हैं लेकिन हम बैकग्राउंड वीडियो को केवल बड़े उपकरणों पर दिखाते हैं। क्योंकि मोबाइल फोन बैकग्राउंड वीडियो पर बहुत सारे सिस्टम संसाधनों को ले सकता है। इसलिए हम इस मीडिया क्वेरी को जोड़ते हैं (यदि आप चाहें तो

@media (min-width: 62em {
   #background {
      display:block;
   }
}