🤜🏼 🧕🏽 🤥 प्रोग्रामेटिक रूप से oEmbed के साथ कॉमन कोड की खोज करना 🤹🏾 👨🏾‍⚖️ 🏇🏼

सभी को शुभ दिन! मैं आकर्षित मैकलेन द्वारा "" प्रोग्रामेटिकली डिस्कवरिंग शेयरिंग कोड विथ ऑमबेड "लेख का अनुवाद साझा करना चाहता हूं।

परिचय

कई साइटें मल्टीमीडिया और सामग्री की मेजबानी करती हैं जिन्हें कुछ HTML एम्बेड कोड का उपयोग करके दूसरे प्लेटफॉर्म पर साझा किया जा सकता है। यदि आपके पास केवल आइटम का URL है और आपको मानवीय हस्तक्षेप के बिना मल्टीमीडिया का एम्बेडेड संस्करण खोजने की आवश्यकता है तो क्या होगा? यह वह जगह है जहाँ oEmbed काम में आता है।

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

YouTube जैसी साइटों के अपने स्वयं के एम्बेडेड खिलाड़ी होते हैं, जो ब्लॉग पोस्ट और यहां तक कि उत्पाद पृष्ठों में लोकप्रिय रूप से उपयोग किए जाते हैं। साउंडक्लाउड में आपके बैंड की वेबसाइट पर उनके संगीत खिलाड़ी को एम्बेड करने के लिए एक कोड है। चैरिटी फंडर्स अपने बड़े रेस रूट को स्ट्रवा जैसी साइट पर अपलोड कर सकते हैं और अपने प्रायोजकों को दिखाने के लिए इसे अपने फंडिंग साइट पर साझा करना चाहते हैं।

यह सब होस्टिंग साइट पर "शेयर" विकल्प खोजने और कुछ कोड की नकल करके किया जा सकता है, जो आमतौर पर HTML और जावास्क्रिप्ट का मिश्रण होता है। यह कोड आमतौर पर लैंडिंग पृष्ठ पर चिपकाया जा सकता है, और होस्टिंग साइट आपके सभी दोस्तों, ग्राहकों और संपर्कों को देखने के लिए सामग्री की एक समृद्ध प्रस्तुति प्रदान करेगी।

अब तक, इतना अच्छा है, और यह मैन्युअल रूप से सामग्री एम्बेड करने के लिए पर्याप्त है। हालांकि, एक और उपयोग मामला है जहां परिणाम समान है, लेकिन इसके लिए पथ पूरी तरह से अलग है।

कार्यक्रम का आदान-प्रदान

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

दोनों मामलों में, आपको यह तय करने की आवश्यकता है कि यदि उपयोगकर्ता इस सामग्री के हिस्से के रूप में URL जोड़ता है तो क्या करना है। आप इस परिदृश्य की कल्पना कर सकते हैं:

इस वीडियो को देखें! youtu.be/jw7bRnFbwAI

फिलहाल, एक प्रकाशन प्रणाली के रूप में, आपको यह पता लगाना होगा कि क्या करना है। पहला विकल्प कुछ नहीं करना है और सिर्फ सादे पाठ में URL छोड़ना है। यह बहुत अच्छा नहीं है, क्योंकि उपयोगकर्ता आमतौर पर URL पर क्लिक करना चाहते हैं, और सादा पाठ उन्हें दूसरे छोर पर पृष्ठ पर जाने में मदद नहीं करेगा।

दूसरा विकल्प इसे लिंक में बदलना है। यह एक अच्छा विकल्प है, क्योंकि उपयोगकर्ता लिंक का अनुसरण कर सकते हैं और सामग्री का उपयोग कर सकते हैं। लेकिन एक ही समय में वे आपकी साइट छोड़ देते हैं और वापस नहीं लौट सकते।

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

इससे समस्या पैदा होती है। URL को देखते हुए, मैं इसे पृष्ठ पर प्रदर्शित करने के लिए अधिकांश उपयोगकर्ताओं के लिए आवश्यक HTML / जावास्क्रिप्ट एम्बेड कोड में कैसे बदल सकता हूं?

यदि यह YouTube जैसी प्रसिद्ध साइट है, तो मैं कुछ कोड लिख सकता हूं जो वीडियो जानकारी निकालने और इस तरह एम्बेड करने के लिए कोड प्राप्त करने या बनाने के लिए YouTube API का उपयोग करता है। मैं Vimeo और VIVO जैसी अन्य वीडियो सेवाओं के लिए भी ऐसा ही कर सकता था। मैं फ़्लिकर और इंस्टाग्राम यूआरएल को पहचानने के लिए कोड लिख सकता हूं और फ़ोटो के अच्छे एम्बेड संस्करण प्राप्त करने के लिए उनके एपीआई का उपयोग कर सकता हूं। और वही ट्विटर और ट्वीट के लिए जाता है। लेकिन इसमें बहुत समय और प्रयास लगेगा!

