HTML5 वीडियो फुलस्क्रीन बनाने का कोई तरीका है?

Question

क्या HTML5 का उपयोग करके वीडियो फ़ुलस्क्रीन चलाने का कोई तरीका है <video> टैग ?

और अगर यह संभव नहीं है, तो क्या कोई जानता है कि क्या इस फैसले का कोई कारण है?

Comments

@MiffTheFox एक आधुनिक ब्राउज़र एचटीएमएल 5 सपोर्ट फीचर चेकलिस्ट यहां पाया जा सकता है: findmebyip.com/litmus/#html5-web-applications

— ghoppe

## दुनिया का पहला सच एचटीएमएल 5 फुलस्क्रीन वीडियो ## blog.jilion.com/2011/07/27/… ... यह भी देखें: wiki.mozilla.org/Gecko:FullScreenAPI

— Wouter Dorgelo

Answer 1

एचटीएमएल 5 वीडियो फुलस्क्रीन बनाने का कोई तरीका नहीं प्रदान करता है, लेकिन समानांतर फुलस्क्रीन विनिर्देश उस requestFullScreenविधि की आपूर्ति करता है जो मनमाना तत्वों ( <video>तत्वों सहित ) को फुलस्क्रीन बनाने की अनुमति देता है ।

इसमें कई ब्राउज़रों का प्रयोगात्मक समर्थन है ।

---

मूल उत्तर:

