Hari baik untuk semua! Saya ingin membagikan terjemahan artikel ""
Programmatically Discovering Sharing Code with oEmbed "oleh Drew McLellan.
Pendahuluan
Banyak situs meng-host multimedia dan konten yang dapat dibagikan di platform lain menggunakan beberapa kode embed HTML. Apa yang terjadi jika Anda hanya memiliki URL item dan Anda perlu menemukan versi multimedia yang tertanam tanpa campur tangan manusia? Di sinilah oEmbed berguna.Jaringan ini penuh dengan layanan yang berisi berbagai konten , seperti video, gambar, musik dan podcast, peta dan grafik, serta semua jenis hiburan. Kemungkinan besar, ketika Anda menambahkan konten Anda ke situs, itu akan menawarkan Anda cara untuk menanamkan konten ini di halaman web di tempat lain.
Situs-situs seperti YouTube memiliki pemutar tersematnya sendiri, yang populer digunakan dalam posting blog dan bahkan halaman produk. Soundcloud memiliki kode untuk menyematkan pemutar musik mereka di situs web band Anda. Penggalangan dana amal dapat mengunggah rute balapan besar mereka ke situs seperti Strava dan ingin membagikannya di situs penggalangan dana mereka untuk ditampilkan kepada sponsor mereka.
Semua ini dapat dilakukan dengan menemukan opsi "Bagikan" di situs hosting dan menyalin beberapa kode, yang biasanya merupakan campuran dari HTML dan JavaScript. Kode ini kemudian biasanya dapat ditempelkan ke halaman arahan, dan situs hosting akan memberikan presentasi konten yang kaya untuk dilihat oleh semua teman, pelanggan, dan kontak Anda.
Sejauh ini, sangat bagus, dan cukup baik untuk menyematkan konten secara manual. Namun, ada kasus penggunaan lain di mana hasilnya sama, tetapi jalan menuju itu sama sekali berbeda.
Pertukaran program
Bayangkan Anda membuat aplikasi atau situs web yang menerima konten dari pengguna. Ini bisa berupa sesuatu yang sederhana, misalnya, halaman web dasar bagi karyawan untuk berbagi berita dengan kolega, atau sesuatu yang besar, misalnya, jaringan sosial keseluruhan tempat orang dapat mendaftar dan mulai memposting pesan.
Dalam kedua kasus, Anda harus memutuskan apa yang harus dilakukan jika pengguna menambahkan URL sebagai bagian dari konten ini. Anda bisa membayangkan skenario:
Lihat video ini! youtu.be/jw7bRnFbwAI
Saat ini, sebagai sistem penerbitan, Anda perlu mencari tahu apa yang harus dilakukan. Opsi pertama adalah tidak melakukan apa-apa dan meninggalkan URL dalam teks biasa. Ini tidak terlalu baik, karena pengguna biasanya ingin mengklik URL, dan teks biasa tidak akan membantu mereka pergi ke halaman di ujung lainnya.
Opsi kedua adalah mengubahnya menjadi tautan. Ini adalah pilihan yang baik, karena pengguna dapat mengikuti tautan dan mengakses konten. Tetapi pada saat yang sama mereka meninggalkan situs Anda dan mungkin tidak kembali.
Pengalaman pengguna terbaik mungkin kemampuan mengekstraksi pemain untuk konten ini dan menempelkannya di sana, bukan hanya URL. Ini akan memungkinkan pengguna untuk melihat konten secara langsung di situs Anda, seperti di Facebook.
Ini menciptakan masalah. Mengingat URL, bagaimana saya bisa mengubahnya menjadi kode embed HTML / JavaScript yang dibutuhkan sebagian besar pengguna untuk ditampilkan di halaman?
Jika itu adalah situs terkenal seperti YouTube, saya dapat menulis beberapa kode yang menggunakan API YouTube untuk mengekstrak informasi video dan mendapatkan atau membuat kode untuk disematkan dengan cara ini. Saya dapat melakukan hal yang sama untuk layanan video lainnya seperti Vimeo dan VIVO. Saya dapat menulis kode untuk mengenali URL Flickr dan Instagram dan menggunakan API mereka untuk mendapatkan versi foto yang bagus untuk diembed. Dan hal yang sama berlaku untuk Twitter dan tweet. Tetapi akan membutuhkan banyak waktu dan usaha!
Idealnya, Anda memerlukan cara terstandarisasi untuk meneruskan URL suatu konten ke dalam blok kode embed untuk menampilkan konten itu di halaman. Jika Anda memperhatikan, Anda akan memahami bahwa oEmbed cocok untuk ini.
Asal usul
Itulah masalah yang dihadapi
Leah Culver saat bekerja di Pownce (situs jejaring sosial yang benar-benar inovatif yang Betamax untuk VHS di Twitter). Pownce ingin menyematkan tampilan konten yang kaya dalam aliran pembaruan pengguna, tetapi tidak ingin membatasi dukungan hanya pada layanan yang dengannya mereka secara khusus menulis kode untuk integrasi. Saat makan malam dengan kolega Mike Malone, serta dengan
Cal Henderson (yang memimpin teknik di Flickr, salah satu penyedia konten terbesar pada saat itu) dan
Richard Crowley, mereka menyusun gagasan standar terbuka untuk mendapatkan kode embed. URL Henderson berjalan pergi dan mengembangkan sesuatu berdasarkan diskusi, dan oEmbed lahir.
Menggunakan OEmbed
Begini cara kerjanya.
Itu dimulai dengan URL yang menunjuk ke satu elemen konten. Ini bisa berupa video YouTube, gambar, atau yang lainnya. Biasanya ini akan disediakan oleh pengguna situs atau aplikasi Anda sebagai bagian dari beberapa konten yang ingin ia terbitkan. Langkah pertama adalah mendapatkan konten halaman di URL ini, yang seharusnya merupakan halaman HTML.
Jika situs yang menampung konten mendukung oEmbed, bagian halaman ini harus memiliki elemen tautan dengan tipe konten yang diambil:
<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" />
Catatan XML : oEmbed mendukung respons dalam format XML dan JSON. Dalam artikel ini, saya hanya mempertimbangkan JSON, karena kami bukan orang biadab. Tetapi jika Anda perlu bekerja dengan XML, perlu diingat bahwa itu didukung dengan spesifikasi oEmbed, meskipun Anda mungkin menemukan bahwa beberapa penyedia hanya menawarkan respons JSON.
Tag tautan ini sebagai atribut rel diatur ke alternatif dan ketik disetel ke salah satu, application / json + oembed atau teks / xml + oembed. Atribut inilah yang memberi tahu kita fakta bahwa yang ditentukan dalam URL href sebenarnya adalah titik akhir API oEmbed untuk mendapatkan informasi tentang konten.
URL ini biasanya memiliki dua parameter: url dan format.
Parameter URL umum untuk permintaan konsumen awalSpesifikasi lengkapnya jauh lebih rinci di sini (dan Anda harus referensi bahwa jika Anda membuat implementasi Anda sendiri), tetapi dua parameter ini, Anda cenderung paling melihat.
Jadi, kami memiliki URL, memilih halaman, menemukan tag tautan oEmbed dengan URL yang berbeda untuk titik akhir API. Kemudian kami meminta URL baru ini dan mengembalikan semua informasi yang harus disediakan layanan tentang konten ini.
{ "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 }
Dan sekarang kita akan bicara! Jawabannya memberi kami banyak informasi tentang konten. Di masa mendatang, harus ada 1.0, yang merupakan versi saat ini dari spesifikasi oEmbed. Informasi lain yang dikembalikan sangat tergantung pada biaya jenis.
Jenis-jenis Jawaban
Nilai jenis kunci dalam respons menunjukkan jenis media apa yang ingin Anda sematkan.
Selain konten video khusus, jenis paling umum yang dapat Anda lihat di alam liar adalah kaya. Bahkan Flickr sendiri, sementara masih mengirimkan respons foto, juga menyediakan html dengan "pemain" keren untuk gambar.
Dalam kebanyakan kasus, menyematkan konten di situs Anda hanyalah kasus menggunakan kode yang disediakan sebagai nilai html.
Catatan Keamanan
Anda harus berhati-hati dengan satu hal: jika Anda mengambil respons HTML dan menanamkannya secara terprogram di halaman yang Anda posting tanpa orang yang memeriksa ulang kode yang Anda tempel, selalu ada kemungkinan bahwa kode ini akan berbahaya. Karena itu, Anda harus mengambil langkah-langkah yang tepat untuk mengurangi risiko.
Ini mungkin termasuk pemfilteran URL untuk memastikan skema dan domain seperti yang diharapkan, dan kode kotak pasir di iframe di domain lain tanpa cookie. Anda harus mendapatkan akses ke situasi di mana Anda menggunakan kode dan memastikan bahwa Anda tidak mengekspos diri Anda pada risiko yang berlebihan.
Mari kita mulai
Sama pentingnya untuk memahami proses ketika menggunakan oEmbed, tetapi kenyataannya adalah bahwa sebagian besar bahasa umum memiliki perpustakaan yang mengabstraksi proses dan membuatnya relatif sederhana.
Misalnya, kemasan NPM yang dibuat menyediakan antarmuka yang sangat sederhana untuk membuat permintaan berdasarkan URL konten dan menerima respons kembali ke oEmbed.
Pertama instal paket di proyek Anda:
npm i oembed
Dan kemudian minta URL. Di sini saya menggunakan URL presentasi di Notist.
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); });
Dan jawabannya adalah:
{ 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 }
Jika Anda ingin melakukan hal yang sama dalam PHP, paket yang disebut
embed / embed tersedia untuk instalasi melalui Composer.
composer require embed/embed
Dan kemudian dalam proyek PHP Anda:
use Embed\Embed; $info = Embed::create('https://noti.st/drewm/ZOFFfI'); $info->title;
Seperti yang Anda lihat, menggunakan perpustakaan, prosesnya menjadi sangat sederhana, dan Anda dapat dengan cepat beralih dari URL ke kode yang disematkan, siap untuk menampilkan representasi yang kaya dari konten pengguna.
Kesimpulan
oEmbed adalah solusi yang sangat elegan untuk masalah yang sangat spesifik. Anda mungkin berpikir bahwa hanya beberapa insinyur yang bekerja di jejaring sosial besar yang akan mendapat manfaat dari ini, tetapi pada kenyataannya, sistem penerbitan di mana pengguna dapat memasukkan URL adalah sangat umum. Temukan saya seorang insinyur internal yang pada titik tertentu tidak perlu membuat semacam CMS. Kami mungkin tidak memikirkannya dalam istilah yang sama, tetapi jika Anda menerima input pengguna, Anda harus memikirkan apa yang harus dilakukan jika input ini mengandung URL.
Sekarang Anda sudah tahu tentang oEmbed (maaf), tetapi Anda tidak punya alasan untuk tidak memperhatikan serius bagaimana Anda akan menangani URL di proyek-proyek masa depan Anda.
Informasi tambahan