आदर्श रूप से, आपको उस पृष्ठ पर उस सामग्री को प्रदर्शित करने के लिए एम्बेड कोड ब्लॉक में सामग्री के टुकड़े के URL को पारित करने के लिए एक मानकीकृत तरीके की आवश्यकता होती है। यदि आप ध्यान देते हैं, तो आप समझेंगे कि oEmbed इसके लिए उपयुक्त है।

मूल OEmbed

ठीक यही समस्या पोहरे (एक सही मायने में नवीन सोशल नेटवर्किंग साइट ट्विटर पर वीएचएस के लिए बेटमैक्स) पर काम करने के दौरान लीह कुल्वर को हुई। Pownce उपयोगकर्ता की अपडेट स्ट्रीम में समृद्ध सामग्री दृश्यों को एम्बेड करना चाहता था, लेकिन केवल उन सेवाओं को समर्थन सीमित नहीं करना चाहता था जिनके साथ उन्होंने विशेष रूप से एकीकरण के लिए कोड लिखा था। सहयोगी माइक मेलोन के साथ डिनर पर, साथ ही साथ कैल हेंडरसन (जिन्होंने फ़्लिकर में इंजीनियरिंग का नेतृत्व किया, उस समय ऐसी सामग्री के सबसे बड़े प्रदाताओं में से एक) और रिचर्ड क्रॉले के साथ, उन्होंने एम्बेड कोड प्राप्त करने के लिए एक खुले मानक के विचार पर काम किया। यूआरएल। हेंडरसन दूर चले गए और चर्चा के आधार पर कुछ विकसित किया, और ओमबेड का जन्म हुआ।

OEmbed का उपयोग करना

यहाँ यह कैसे काम करता है।

यह एक URL से शुरू होता है जो सामग्री के एकल तत्व की ओर इशारा करता है। यह एक YouTube वीडियो, छवि, या कुछ और हो सकता है। आमतौर पर यह आपकी साइट या एप्लिकेशन के उपयोगकर्ता द्वारा कुछ सामग्री के भाग के रूप में प्रदान किया जाएगा जिसे वह प्रकाशित करना चाहता है। पहला कदम इस URL पर पृष्ठ की सामग्री प्राप्त करना है, जो एक HTML पृष्ठ होना चाहिए।

यदि सामग्री की मेजबानी करने वाली साइट oEmbed का समर्थन करती है, तो इस पृष्ठ के अनुभाग में oembed सामग्री प्रकार के साथ एक लिंक तत्व होना चाहिए:

<link rel="alternate" type="application/json+oembed" href="http://www.youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json" title="Inclusive Components with Heydon Pickering" />

XML नोट : oEmbed XML और JSON दोनों स्वरूपों में प्रतिक्रियाओं का समर्थन करता है। इस लेख में, मैं केवल JSON पर विचार करता हूं, क्योंकि हम बर्बर नहीं हैं। लेकिन अगर आपको XML के साथ काम करने की आवश्यकता है, तो ध्यान रखें कि यह oEmbed विनिर्देशन के साथ समर्थित है, हालांकि आप पा सकते हैं कि कुछ प्रदाता केवल JSON प्रतिक्रियाओं की पेशकश करते हैं।

यह लिंक टैग वैकल्पिक विशेषता के रूप में वैकल्पिक और सेट के लिए सेट है या तो, अनुप्रयोग / json + oembed या पाठ / xml + oembed। यह यह विशेषता है जो हमें इस तथ्य को बताती है कि सामग्री के बारे में जानकारी प्राप्त करने के लिए href URL में निर्दिष्ट एक वास्तव में oEmbed API समापन बिंदु है।

इस URL में आमतौर पर दो पैरामीटर हैं: url और फॉर्मेट।

प्रारंभिक उपभोक्ता अनुरोध के लिए सामान्य URL पैरामीटर

पूर्ण विनिर्देश यहां बहुत अधिक विस्तार से जाता है (और आपको संदर्भ देना चाहिए कि यदि आप अपना स्वयं का कार्यान्वयन बनाते हैं), लेकिन ये दो पैरामीटर, आपको सबसे अधिक देखने की संभावना है।