से एचटीएमएल 5 कल्पना (: जून '09 लेखन के समय):

उपयोगकर्ता एजेंटों को वीडियो को पूर्ण-स्क्रीन दिखाए जाने के लिए सार्वजनिक API प्रदान नहीं करना चाहिए। एक स्क्रिप्ट, जिसे सावधानी से गढ़ी गई वीडियो फ़ाइल के साथ जोड़ा गया, उपयोगकर्ता को सिस्टम-मोडल डायलॉग दिखाने के बारे में सोच सकता है और पासवर्ड के लिए उपयोगकर्ता को संकेत दे सकता है। लिंक क्लिक किए जाने या पृष्ठ नेविगेट किए जाने पर पूर्ण-स्क्रीन वीडियो लॉन्च करने वाले पृष्ठों के साथ "मात्र" झुंझलाहट का भी खतरा है। इसके बजाय, उपयोगकर्ता-एजेंट विशिष्ट इंटरफ़ेस सुविधाएँ आसानी से उपयोगकर्ता को पूर्ण-स्क्रीन प्लेबैक मोड प्राप्त करने की अनुमति दे सकती हैं।

ब्राउज़र एक उपयोगकर्ता इंटरफ़ेस प्रदान कर सकते हैं, लेकिन एक प्रोग्राम योग्य प्रदान नहीं करना चाहिए।

---

ध्यान दें कि उपरोक्त चेतावनी तब तक विनिर्देशन से हटा दी गई है।

Answer 2

यहां ज्यादातर जवाब पुराने हैं।

अब फुलस्क्रीन एपीआई का उपयोग करके किसी भी तत्व को फुलस्क्रीन में लाना संभव है , हालांकि यह अभी भी काफी गड़बड़ है क्योंकि आप div.requestFullScreen()सभी ब्राउज़रों में कॉल नहीं कर सकते हैं, लेकिन ब्राउज़र विशिष्ट उपसर्ग विधियों का उपयोग करना होगा।

मैंने एक साधारण रैपर स्क्रीनफुल बनाया है। जो कि फुलस्क्रीन एपीआई का उपयोग करना आसान बनाता है।

वर्तमान ब्राउज़र समर्थन है:

• क्रोम 15+
• फ़ायरफ़ॉक्स 10+
• सफारी 5.1+

ध्यान दें कि कई मोबाइल ब्राउज़र अभी तक पूर्ण स्क्रीन विकल्प का समर्थन नहीं करते हैं ।

Comments

यह काम नहीं कर रहा है। Iframe1 में iframe2 से बच्चा iframe2 है, जब फुल-स्क्रीन लगाई जाती है तो यह कुछ नहीं करता है।

ReadY से @YumYumYum: "यदि आपका पृष्ठ <iframe> के अंदर है, तो आपको एक भरण-पोषण विशेषता (+ webkitallowfullscreen और mozallowfullscreen) जोड़ने की आवश्यकता होगी।"

— सिंद्रे सोरहुस

डेमो एंड्रॉइड 4.3 के डिफ़ॉल्ट ब्राउज़र के साथ काम नहीं करता है।

— काई नोएक

@SindreSorhus क्या यह समर्थन मोबाइल ब्राउज अब है ??

— उदारा सुरंगा

Answer 3

सफारी इसका समर्थन करती है webkitEnterFullscreen।

Chrome को इसका समर्थन करना चाहिए क्योंकि यह WebKit भी है, लेकिन त्रुटियां हैं।

फ़ायरफ़ॉक्स के क्रिस ब्लिज़ार्ड ने कहा कि वे फुलस्क्रीन के अपने संस्करण के साथ आ रहे हैं जो किसी भी तत्व को फ़ुलस्क्रीन पर जाने देगा। जैसे कैनवस

ओपेरा के फिलिप जेजेनस्टेड का कहना है कि वे बाद में रिलीज में इसका समर्थन करेंगे।

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

Comments

यह उत्तर पुराना है, सिंद्रे सोरहस द्वारा उत्तर देखें (और फिर इसे वोट दें ताकि यह इन तारीखों से आगे निकल जाए)

— मैट

Answer 4

webkitEnterFullScreen();

यह वीडियो टैग तत्व पर बुलाया जाना चाहिए, उदाहरण के लिए, पृष्ठ के उपयोग पर पहले वीडियो टैग को फ़ुलस्क्रीन करने के लिए:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

सूचना: यह पुराना उत्तर है और अब प्रासंगिक नहीं है।

Comments

यह उत्तर पुराना है, सिंद्रे सोरहस द्वारा उत्तर देखें (और फिर इसे वोट दें ताकि यह इन तारीखों से आगे निकल जाए)

— मैट

क्रोम या क्रोमियम और नोड-वेबकिट में काम करना!

— विश

Answer 5

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

पूर्ण स्क्रीन बटन काम करने के लिए आपको एक और ईवेंट श्रोता सेट करना होगा requestFullScreen()जो बटन क्लिक होने पर फ़ंक्शन को कॉल करेगा । यह सुनिश्चित करने के लिए कि यह सभी समर्थित ब्राउज़रों में काम करेगा, आपको यह देखने के लिए जांचने की आवश्यकता है कि requestFullScreen()क्या उपलब्ध है और विक्रेता के लिए उपसर्ग किए गए संस्करण ( mozRequestFullScreenऔर webkitRequestFullscreen) यदि यह नहीं है।

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

संदर्भ: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode संदर्भ: - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -Videos

Answer 6

मुझे लगता है कि अगर हम अपने ब्राउज़र में बिना किसी बंद स्रोत प्लगइन्स के वीडियो देखने का एक खुला तरीका चाहते हैं (और फ्लैश प्लग के इतिहास के साथ आने वाले सभी सुरक्षा उल्लंघनों ...)। टैग को पूर्ण स्क्रीन को सक्रिय करने का एक तरीका खोजना है .. हम इसे फ्लैश की तरह संभाल सकते हैं: फुलस्क्रीन को करने के लिए, इसे अपने माउस के साथ एक बाएं क्लिक से सक्रिय करना होगा और कुछ नहीं, मेरा मतलब है कि एक्शनस्क्रिप्ट द्वारा लॉन्च करना संभव नहीं है उदाहरण के लिए फ्लैश की लोडिंग पर फुलस्क्रीन।

मुझे आशा है कि मैं पर्याप्त स्पष्ट हो गया हूं: आखिरकार, मैं केवल एक फ्रांसीसी आईटी छात्र हूं, अंग्रेजी कवि नहीं :)

