फुलस्क्रीन एपीआई का उपयोग कैसे करें

HTML5 के साथ पूर्ण, बड़ी संख्या में नए APIs। उनमें से एक फुलस्क्रीन एपीआई है, जो उपयोगकर्ता के लिए पूर्ण स्क्रीन में वेब पेज प्रदर्शित करने के लिए ब्राउज़र के लिए एक देशी तरीका प्रदान करता है।
और अच्छी बात यह है कि फुलस्क्रीन एपीआई का उपयोग करना बहुत आसान है।

तरीकों

फुलस्क्रीन एपीआई के साथ शामिल तरीके

W3C मानक के अनुसार , कुछ तरीकों का नाम बदल दिया गया है, लेकिन पुराने नाम काम करना जारी रखते हैं।

Element.requestFullscreen() 

यह विधि एक आइटम को पूर्ण स्क्रीन मोड में जाने की अनुमति देती है।

 Document.getElementById("myCanvas").requestFullscreen() 

इस कोड को चलाने से ID "myCanvas" के साथ पूर्ण स्क्रीन मोड में जाने के लिए कैनवास का कारण होगा।

 Document.cancelFullScreen() 

नया गुण नाम:

 Document.exitFullscreen 

पूर्ण स्क्रीन मोड रद्द करता है।

 Document.fullScreen 

नया गुण नाम:

 Document.fullscreenEnabled 

यदि उपयोगकर्ता पूर्ण स्क्रीन मोड में है, तो यह सही है।

 Document.fullScreenElement 

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

ब्राउज़रों का समर्थन किया

• क्रोम
• फ़ायरफ़ॉक्स
• सफारी
• ओपेरा अगला
• ओपेरा (संस्करण 12.10 से)
• इंटरनेट एक्सप्लोरर (संस्करण 11 के बाद से)

आधुनिक ब्राउज़र द्वारा फुलस्क्रीन एपीआई के समर्थन पर अधिक जानकारी यहां उपलब्ध है ।

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

पूर्ण स्क्रीन लॉन्च

सबसे पहले हमें यह पता लगाने की आवश्यकता है कि हमारा ब्राउज़र किस पद्धति को मान्यता देता है। ऐसा करने के लिए, हम एक फ़ंक्शन बनाएंगे जो विधि के समर्थन की जांच करेगा और कार्य पद्धति को कॉल करेगा:

 function fullScreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.webkitrequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.mozRequestFullscreen) { element.mozRequestFullScreen(); } } 

यदि कोई भी रिक्वेस्टफुलस्क्रीन मेथड सही वापस आता है, तो उस विधि को विशेष ब्राउज़र द्वारा सपोर्ट किया जाता है और उसके उपसर्ग के साथ छद्म वर्ग का उपयोग किया जाता है।

उसके बाद, आपको फुल स्क्रीन मोड के लिए फ़ंक्शन को कॉल करना होगा:

 //   var html = document.documentElement; fullScreen(html); 

 //      var canvas = document.getElementById('mycanvas'); fullScreen(canvas); 

परिणाम उपयोगकर्ता के लिए एक अनुरोध होगा जिसमें संक्रमण को पूर्ण स्क्रीन मोड में अनुमति देने का अनुरोध किया जाएगा, यदि उपयोगकर्ता संक्रमण की अनुमति देता है, तो ब्राउज़र के सभी टूलबार गायब हो जाएंगे, और पूरे पृष्ठ में एक वेब पेज या एक तत्व होगा।

पूर्ण स्क्रीन रद्द करें

इस विधि के लिए उपसर्गों की भी आवश्यकता होती है, इसलिए हम उसी विचार का उपयोग तरीकों के लिए ब्राउज़र समर्थन का परीक्षण करने के लिए करेंगे। आइए एक फ़ंक्शन बनाएं जो यह निर्धारित करेगा कि उपयोगकर्ता के ब्राउज़र के आधार पर हमें किस उपसर्ग का उपयोग करना चाहिए।

इस विधि को किसी भी पैरामीटर की आवश्यकता नहीं है, क्योंकि requestFullscreen विधि के विपरीत, यह हमेशा पूरे दस्तावेज़ पर लागू होता है।

 function fullScreenCancel() { if(document.requestFullscreen) { document.requestFullscreen(); } else if(document.webkitRequestFullscreen ) { document.webkitRequestFullscreen(); } else if(document.mozRequestFullscreen) { document.mozRequestFullScreen(); } } 

 //   fullScreenCancel(); 

सीएसएस छद्म कक्षाएं

सीएसएस छद्म-कक्षाएं इस जावास्क्रिप्ट एपीआई के साथ आईं।

 :full-screen 

इसका उपयोग वेब पेज पर किसी भी तत्व को स्टाइल करने के लिए किया जा सकता है जब पृष्ठ या तत्व पूर्ण स्क्रीन मोड में होता है। यह छद्म वर्ग पृष्ठ तत्वों के आकार को निर्धारित करने के लिए उपयोगी हो सकता है, क्योंकि पूर्ण-स्क्रीन मोड में, ब्राउज़र का कार्य स्थान भी बढ़ जाता है।

 :-webkit-full-screen {/*WebKit, Opera 15+*/ font-size: 16px; } :-moz-full-screen {/*FireFox*/ font-size: 16px; } :full-screen {/*Opera 12.15-, Blink, w3c standard*/ font-size: 16px; } /*   img*/ :-webkit-full-screen img { width: 100%; height: 100%; } :-moz-full-screen img { width: 100%; height: 100%; } 

ध्यान दें कि आप उपसर्गों को अल्पविराम से अलग नहीं कर सकते, क्योंकि ब्राउज़र उन्हें पहचानने में सक्षम नहीं होगा:

 /*     */ :-webkit-full-screen img,:-moz-full-screen img { width: 100%; height: 100%; } 

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

निष्कर्ष

यह जावास्क्रिप्ट एपीआई सबसे कम ज्ञात में से एक है जो एचटीएमएल 5 के साथ आता है, लेकिन यह एक प्रभावी और आसान तरीका है जो आपको उपयोगकर्ता के ध्यान को एक तत्व पर केंद्रित करने की अनुमति देता है, जो वीडियो, चित्र और गेम के लिए विशेष रूप से उपयोगी है।