कुछ समय पहले मैंने वीडियो टैग का उल्लेख किया था, जिसे विशेष रूप से html5 में लागू किया गया था। हालाँकि, दुर्भाग्य से, टैग के उपयोग से लाभ के बजाय अधिक असुविधा होगी। इसलिए, मैं आपको उस तरीके के बारे में बताता हूं जिसमें आप पूरी तरह से एक वीडियो प्रारूप के साथ कर सकते हैं।
एक परियोजना के लिए मुझे साइट पर वीडियो को हटाने की संभावना खोजने की आवश्यकता थी। एक खिलाड़ी को फ़्लैश पर स्क्रैच से बनाना संभव नहीं था (शुरुआत के लिए, मेरे पास विकास का माहौल नहीं है और यह प्रदान नहीं करता है), इसलिए, यह आवश्यक था, वास्तव में, एक फ्लैश प्लेयर के चेहरे में एक उपयुक्त उम्मीदवार खोजने के लिए। विशेष रूप से जटिल कुछ भी आवश्यक नहीं था, क्योंकि YouTube उपयोगकर्ताओं के लिए धन्यवाद इस तरह के खिलाड़ियों में नेविगेट करना बहुत आसान है;)
साइटों पर स्थित 2 उम्मीदवार flv-mp3.com (uppod ona से एक परियोजना) और Flowplayer । प्रत्येक छोटा प्रहार करने के बाद, पहले वाला तेजी से वर्तमान एपी प्रदान करने वाले कंबाइन के पक्ष में छोड़ दिया गया था। जैसा कि समय ने दिखाया है, आंतरिक आंत ने मुझे निराश नहीं किया (हालांकि कुछ लोग vtyuhat flv-mp3.com में जाने में कामयाब रहे)।
जैसा कि आप जानते हैं, पहली धारणा बल्कि भ्रामक है, और वरीयता कभी-कभी कम से कम संतृप्त डिवाइस को दी जाती है (खासकर अगर यह मूल भाषा का उपयोग करता है)। यह ऐसा दृष्टिकोण है जो flv-mp3 की मांग में था: सेवा निर्दिष्ट विशेषताओं के साथ एक खिलाड़ी को "इकट्ठा" करने का अवसर प्रदान करती है; प्रपत्र फ़ाइल के खेलने, स्क्रीन सेवर, आयामों और कुछ अन्य मापदंडों को इंगित करें) और फ़ाइल को सम्मिलित करने के लिए आउटपुट कोड प्राप्त करें। हां, विकल्प बहुत सुविधाजनक लग सकता है, खासकर उन लोगों के लिए जो html को एक मजबूत चुड़ैल मानते हैं, जेएस और इतने पर नहीं।
साइट पर वीडियो के केवल आवधिक जोड़ ही खिलाड़ी द्वारा लगातार "निर्माण" करने के उत्साह में योगदान करने की संभावना नहीं है। वैकल्पिक रूप से, आप सभी सेटिंग्स का पता लगा सकते हैं और सर्वर भाषा के माध्यम से स्वचालित कर सकते हैं। लेकिन इस सिद्धांत को केवल विकृत कहा जा सकता है (YouTube पर वीडियो लोड करना और डाउनलोड करने के लिए तैयार कोड प्राप्त करना बहुत आसान है)।
यहाँ हम उस चीज़ पर आते हैं जिसे पहले से ही एक जादूगरनी कहा जा सकता है। आप जावास्क्रिप्ट जादू को समझना चाहते हैं? मैं दिखाऊंगा कि यह बिल्कुल मुश्किल नहीं है (एक निर्माणकर्ता का उपयोग करने से भी आसान)। और इस flowplayer के साथ मदद। आप एक संस्करण चुन सकते हैं यहाँ से , लेकिन GPL3 के तहत वितरित किया गया पहला संस्करण आपकी साइट के लिए काफी उपयुक्त है।
खिलाड़ी निम्नलिखित सामग्री के प्लेबैक का समर्थन करता है: flv, mp4, m4v (छवियों के लिए - jpg, gif, png)। संस्करण 9 से वीडियो का समर्थन किया जाता है, इसलिए कोई समर्थन समस्या नहीं होनी चाहिए।
प्लेयर के साथ संग्रह डाउनलोड करें और इसे अनपैक करें। आपको साइट पर 3 फ़ाइलें अपलोड करने की आवश्यकता होगी: flowplayer.controls-NumVer.swf , flowplayer -NumVer.swf और उदाहरण / flowplayer-NumVer.min.js , जहां NumVer सिर्फ संस्करण संख्या है, और उदाहरण के लिए, 3.2.7 हो सकता है।
पहली फ़ाइल में नियंत्रण कक्ष होता है, दूसरा - सीधे खिलाड़ी और तीसरा लिंक होता है जो एपीआई प्रदान करता है। पहली 2 फाइलें (* .swf) एक ही फ़ोल्डर में होनी चाहिए। अब सबसे सरल कोड का समय है। यह हो सकता है:
<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('खिलाड़ी', '/src/player/flowplayer-3.2.7.swf', {}); </ script>
प्लेयर आईडी वाला div एलिमेंट वह कंटेनर होता है जिसमें वीडियो को अनसुना किया जाएगा। दूसरी पंक्ति में जावास्क्रिप्ट फ़ाइल कनेक्शन है। आउटपुट के लिए सीधे एक फ़ंक्शन फ़्लोप्लेयर () जिम्मेदार है, जो 3 पैरामीटर पास करता है:
- उस तत्व की आईडी जिसमें वीडियो चलाया जाना चाहिए;
- खिलाड़ी के लिए पथ (खिलाड़ी के लिए, और उन नियंत्रणों के लिए नहीं जो स्वचालित रूप से लोड किए जाएंगे);
- कुछ अतिरिक्त पैरामीटर।
वैसे, पहचानकर्ता के अलावा, आप सीधे किसी ऑब्जेक्ट या चयनकर्ता के संदर्भ को पास कर सकते हैं।
ऊपर दिया गया कोड कुछ भी प्रदर्शित नहीं करता है, लेकिन यह एक विचार देता है कि किसी फ़्लॉपीयर को एक पृष्ठ से जोड़ना कितना आसान है। वीडियो को आउटपुट करने के लिए, आपको एक तीसरा पैरामीटर बनाने की आवश्यकता है, और यह, वैसे, काफी सरल भी है।
सादगी के लिए: तीसरा पैरामीटर (कॉन्फ़िगरेशन) एक साहचर्य सरणी है जिसमें निम्नलिखित तत्वों का वर्णन किया जा सकता है:
- क्लिप - इस कुंजी का उपयोग करके, आप "वैश्विक सेटिंग" बना सकते हैं, उदाहरण के लिए, क्या आप स्वचालित रूप से बफ़रिंग (ऑटो-बफ़रिंग) या प्लेइंग (ऑटोप्ले) शुरू करना चाहते हैं, सामग्री को कैसे स्केल करें (फिट के मूल्य के साथ स्केलिंग मूल अनुपात को बनाए रखेगा, और सामान्य वीडियो के लिए उपयोग किया जाएगा शायद केवल यह)। आप खेली जा रही फ़ाइल (url) को निर्दिष्ट कर सकते हैं, और यहां तक कि घटनाओं को स्थगित भी कर सकते हैं (फ़ंक्शन जिन्हें कॉल किया जाएगा, उदाहरण के लिए, जब फिल्म चलना शुरू होती है);
- प्लेलिस्ट एक नियमित सरणी (सूची) है। प्रत्येक तत्व एक स्ट्रिंग हो सकता है (इस मामले में, स्ट्रिंग क्लिप का पता चला रहा है), या एक साहचर्य सरणी। दूसरे मामले में, डेटा सेट को पिछले आइटम से क्लिप कुंजी के समान डेटा सेट के रूप में देखा जा सकता है, अर्थात आप बफ़रिंग का उपयोग करना, खेलना शुरू करना और इसी तरह निर्दिष्ट कर सकते हैं;
- प्लगइन्स - मानक सुविधाओं का विस्तार करने के लिए कार्य करता है। सुविधाओं में से एक मौके पर इंटरफेस को सही ढंग से निर्धारित करने की क्षमता है।
अब एक छोटा सा उदाहरण जिसमें संभावनाओं का प्रदर्शन शामिल है:
<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('खिलाड़ी', '/src/player/flowplayer-3.2.7.swf', {क्लिप: {autoPlay: false, autoBuffering: false, स्केलिंग : 'फिट'}, प्लेलिस्ट: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', स्वतः-भंजन: सत्य, ऑटोप्ले: सच}, 'http: // प्लगइन्स नियंत्रण में हेरफेर करने के लिए pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // नियंत्रण: {url:' flowplayer.controls-3.2.16.swf ', प्लेलिस्ट: झूठी , // रिवाइंड बटन बंद को हटाता है: सही, // स्टॉप बटन स्क्रबर जोड़ें: सच // वीडियो की स्क्रॉलिंग अक्षम करता है}}}); </ script>
प्रस्तुत कोड वैश्विक सेटिंग्स के रूप में निम्नलिखित सेट करता है: ऑटो-स्टार्ट प्लेबैक को अक्षम करना, विंडो को फिट करने के लिए ऑटो-बफरिंग, स्केलिंग वीडियो को अक्षम करना। एक चंचल फ़ाइल के रूप में, एक तस्वीर और वीडियो का उपयोग किया जाता है, और तस्वीर के लिए सेटिंग्स ओवरराइड की जाती हैं (क्योंकि इसे स्वचालित रूप से लोड किया जाना चाहिए)। जब आप चित्र (या प्ले बटन) पर क्लिक करते हैं, तो वीडियो दिखाया जाता है। जैसा कि आप देख सकते हैं, सब कुछ बहुत सरल है। यदि आप एक और वीडियो क्लिप जोड़ना चाहते हैं, तो केवल एक अल्पविराम द्वारा अलग की गई प्लेलिस्ट में एक नया आइटम जोड़ें। यदि प्लेलिस्ट के स्वचालित प्लेबैक की आवश्यकता होती है, तो साहचर्य सरणी क्लिप में सेट किया जाता है, ऑटोप्ले का मान सही पर सेट होता है।
एपी कार्यों से युक्त प्रलेखन स्थित है यहां । अगर कोई अंग्रेजी नहीं समझता है - इससे कोई फर्क नहीं पड़ता, वहां सब कुछ काफी स्पष्ट है। और ऊपर दिए गए कोड का विश्लेषण करने के बाद, यह समझना काफी संभव है कि डॉक में क्या है। मैं अत्यधिक रूप से झांकने की सलाह देता हूं, यह सुनिश्चित करने के लिए कि एक "सेटिंग" होगी जो मांग में होगी।
उदाहरण दे सकते हैं यहाँ देखो । स्रोत कोड (Ctrl + U) देखना न भूलें
लेखक
ऑफ़लाइन 1 सप्ताह
x64 (उर्फ एंडी)
टिप्पणियाँ: 2842 प्रकाशन: 395 पंजीकरण: 02-04-2009