फिर मिलेंगे!

Answer 7

सीएसएस से

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Comments

यह वास्तव में फुलस्क्रीन नहीं है।

— रामेनशेफ

Answer 8

फ़ुलस्क्रीन करने का एक प्रोग्रामयोग्य तरीका अब फ़ायरफ़ॉक्स और क्रोम (उनके नवीनतम संस्करणों में) दोनों में काम कर रहा है। अच्छी खबर यह है कि यहां एक युक्ति का मसौदा तैयार किया गया है:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

आपको अभी भी विक्रेता उपसर्गों से निपटना होगा, लेकिन सभी कार्यान्वयन विवरण एमडीएन साइट में ट्रैक किए जा रहे हैं:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Answer 9

आप चौड़ाई और ऊँचाई को 100% तक बदल सकते हैं, लेकिन यह ब्राउज़र क्रोम या OS शेल को कवर नहीं करेगा।

डिजाइन निर्णय क्योंकि HTML ब्राउज़र विंडो के अंदर रहता है। फ्लैश प्लगइन्स खिड़की के अंदर नहीं हैं, इसलिए वे पूर्ण स्क्रीन पर जा सकते हैं।

यह समझ में आता है, अन्यथा आप img टैग बना सकते हैं जो शेल को कवर करते हैं, या h1 टैग बनाते हैं इसलिए पूरी स्क्रीन एक पत्र थी।

Answer 10

नहीं, html 5 में फुलस्क्रीन वीडियो होना संभव नहीं है। यदि आप कारण जानना चाहते हैं, तो आप भाग्यशाली हैं क्योंकि फुलस्क्रीन के लिए तर्क लड़ाई अभी लड़ी गई है। WHATWG मेलिंग सूची देखें और "वीडियो" शब्द देखें। मुझे व्यक्तिगत रूप से आशा है कि वे HTML 5 में फुलस्क्रीन एपीआई प्रदान करते हैं।

Comments

उस मेलिंग सूची के लिंक के लिए बिग +1।

— mwilcox

Answer 11

फ़ायरफ़ॉक्स 3.6 में HTML5 वीडियो के लिए एक पूर्ण स्क्रीन विकल्प है, वीडियो पर राइट-क्लिक करें और 'पूर्ण स्क्रीन' चुनें।

नवीनतम वेबकिट नाइटलाइफ़ भी पूर्ण स्क्रीन एचटीएमएल 5 वीडियो का समर्थन करते हैं, नवीनतम रात के साथ सबलेम प्लेयर की कोशिश करते हैं और पूर्ण स्क्रीन विकल्प का चयन करते समय सीएमडी / Ctrl पकड़ते हैं।

मुझे लगता है कि क्रोम / ओपेरा भी कुछ इस तरह का समर्थन करेगा। उम्मीद है कि IE9 भी पूर्ण स्क्रीन HTML5 वीडियो का समर्थन करेगा।

Answer 12

यह WebKit में WebkitEnterFullscreen के माध्यम से समर्थित है ।

Answer 13

एक वैकल्पिक समाधान यह होगा कि ब्राउज़र को केवल संदर्भ मेनू पर यह विकल्प प्रदान करें। ऐसा करने के लिए जावास्क्रिप्ट की आवश्यकता नहीं है, हालांकि मैं देख सकता था कि यह कब उपयोगी होगा।

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

Answer 14

एचटीएमएल 5 वीडियो सफारी के नवीनतम रात के निर्माण में फुलस्क्रीन जाता है, हालांकि मुझे यकीन नहीं है कि यह तकनीकी रूप से कैसे पूरा होता है।

Comments

