आप अपनी वेबसाइट पर एक पूर्ण स्क्रीन पृष्ठभूमि के रूप में एचटीएमएल 5 <video> कैसे प्रदर्शित कर सकते हैं? इस फ्लैश साइट डेमो के समान ...क्या आप एक पूर्ण स्क्रीन पृष्ठभूमि के रूप में HTML5 <video> प्रदर्शित कर सकते हैं?
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
वीडियो पर उपयोग position:fixed, 100% चौड़ाई/ऊंचाई के लिए सेट, और इसलिए यह सब कुछ पीछे दिखाई उस पर एक नकारात्मक z-index डाल दिया।
यदि आप VideoJS पर देखते हैं, तो नियंत्रण केवल जेड-इंडेक्स का उपयोग करके वीडियो के शीर्ष पर बैठे एचटीएमएल तत्व हैं, यह सुनिश्चित करने के लिए कि वे ऊपर हैं।
एचटीएमएल
<video id="video_background" src="video.mp4" autoplay>
सीएसएस (अधिक ब्राउज़रों का समर्थन करने के webm और ogg सूत्रों जोड़े)
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
यह शायद नहीं iPhone/iPad के सबसे एचटीएमएल 5 ब्राउज़रों में काम करेंगे, लेकिन , जहां वीडियो को सक्रिय करने की आवश्यकता है, और इसके तत्वों को पसंद नहीं है।
बस इस पर एक टिप्पणी है - मैं एक पूर्ण स्क्रीन पृष्ठभूमि के लिए HTML5 वीडियो का उपयोग किया है और यह एक का इलाज काम करता है - लेकिन यह सुनिश्चित कर लें या तो ऊंचाई का उपयोग करने के: 100% और चौड़ाई: ऑटो या दूसरी तरह के आसपास - सुनिश्चित करने के लिए आप पहलू अनुपात रखते हैं।
आईपैड के लिए - आप छुपे हुए और फिर क्लिक ईवेंट को आग लगने के लिए मजबूर कर सकते हैं, और क्लिक ईवेंट के कार्य को लोड/प्ले() से बाहर कर सकते हैं।
पीएस - इसे किसी भी प्लगइन की आवश्यकता नहीं है और न्यूनतम जेएस के साथ किया जा सकता है - यदि आप किसी भी मोबाइल डिवाइस को लक्षित कर रहे हैं (मुझे लगता है कि आप हो सकते हैं ..) ऐसे किसी भी ढांचे से दूर रहना आगे बढ़ना है।
एक कामकाजी उदाहरण के लिए क्रोम में http://www.sklinar.co.uk/toe/ देखें। –
मैं इस जवाब देने के लिए थोड़ी देर हो चुकी हो सकता है, लेकिन इस नए लोगों से इस जवाब की तलाश में के लिए उपयोगी होगा।
उपर्युक्त उत्तर अच्छे हैं, लेकिन एक आदर्श वीडियो पृष्ठभूमि के लिए आपको पहलू अनुपात में जांचना है क्योंकि वीडियो काट सकता है या स्क्रीन का आकार बदलते समय कैनवास को विकृत किया जा सकता है या विभिन्न स्क्रीन आकारों पर इसका उपयोग किया जा सकता है।
मैं लंबे समय तक नहीं पहले इस मामले की छानबीन हो गया और मैं समाधान मीडिया क्वेरी का उपयोग कर पाया।
यहाँ एक ट्यूटोरियल है कि मैं कैसे बनाने के लिए पर लिखा है एक Fullscreen Video Background with only CSS
मैं भी यहाँ कोड जोड़ देगा:
HTML:
<div class="videoBgWrapper">
<video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
<source src="videosfolder/video.webm" type="video/webm">
<source src="videosfolder/video.mp4" type="video/mp4">
<source src="videosfolder/video.ogv" type="video/ogg">
</video>
</div>
सीएसएस:
.videoBgWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.videoBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
.videoBg{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.videoBg {
width: auto;
height: 100%;
}
}
मुझे आशा है कि आपको यह उपयोगी लगेगा।
यह मेरे लिए एक बड़ा जवाब है, मैं लोगों को इस जवाब पर वोट कम नहीं जानता। जो लोग इसे वोट देते हैं, क्या आप कुछ स्पष्टीकरण दे सकते हैं क्यों? – zt1983811
http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen आप वहां देख सकते हैं – saturngod
मैंने पहले से ही पोस्ट देखा है, ऐसा लगता है कि यह अधिक चिंतित है पूर्ण स्क्रीन पर ब्राउज़र विंडो के बाहर वीडियो चलाने के साथ, मैं पुनः आकार देने योग्य ब्राउज़र वीडियो की तलाश में हूं।मैंने सोचा कि इस पर और अधिक हो सकता है हालांकि यह लिंक थोड़ा अधिक आशाजनक दिख रहा है – Yammi
मैं इसे उत्तर के रूप में पोस्ट नहीं कर रहा हूं, क्योंकि मुझे केवल अनुभवजन्य सबूत मिल गए हैं, लेकिन क्रोम और फ़ायरफ़ॉक्स (उबंटू 10.04) में परीक्षण से पता चलता है कि यह संभव नहीं है। हालांकि, मैं गलत साबित हुआ हूं। +1 और तारांकित, बस मामले में। –