🧕🏼 🤱🏿 🔖 विदेशी भाषा शिक्षण साइटों के लिए वीडियो प्लेयर 👯 👓 ⏳

कुछ समय पहले, मैंने जावास्क्रिप्ट वीडियो प्लेयर MedialElement के लिए कई प्लगइन्स विकसित किए , अब मैंने उन्हें खुले तौर पर पोस्ट किया है। ये प्लगइन्स खिलाड़ी की कार्यक्षमता का इस तरह से विस्तार करते हैं कि इसका उपयोग विदेशी भाषाओं को पढ़ाने वाले वीडियो देखने के लिए किया जा सकता है। बेशक, मेरे प्लगइन्स के बिना, कोई भी इस खिलाड़ी में प्रशिक्षण वीडियो देखने के लिए परेशान नहीं करता है, लेकिन ये प्लगइन्स देखने और सीखने की प्रक्रिया को अधिक आरामदायक बनाते हैं।

खिलाड़ी http://www.yabla.com को उस मानक के रूप में लिया गया था जिसके विकास के दौरान मैं आकांक्षी था (मैं इसे छिपाऊंगा नहीं, यह मूल रूप से पूरे संसाधन को क्लोन करने की योजना बनाई गई थी, लेकिन परियोजना शुरू नहीं हुई थी)। इस खिलाड़ी में निम्नलिखित विशेषताएं हैं:

टाइमलाइन नेविगेशन दूसरे के लिए सटीक नहीं है, लेकिन वाक्य के लिए सटीक है। एक व्यक्ति जो वीडियो से एक भाषा सीखता है, उसे अक्सर कई बार गैर-कानूनी वाक्यांश सुनने के लिए वीडियो को रिवाइंड करना पड़ता है और कुछ क्लिकों के साथ इसकी शुरुआत की तलाश करने के बजाय एक क्लिक के साथ वाक्यांश की शुरुआत में जाना अधिक सुविधाजनक होता है।
प्रत्येक वाक्यांश को बार-बार सुनने के लिए लूप किया जा सकता है।
वाक्यांशों में समयरेखा के टूटने को संपादक से किसी विशेष तैयारी की आवश्यकता नहीं है: समय डेटा को कैप्शन के साथ मानक srt फ़ाइल से चुना जाता है।
सभी उपलब्ध भाषाओं में कैप्शन वीडियो के तहत प्रदर्शित किए जाते हैं (यदि वांछित हो तो छिपाया जा सकता है)। यह सुविधा, उदाहरण के लिए, वीडियो की मूल भाषा और उपयोगकर्ता की मूल भाषा में उपयोगकर्ता को कैप्शन दिखाने के लिए अनुमति देती है। क्रेडिट में एक शब्द पर क्लिक करने से वीडियो रुक जाता है और उपयोगकर्ता को उस शब्द का अनुवाद दिखाता है जिसे क्लिक किया गया था।
टाइमर न केवल वीडियो की शुरुआत से समय दिखाता है, बल्कि वाक्यांश संख्या और वीडियो में वाक्यांशों की कुल संख्या भी है।
वीडियो की गति को धीमा या त्वरित किया जा सकता है।
वाक्यांशों के बीच संक्रमण न केवल समयरेखा पर क्लिक करके संभव है, बल्कि हॉटकीज़ Ctrl + बाएँ / दाएँ तीर का उपयोग करके भी संभव है। अन्य हॉटकी: स्पेसबार - वाक्यांश को लूप करें / लूप को पूर्ववत करें, Ctrl + ऊपर / नीचे तीर - क्लिप की गति को बदलें।