नकारात्मक वोट क्यों? सफारी 5 में अपने मूल नियंत्रण में फुलस्क्रीन है। (कोई एपीआई हालांकि!

— Grrrr

Answer 15

पूरा समाधान:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

Answer 16

यदि आपके पास अपनी साइट को प्रगतिशील वेब ऐप (PWA) के रूप में परिभाषित करने का विकल्प है, तो मैनिफ़ेस्ट अंडरजसन केdisplay: "fullscreen" तहत उपयोग करने का विकल्प भी है । लेकिन यह केवल तभी काम करेगा जब उपयोगकर्ता आपके वेबपेज को होम स्क्रीन पर जोड़ता / इंस्टॉल करता है और इसे वहां से खोलता है।

Answer 17

हाँ। वैसे HTML5 वीडियो के साथ क्या होता है कि आप केवल <video>टैग लगाते हैं और ब्राउज़र इसे स्वयं यूआई देगा, और इस प्रकार पूर्ण स्क्रीन देखने की क्षमता। यह वास्तव में हम पर जीवन को बहुत बेहतर बनाता है उपयोगकर्ताओं को "कला" नहीं देखना पड़ता है कि कुछ डेवलपर फ़्लैश के साथ खेल सकते हैं :) यह प्लेटफ़ॉर्म के साथ संगतता भी जोड़ता है, जो अच्छा है।

Answer 18

यह सरल है, सभी समस्याओं को इस तरह हल किया जा सकता है,

1) भागने से आप हमेशा फुलस्क्रीन मोड से बाहर निकलते हैं (यह f11 के माध्यम से फुलस्क्रीन में मैन्युअल रूप से प्रवेश करने पर लागू नहीं होता है)

2) अस्थायी रूप से फुलस्क्रीन वीडियो मोड (ब्राउज़र द्वारा) दर्ज किया गया है, यह कहते हुए एक छोटा बैनर प्रदर्शित करें

3) डिफ़ॉल्ट रूप से फुलस्क्रीन एक्शन को ब्लॉक करें, जैसे एचटीएमएल 5 में पॉप-अप और लोकल डेटाबेस के लिए किया गया है और लोकेशन एपी और आदि, आदि।

मैं इस डिजाइन के साथ कोई समस्या नहीं देख रहा हूँ। किसी को लगता है कि मैं कुछ भी याद किया?

Comments

इस सवाल का जवाब नहीं है।

— रामेनशेफ

Answer 19

Chrome 11.0.686.0 देव चैनल Chrome में अब फुलस्क्रीन वीडियो है।

Answer 20

आप ऐसा कर सकते हैं यदि आप उपयोगकर्ता से F11 (कई ब्राउज़रों के लिए पूर्ण स्क्रीन) को दबाने के लिए कहते हैं, और आप पृष्ठ के पूरे शरीर पर वीडियो डालते हैं।

Answer 21

यदि इन उत्तरों में से कोई भी काम नहीं करता है (जैसा कि उन्होंने मेरे लिए नहीं किया था) आप दो वीडियो सेट कर सकते हैं। एक नियमित आकार के लिए और दूसरा फुलस्क्रीन आकार के लिए। जब आप फुलस्क्रीन पर स्विच करना चाहते हैं

1. फ़ुलस्क्रीन वीडियो की 'src' विशेषता को छोटे वीडियो 'src' विशेषता पर सेट करने के लिए जावास्क्रिप्ट का उपयोग करें
2. वीडियो को सेट करें। फ़ुलस्क्रीन वीडियो पर समान समय के लिए छोटे वीडियो के समान ही सेट करें।
3. छोटे वीडियो को छिपाने के लिए css 'डिस्प्ले: कोई नहीं' का प्रयोग करें और बड़े को 'पोज़िशन: एब्सोल्यूट' और 'जेड-इंडेक्स: 1000' या वास्तव में उच्च के साथ प्रदर्शित करें।