Youtube इंटरफ़ेस को अनुकूलित करने का दूसरा तरीका

Youtube केंद्र के नवीनतम लेख को पढ़ने के बाद, मैंने YouTube के वसा इंटरफ़ेस को लिखने के अपने तरीके को हाइब्रोसोसिटी के साथ साझा करने का निर्णय लिया।





Youtube केंद्र निश्चित रूप से एक अच्छा विस्तार है, लेकिन Youtube इसके साथ और भी अधिक धीमा करना शुरू कर देता है। मैं आपको स्टाइलिश की पेशकश करूंगा - यह किसी भी साइट पर अपनी खुद की शैलियों को जोड़ने के लिए एक विस्तार है, उन्होंने पहले से ही इसके बारे में लिखा है हब्बर।

फ़ायरफ़ॉक्स: addons.mozilla.org/en-US/firefox/addon/stylish
Chrome: chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
सफारी: sobolev.us/stylish ( साभार उपमा )

1. वीडियो देखने के लिए Youtube

मैं उन शैलियों को दूंगा जो मुझे एक साथ 1280x800 और 1920x1080 मॉनिटर के लिए सूट करती हैं। उन्हें लागू करने के बाद, Youtube कुछ इस तरह दिखता है:



जैसा कि आप देख सकते हैं, इंटरफ़ेस के सभी विवरण एक पृष्ठ पर रखे गए हैं। मैंने टिप्पणियों को हटा दिया क्योंकि मैंने उनमें कभी बिंदु नहीं देखा, आप उन्हें छोड़ सकते हैं। वास्तव में शैलियों खुद:

/*  */ .player-width { width: 1210px !important; } .player-height { height: 640px !important; } /*    fullscreen */ [data-player-size="fullscreen"] .player-width { width: 100% !important; } [data-player-size="fullscreen"] .player-height { height: 100% !important; } /*    */ #guide { display: none; } #player, #watch7-main-container { padding-left: 30px !important; } /*    embed iframe */ #player.full-frame { padding-left: 0px !important; } /*     About/Share */ #watch-discussion { display: none; } #watch7-action-buttons, #watch7-action-panels { display: none; } /*  related videos */ .watch-wide #watch7-sidebar { margin-top: -642px !important; margin-left: 1240px !important; height: 620px !important; } .video-list-item { margin-bottom: 13px !important; } /*  footer */ #body-container { padding-bottom: 0 !important; } #footer-container { display: none; } 

मैं वहाँ नहीं रुका, फिर सबसे स्वादिष्ट :)

2. Youtube एक ऑडियो प्लेयर के रूप में

शायद आपने इस पोस्ट में देखा, पोस्ट के हेडर में छवि देखकर और खुद से पूछते हुए कि "वीडियो कहाँ गया?", विषय का दूसरा भाग इसके बारे में है।

मैं म्यूजिक सुनने के लिए Youtube का ज्यादा इस्तेमाल करता हूं। कुछ समय पहले, मैंने एमपी 3 प्रारूप में पूरी प्लेलिस्ट डाउनलोड करने के लिए एक स्क्रिप्ट भी लिखी थी। लेकिन यह विकल्प उपयुक्त नहीं है जब यह एक वीडियो (प्लेलिस्ट नहीं) के लिए आता है।

यदि आप वीडियो को काटते हैं और केवल ऑडियो ट्रैक छोड़ते हैं, तो आप प्रोसेसर संसाधन की खपत को दो से तीन गुना कम कर देंगे:

आगे की कार्रवाई "वीडियो के साथ" और "वीडियो के बिना" मोड के तेजी से स्विचिंग को स्वचालित करने के उद्देश्य से है।

2.1। Html5 समावेश

www.youtube.com/html5

2.2। स्टाइल के लिए स्टाइल को जोड़ना

 /*  */ .audio-only .player-width { width: 720px !important; } .audio-only .player-height { height: 40px !important; } /*   */ .audio-only .html5-video-container { display: none; } /*    */ .audio-only .html5-progress-list { height: 35px !important; } /*  sidebar */ .audio-only .watch-wide #watch7-sidebar { display: none; } 

जैसा कि आपने देखा होगा, मैं उपसर्ग वर्ग .audio-only अंतिम चरण का उपयोग कर रहा हूं ताकि इसके अतिरिक्त को स्वचालित किया जा सके।

2.3। .Audio-only वर्ग जोड़ने के लिए उपयोगकर्तास्क्रिप्ट

पहले से ही पर्याप्त उपयोगकर्ता के बारे में, मुझे लगता है कि आप जानते हैं कि यह क्या है। हमें एक सरल स्क्रिप्ट की आवश्यकता है जो Alt+M को दबाएगी और .audio-only वर्ग को जोड़ेगी / हटाएगी:

 // ==UserScript== // @name Youtube audio-only switch // @description Toggle audio-only mode for saving cpu resources // @match http://www.youtube.com/* // ==/UserScript== document.body.onkeydown = function(event){ event = event || window.event; var keycode = event.charCode || event.keyCode; // Alt + M if(event.altKey && keycode == 77) { if(document.body.className.match(' audio-only')) document.body.className = document.body.className.replace(' audio-only', ''); else document.body.className += ' audio-only'; } } 

यह याद रखना अतिश्योक्तिपूर्ण नहीं होगा कि कस्टम स्क्रिप्ट कैसे स्थापित की जाए (इसमें * .user.js नाम होना चाहिए)

• फ़ायरफ़ॉक्स: चिकनाई
• क्रोम: ओपन क्रोम: // एक्सटेंशन / और स्क्रिप्ट को वहां खींचें
• सफारी: ग्रीस

मुझे आशा है कि आप इस विषय में ऊब नहीं थे :)

युपीडी। पंख बीटा

Arty ने टिप्पणी में पंख बीटा का उल्लेख किया। आपको सच्चाई बताने के लिए, मुझे इस फ़ंक्शन के बारे में पता नहीं है, यह बिल्कुल इस विषय के लिए है कि मैं इस विषय में क्या कर रहा था - वैकल्पिक इंटरफ़ेस तत्वों को ट्रिम करना।

मैं शामिल पंख बीटा के लिए कस्टम शैलियों को फिर से लिखा था:

 /*  */ #movie_player { width: 1260px !important; height: 580px !important; } #p { height: 580px !important; } /*    */ #mh, #ct { margin: 0 } #ft { display: none; } /*  sidebar */ #rc { margin-left: 1280px; margin-top: -690px; } /* === audio-only === */ /*  */ .audio-only #movie_player { width: 720px !important; height: 40px !important; } .audio-only #p { height: 50px !important; } /*    fullscreen */ [data-player-size="fullscreen"] #movie_player { width: 100% !important; height: 100% !important; } /*   */ .audio-only .html5-video-container { display: none; } /*    */ .audio-only .html5-progress-list { height: 35px !important; } /*  sidebar */ .audio-only #rc { display: none; }