परियोजना के काम को प्रदर्शित करने के लिए, मैंने एक छोटी सी साइट बनाई: lang.kece.ru (इस पर सभी वीडियो अन्य संसाधनों से उधार लिए गए थे), खिलाड़ी खुद को स्थापित प्लग इन के साथ देखा जा सकता है, उदाहरण के लिए, यहाँ: lang.kece.ru/ru-series/introducing-artifical -विभिन्नता / वीडियो / पाठ्यक्रम-स्वागत है । सिद्धांत रूप में, थोड़ा शोधन के साथ, प्लगइन्स का उपयोग न केवल प्रशिक्षण वीडियो देखने के उद्देश्य से किया जा सकता है, बल्कि पूर्ण फिल्में / टीवी शो देखने के उद्देश्य से भी किया जा सकता है। संशोधन की आवश्यकता होगी क्योंकि यदि वीडियो में 20-30 से अधिक वाक्यांश हैं, तो समयरेखा मुहावरों के साथ छोटे ब्लॉकों की गड़बड़ी में बदल जाती है और माउस क्लिक की मदद से नेविगेशन लगभग बेकार हो जाता है, लेकिन इस मामले में गर्म कुंजियों का उपयोग मदद करता है।

प्लगइन्स का परीक्षण केवल आधुनिक ब्राउज़रों में किया गया था। MedialElement एक HTML5 प्लेयर है, इसलिए, यदि उपयुक्त प्रारूपों में वीडियो फाइलें हैं, तो वीडियो प्रदर्शन लगभग हर जगह उपलब्ध है: विंडोज, मैक, लिनक्स, आईओएस, एंड्रॉइड। फ्लैश की तरह प्लगइन्स इंस्टॉल करना आवश्यक नहीं है। आप यह जान सकते हैं कि आधुनिक ब्राउज़र द्वारा कौन से वीडियो प्रारूप समर्थित हैं, उदाहरण के लिए, यहां: www.w3schools.com/html/html5_video.asp संक्षेप में, दो स्वरूपों में फाइलें: MP4 (वीडियो के लिए H264 कोडेक के साथ एमपीईजी 4 और ऑडियो के लिए एएसी कोडेक) और वेबएम (वीडियो के लिए वीपी 8 कोडेक और ऑडियो के लिए वॉर्बिस) सभी आधुनिक ब्राउज़रों और उपकरणों को कवर करेंगे।

प्लेयर और प्लगइन्स की स्थापना मानक है और MediaElement के लिए प्रलेखन में विस्तार से वर्णित है: mediaelementjs.com । पहले आपको आवश्यक js फ़ाइलों को कनेक्ट करना होगा:

<script src="/scripts/mediaelementsjs/build/mediaelement-and-player.js"></script> <script src="/scripts/mediaelementsjs/plugins/trackprogress/js/mep-feature-trackprogress.js"></script> <script src="/scripts/mediaelementsjs/plugins/timecaption/js/mep-feature-timecaption.js"></script> <script src="/scripts/mediaelementsjs/plugins/doublesubtitles/js/mep-feature-doublesubtitles.js"></script> <script src="/scripts/mediaelementsjs/plugins/dictionary/js/mep-dictionary.js"></script> <script src="/scripts/mediaelementsjs/plugins/nextprev/js/mep-nextprev.js"></script> <script src="/scripts/mediaelementsjs/plugins/speed/js/mep-feature-speed.js"></script>

फिर पृष्ठ पर सही स्थान पर एक वीडियो डालें:

 <video id="player1" width="720" height="405" type="video/mp4" poster="/path/to/poster-image.png" controls> <source src="/path/to/video.mp4" type="video/mp4" title="Video title"> <source src="/path/to/video.webm" type="video/webm" title="Video title"> <track kind="subtitles" src="/path/to/subtitles/en.srt" srclang="en" /> <track kind="subtitles" src="/path/to/subtitles/ru.srt" srclang="ru" /> </video>

सेटिंग में, निर्दिष्ट करें कि कौन से प्लग इन का उपयोग करें और खिलाड़ी को इनिशियलाइज़ करें:

 <script> var video_options = { features: ['playpause', 'timecaption', 'duration2', 'trackprogress', 'prev', 'repeat', 'next', 'volume', 'doublesubtitles', 'dictionary', 'speedupdown'], // some other settings, more details here: mediaelementjs.com/#options } </script> <script> var player = new MediaElementPlayer('#player1', video_options); </script>

वह सब है।

प्लगइन्स रिपॉजिटरी में उपलब्ध हैं: github.com/romka/mediaelementjs-language-learning-plugins । कांटे और पुल अनुरोधों का स्वागत है!

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

विदेशी भाषा शिक्षण साइटों के लिए वीडियो प्लेयर

More articles: