JQuery UI शैलियों के आधार पर फ्लोप्लेयर के लिए HTML कंट्रोलबार

एक HTML इंटरफ़ेस के साथ एक अच्छे फ़्लैश-प्लेयर को खोजने का सवाल अभी भी व्याप्त है और अभी भी बहुत से लोगों को है। केवल Habré पर आप एक ही विषय पर कई लेख पा सकते हैं। ऐसा हुआ कि मेरी जरूरतों के लिए मैंने आधिकारिक साइट से कंट्रोलबार प्लगइन के साथ फ्लोप्लेयर का उपयोग किया। फिर भी कुछ याद आ रहा था ...

एक बार शैली नियंत्रण पर jQuery यूआई विषयों की सुविधा का उपयोग करने के लिए एक निर्णय आया। यह स्पष्ट था कि आपको प्लगइन स्वयं लिखना होगा। आप देख सकते हैं कि कट के नीचे क्या आया।



रस-टूक प्लगइन (याद रखने में आसान: J क्वेरी UI F कम P परत), जब फ्लोप्लेयर से जुड़ा होता है, तो निर्दिष्ट कंटेनर में HTML प्लेयर नियंत्रण बनाता है।

$f().juifp(container, [options]) //  $f().juifp('div#juifp-container', { height: 30, showMute: false }) 

इस प्रकार, एक फ़्लैश तत्व छिपाया जा सकता है और प्लेबैक को नियंत्रित करने के लिए केवल HTML तत्वों का उपयोग किया जा सकता है।
प्लगइन लिखते समय, मैंने एमपी 3 प्ले करने पर ध्यान केंद्रित किया, लेकिन यह ध्यान दिया जाना चाहिए कि वीडियो के लिए सब कुछ सच है। जब तक फुलस्क्रीन बटन न लगाएं ...

डिफ़ॉल्ट सेटिंग्स का उपयोग करते समय खिलाड़ी का एक उदाहरण:

क्यों बह रहा है?

फ्लोप्लेयर टीम द्वारा उपयोग की जाने वाली कोड की शैली jQuery के समान कई मायनों में है, जो मेरे लिए व्यक्तिगत रूप से बहुत सुविधाजनक है। फ्लोप्लेयर भी बहुत अच्छी तरह से प्रलेखित है। ठीक है, सामान्य तौर पर - जब मैं इस टीम का एक और विकास पाया, तो मैं इसे पार कर गया - jQuery उपकरण - और मुझे ये उपकरण बहुत पसंद आए। )

JQuery UI क्यों?

मेरे विचार से jQuery की UI टीम ने बहुत सारे बेहतरीन उपकरण बनाने और उनके लिए सामान्य थीम का उपयोग करने का शानदार काम किया। इसे देखते हुए, साथ ही सामान्य रूप से jQuery की लोकप्रियता को देखते हुए, यह jQuery UI थीम पर आधारित होने का निर्णय लिया गया। हां, आपको jQuery UI के साथ आसानी से अपनी खुद की थीम बनाने की क्षमता के बारे में नहीं भूलना चाहिए।

फ़्लोप्लेयर के लिए जावास्क्रिप्ट प्लगइन

मैंने जावास्क्रिप्ट प्लगइन लिखने पर ध्यान नहीं दिया। यह off.sayte पर एक अच्छी मदद है। और फिर, यह सब मेरे उदाहरण में देखा जा सकता है। (वैसे, यह ध्यान दिया जाना चाहिए कि सामान्य रूप से खिलाड़ी के ऑफसाइट पर सभी जानकारी पूरी तरह से और स्पष्ट रूप से प्रस्तुत की जाती है।)

तो क्या?

प्लग-इन स्वयं juifp-1.0.source.js फ़ाइल में स्थित है

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

यहां काम कर रहे डेमो

जब सभी देख रहे हैं, मैं एक संक्षिप्त जानकारी दूंगा।

संभावित विकल्प (नीचे का उदाहरण डिफ़ॉल्ट मान दिखाता है):

 //  .          // (    ,    play    ) controls: [ 'seek-prev', 'stop', 'play', 'seek-next' ], //    (  title) buttonsTitle: { play: 'Play', stop: 'Stop', pause: 'Pause', prev: 'Prev', next: 'Next', mute: 'Mute', unmute: 'Unmute' }, //   true       ui-corner-all //  false -       roundCorners: true, //     Mute showMute: true, //      showVolumebar: true, //   - (0-100) defaultVolume: 50, //  -  .   - 150 progressbarWidth: 300, //     .   - 50 volumebarWidth: 100, //    .  0 -        elementsMargin: 1, //   .   - 16 height: 26 

विकल्पों का उपयोग करके आप इस तरह से प्लगइन का रूप पा सकते हैं


, उदाहरण के लिए, ऐसे



डिफ़ॉल्ट मान के साथ एक प्लगइन कनेक्ट करने के लिए न्यूनतम कोड

 $f().juifp(container); 

जहां कंटेनर उस तत्व के लिए चयनकर्ता है जहां प्लगइन रखा जाना चाहिए।

ध्यान रखें

1. अगला और पिछला बटन अभी तक कोई कार्रवाई नहीं करते हैं। (सोचा पहले से ही सुविधाजनक प्लेलिस्ट में है ...)

2. यह बहुत संभव है कि खिलाड़ी के अंदर फ़ाइल नाम प्रदर्शित करने के बारे में एक सवाल उठता है। मैं एक लंबे समय के लिए हिचकिचाया - क्या समय रेखा के अंदर गीत / फ़ाइल का नाम रखने के लिए, टाइमर के बाईं ओर। कुछ प्रयोगों के बाद, मैंने इसे पोस्ट नहीं करने का फैसला किया। हालांकि जूइप-टाइमलाइन-टेक्स्ट एलिमेंट सिर्फ मामले में बना हुआ है - जिस तरह से यह आपको गुमराह नहीं करता है।

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

• jquery.ui.core
• jquery.ui.widget
• jquery.ui.mouse
• jquery.ui.slider

हम शुद्ध जावास्क्रिप्ट में सब कुछ फिर से लिखने की आवश्यकता पर विचार करते हैं।

अभी के लिए बस इतना ही। मुझे किसी भी टिप्पणी पर खुशी होगी।

प्लगइन का नवीनतम संस्करण हमेशा यहां पाया जा सकता है।

कलाकार:

• jQuery
• jQuery यूआई
• Flowplayer