इसलिए, हमारे पास एक URL है, एक पृष्ठ चुना गया है, जो एपीआई एंडपॉइंट के लिए एक अलग यूआरएल के साथ एक ओम लिंक लिंक टैग मिला है। फिर हम इस नए URL का अनुरोध करते हैं और यह सभी जानकारी देता है जो सेवा को इस सामग्री के बारे में प्रदान करनी चाहिए।

 { "author_name": "Smashing Magazine", "width": 480, "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)", "provider_name": "YouTube", "height": 270, "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "provider_url": "https://www.youtube.com/", "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg", "type": "video", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ", "version": "1.0", "thumbnail_width": 480 }

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

उत्तर के प्रकार

प्रतिक्रिया में कुंजी का प्रकार मान बताता है कि आप किस प्रकार के मीडिया को एम्बेड करने का इरादा रखते हैं।

समर्पित वीडियो सामग्री के अलावा, सबसे आम प्रकार जिसे आप जंगली में देख सकते हैं वह समृद्ध है। यहां तक कि फ़्लिकर भी, जबकि अभी भी एक फोटो प्रतिक्रिया भेजते हुए, छवि के लिए एक शांत एम्बेड करने योग्य "खिलाड़ी" के साथ HTML भी प्रदान करता है।

ज्यादातर मामलों में, आपकी साइट पर सामग्री एम्बेड करना HTML मान के रूप में प्रदान किए गए कोड का उपयोग करने का एक मामला है।

सुरक्षा नोट

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

इसमें यह सुनिश्चित करने के लिए URL फ़िल्टरिंग शामिल हो सकता है कि योजनाएँ और डोमेन अपेक्षा के अनुरूप हैं, और कुकीज़ के माध्यम से अन्य डोमेन में iframe में सैंडबॉक्स कोड। आपको उस स्थिति तक पहुंच प्राप्त करनी होगी जिसमें आप कोड का उपयोग कर रहे हैं और सुनिश्चित करें कि आप अपने आप को अत्यधिक जोखिम में नहीं डाल रहे हैं।

चलिए शुरू करते हैं

ओमेबेड का उपयोग करते समय प्रक्रिया को समझना उतना ही महत्वपूर्ण है, लेकिन वास्तविकता यह है कि अधिकांश आम भाषाओं में पुस्तकालय हैं जो प्रक्रिया को सार करते हैं और इसे अपेक्षाकृत सरल बनाते हैं।

उदाहरण के लिए, एनपीएम पैकेजिंग oembed सामग्री के URL के आधार पर एक अनुरोध बनाने और oEmbed के लिए एक प्रतिक्रिया प्राप्त करने के लिए एक बहुत ही सरल इंटरफ़ेस प्रदान करता है।

पहले अपने प्रोजेक्ट में पैकेज स्थापित करें:

 npm i oembed

और फिर URL का अनुरोध करें। यहाँ मैं Notist में प्रस्तुति URL का उपयोग करता हूँ।

 const oembed = require('oembed'); const url = 'https://noti.st/drewm/ZOFFfI'; oembed.fetch(url, { maxwidth: 1920 }, function(error, result) { if (error) console.error(error); else console.log("oEmbed result", result); });

और जवाब है:

 { type: 'rich', version: '1.0', title: 'Understanding oEmbed', author_name: 'Drew McLellan', author_url: 'https://noti.st/drewm', provider_name: 'Notist', provider_url: 'https://noti.st', cache_age: 604800, thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png', thumbnail_width: 1600, thumbnail_height: 900, html: '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>', width: 960, height: 540 }

यदि आप पीएचपी में भी ऐसा ही करना चाहते हैं, तो कम्पोजर के माध्यम से इंस्टॉलेशन के लिए एम्बेड / एम्बेड नामक एक सुविधाजनक पैकेज उपलब्ध है।

 composer require embed/embed

और फिर अपने PHP प्रोजेक्ट में:

 use Embed\Embed; $info = Embed::create('https://noti.st/drewm/ZOFFfI'); $info->title; // "Understanding oEmbed" $info->authorName; // "Drew McLellan $info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

जैसा कि आप देख सकते हैं, पुस्तकालय का उपयोग करते हुए, प्रक्रिया बहुत सरल हो जाती है, और आप जल्दी से एक यूआरएल से एक एम्बेडेड कोड पर स्विच कर सकते हैं, जो उपयोगकर्ता सामग्री का एक समृद्ध प्रतिनिधित्व दिखाने के लिए तैयार है।

निष्कर्ष

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

अब जब आप oEmbed (क्षमा करें) के बारे में जानते हैं, लेकिन आपके पास कोई बहाना नहीं है कि आप अपने भविष्य की परियोजनाओं में यूआरएल को कैसे संभालेंगे, इस पर गंभीरता से ध्यान न दें।

प्रोग्रामेटिक रूप से oEmbed के साथ कॉमन कोड की खोज करना