Embedding Multimedia - How does it work??

Multimedia May 27, 2021

LiaScript has a new type of link. If you prefix a link in Markdown with an exclamation mark, then this link is marked as an image, and it gets embedded into the document. LiaScript had already two extensions for this, the question-mark is used to indicate audio (just think of an ear) and images with sound which are used as markers for video content.

![image](url)

?[audio](url)

!?[video](url)

One benefit of using this notation is, that this does not interfere with Markdown, the link is still valid and "clickable" in any other Markdown-viewer. This works pretty well, but from time to time it would be great if it would also be possible to embed different kind of external resources or entire websites, which cannot be associated to audio or video content.

In LiaScript we had extended the link annotation for two question-marks, which means: "I have no idea, please try to embed this content". As shown in the demo below, this is treated like any other multimedia-link, and it can be used to create galleries as well.

To accomplish this, we currently use two different strategies:

  1. oEmbed
  2. IFrames

1. oEmbed

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

This functionality is embedded as a standalone web component and can be found here. It basically goes like this: If an only if the provided URL matches one of the websites that provide an oEmbed-service, then this service is queried at first. The parameters send are the URL and the size of the screen. This can be seen as a simple question, where the LiaScript-interpreter asks: "What is the best way to embed this source" and the service-provider responds with an JSON that looks similar to the following one:

{
	"version": "1.0",
	"type": "photo",
	"width": 240,
	"height": 160,
	"title": "ZB8T0193",
	"url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
	"author_name": "Bees",
	"author_url": "http://www.flickr.com/photos/bees/",
	"provider_name": "Flickr",
	"provider_url": "http://www.flickr.com/"
}

The response contains either a URL that can be directly embedded, or it will respond with an "html" field that contains the required HTML tags to embed this content. Additionally, we use the thumbnails provided by this service within the gallery-view.

If there is no service-provider for the given URL, then LiaScript will try to embed the content as an IFrame.

2. IFrames

An IFrame is an HTML-tag that allows to embed other websites into the current site. This is also what you do, when you try to embed, for example, a YouTube-video manually. This embed-code is mostly an IFrame too. However, some sites might protect their content and will not allow embedding their content into the content of another website with another URL, which is known as CORS. Thus, you will have to check if your content will be embedded into LiaScript, if you are using a local editor or the dev-server to preview your course, this might work well, since most browsers ignore CORS on localhost. But, if your content is loaded from a website, this might not be the case anymore ;-)

oEmbed Service-Providers

date: 24/05/2022

# Provider Name URL
0 23HQ https://www.23hq.com
1 Abraia https://abraia.me
2 ActBlue https://secure.actblue.com
3 Adilo https://adilo.bigcommand.com
4 Adways https://www.adways.com
5 afreecaTV https://www.afreecatv.com
6 Altium LLC https://altium.com
7 Altru https://www.altrulabs.com
8 amCharts Live Editor https://live.amcharts.com/
9 Amtraker https://amtraker.com
10 Animatron https://www.animatron.com/
11 Animoto https://animoto.com/
12 AnnieMusic https://anniemusic.app
13 Apester https://www.apester.com
14 ArcGIS StoryMaps https://storymaps.arcgis.com
15 Archivos https://app.archivos.digital
16 Audioboom https://audioboom.com
17 AudioClip https://audioclip.naver.com
18 Audiomack https://audiomack.com
19 Audiomeans https://audiomeans.fr
20 Avocode https://www.avocode.com/
21 Backtracks https://backtracks.fm
22 Beautiful.AI https://www.beautiful.ai/
23 Blackfire.io https://blackfire.io
24 Blogcast https://blogcast.host/
25 Bookingmood https://www.bookingmood.com
26 Box Office Buz https://boxofficebuz.com
27 BrioVR https://view.briovr.com/
28 Bumper https://www.bumper.com
29 Buttondown https://buttondown.email/
30 Byzart Project https://cmc.byzart.eu
31 Cacoo https://cacoo.com
32 Catapult https://www.catapult.app/
33 CatBoat https://img.catbo.at/
34 Ceros https://www.ceros.com/
35 Chainflix https://chainflix.net
36 ChartBlocks https://www.chartblocks.com/
37 chirbit.com https://www.chirbit.com/
38 CHROCO https://chroco.ooo/
39 CircuitLab https://www.circuitlab.com/
40 Clipland https://www.clipland.com/
41 Clyp https://clyp.it/
42 CoCo Corp https://ilovecoco.video
43 CodeHS https://www.codehs.com
44 CodePen https://codepen.io
45 Codepoints https://codepoints.net
46 CodeSandbox https://codesandbox.io
47 CollegeHumor https://www.collegehumor.com/
48 Commaful https://commaful.com
49 Coub https://coub.com/
50 Crowd Ranking https://crowdranking.com
51 Crumb.sh https://crumb.sh
52 Cueup DJ Booking https://cueup.io
53 Curated https://curated.co/
54 CustomerDB https://customerdb.com/
55 dadan https://www.dadan.io
56 Dailymotion https://www.dailymotion.com
57 DALEXNI https://dalexni.com/
58 Datawrapper https://www.datawrapper.de
59 Deseret News https://www.deseret.com
60 Deviantart.com https://www.deviantart.com
61 Didacte https://www.didacte.com/
62 Digiteka https://www.ultimedia.com/
63 DocDroid https://www.docdroid.net/
64 Dotsub https://dotsub.com/
65 Dream Broker https://dreambroker.com
66 DTube https://d.tube/
67 eduMedia https://www.edumedia-sciences.com/
68 EgliseInfo https://egliseinfo.catholique.fr/
69 Embedery https://embedery.com/
70 Embedly https://api.embed.ly/
71 Enystre Music https://music.enystre.com
72 Ethfiddle https://www.ethfiddle.com/
73 EventLive https://eventlive.pro
74 everviz https://everviz.com
75 Ex.Co https://ex.co
76 Eyrie https://eyrie.io/
77 Facebook https://www.facebook.com/
78 Fader https://app.getfader.com
79 Faithlife TV https://faithlifetv.com
80 Firework https://fireworktv.com/
81 FITE https://www.fite.tv/
82 Flat https://flat.io
83 Flickr https://www.flickr.com/
84 Flourish https://flourish.studio/
85 FOX SPORTS Australia https://www.foxsports.com.au
86 FrameBuzz https://framebuzz.com/
87 Framer https://www.framer.com
88 Geograph Britain and Ireland https://www.geograph.org.uk/
89 Geograph Channel Islands https://channel-islands.geograph.org/
90 Geograph Germany https://geo-en.hlipp.de/
91 Getty Images https://www.gettyimages.com/
92 Gfycat https://gfycat.com/
93 Gifnote https://www.gifnote.com/
94 GIPHY https://giphy.com
95 GloriaTV https://gloria.tv/
96 GMetri https://www.gmetri.com/
97 Gong https://www.gong.io/
98 Grain https://grain.com
99 GT Channel https://gtchannel.com
100 Gyazo https://gyazo.com
101 HASH https://hash.ai
102 hearthis.at https://hearthis.at/
103 hihaho https://www.hihaho.com
104 HippoVideo https://hippovideo.io
105 Homey https://homey.app
106 HuffDuffer https://huffduffer.com
107 Hulu https://www.hulu.com/
108 Idomoo https://idomoo.com/
109 iFixit https://www.iFixit.com
110 IFTTT https://www.ifttt.com/
111 iHeartRadio https://www.iheart.com
112 Incredible https://incredible.dev
113 Indaco https://player.indacolive.com/
114 Infogram https://infogram.com/
115 Infoveave https://infoveave.net/
116 Injurymap https://www.injurymap.com/
117 Inoreader https://www.inoreader.com
118 inphood https://inphood.com/
119 Instagram https://instagram.com
120 Insticator Inc https://www.insticator.com/
121 Issuu https://issuu.com/
122 Jovian https://jovian.ai/
123 KakaoTv https://tv.kakao.com/
124 Kickstarter https://www.kickstarter.com
125 Kidoju https://www.kidoju.com/
126 Kirim.Email https://kirim.email/
127 Kit https://kit.co/
128 Kitchenbowl https://www.kitchenbowl.com
129 kmdr https://kmdr.sh
130 Knacki https://jdr.knacki.info
131 Knowledge Pad https://knowledgepad.co/
132 Kooapp https://kooapp.com
133 LearningApps.org https://learningapps.org/
134 LeMans.Pod https://umotion-test.univ-lemans.fr/
135 Lille.Pod https://pod.univ-lille.fr/
136 Livestream https://livestream.com/
137 LottieFiles https://lottiefiles.com/
138 Ludus https://ludus.one
139 Lumiere https://latd.com
140 MathEmbed https://mathembed.com
141 Matterport https://matterport.com/
142 me.me https://me.me/
143 MediaLab https://www.medialab.co/
144 Medienarchiv der Künste - Zürcher Hochschule der Künste https://medienarchiv.zhdk.ch/
145 Mermaid Ink https://mermaid.ink
146 Microsoft Stream https://stream.microsoft.com
147 Minerva https://www.minervaknows.com
148 MixCloud https://mixcloud.com/
149 Moby Picture https://www.mobypicture.com
150 Music Box Maniacs https://musicboxmaniacs.com/
151 myBeweeg https://mybeweeg.com
152 Namchey https://namchey.com
153 nanoo.tv https://www.nanoo.tv/
154 Nasjonalbiblioteket https://www.nb.no/
155 Natural Atlas https://naturalatlas.com/
156 nfb.ca https://www.nfb.ca/
157 NFTNDX.IO https://www.nftndx.io/
158 NoPaste https://nopaste.ml
159 Observable https://observablehq.com
160 Odds.com.au https://www.odds.com.au
161 Odesli (formerly Songlink) https://odesli.co
162 Odysee https://odysee.com
163 Official FM https://official.fm
164 Omniscope https://omniscope.me/
165 Omny Studio https://omnystudio.com
166 Ora TV https://www.ora.tv/
167 Orbitvu https://orbitvu.co
168 Outplayed.tv https://outplayed.tv/
169 Overflow https://overflow.io
170 OZ https://www.oz.com/
171 Padlet https://padlet.com/
172 Panda Video https://pandavideo.com/
173 Pastery https://www.pastery.net
174 PingVP https://www.pingvp.com/
175 Pinpoll https://www.pinpoll.com/products/tools
176 Pinterest https://www.pinterest.com
177 PitchHub https://www.pitchhub.com/
178 Pixdor https://www.pixdor.com/
179 Podbean https://podbean.com
180 Poll Daddy https://polldaddy.com
181 Portfolium https://portfolium.com
182 Present https://present.do
183 Prezi Video https://prezi.com/
184 Quiz.biz https://www.quiz.biz/
185 Quizz.biz https://www.quizz.biz/
186 RadioPublic https://radiopublic.com
187 Raindrop https://raindrop.io
188 rcvis https://www.rcvis.com/
189 Reddit https://reddit.com/
190 ReleaseWire https://www.releasewire.com/
191 Replit https://replit.com/
192 ReverbNation https://www.reverbnation.com/
193 Roomshare https://roomshare.jp
194 RoosterTeeth https://roosterteeth.com
195 Rumble https://rumble.com/
196 Runkit https://runkit.com
197 Saooti https://octopus.saooti.com
198 Sapo Videos https://videos.sapo.pt
199 Screen9 https://www.screen9.com/
200 Screencast.com https://www.screencast.com/
201 Screenr https://www.screenr.com/
202 ScribbleMaps https://scribblemaps.com
203 Scribd https://www.scribd.com/
204 SendtoNews https://www.sendtonews.com/
205 ShortNote https://www.shortnote.jp/
206 Shoudio https://shoudio.com
207 Show by Animaker https://getshow.io/
208 Show the Way, actionable location info https://showtheway.io
209 Simplecast https://simplecast.com
210 Sizzle https://onsizzle.com/
211 Sketchfab https://sketchfab.com
212 SlideShare https://www.slideshare.net/
213 SmashNotes https://smashnotes.com
214 Smeme https://smeme.com
215 Smrthi https://www.smrthi.com
216 SmugMug https://www.smugmug.com/
217 SocialExplorer https://www.socialexplorer.com/
218 SoundCloud https://soundcloud.com/
219 SpeakerDeck https://speakerdeck.com
220 Spotify https://spotify.com/
221 Spreaker https://www.spreaker.com/
222 SproutVideo https://sproutvideo.com
223 Stanford Digital Repository https://purl.stanford.edu/
224 Streamable https://streamable.com/
225 Streamio https://www.streamio.com
226 Subscribi https://subscribi.io/
227 Sudomemo https://www.sudomemo.net/
228 Sutori https://www.sutori.com/
229 Sway https://www.sway.com
230 Sway Office https://sway.office.com
231 Synthesia https://www.synthesia.io/
232 TED https://www.ted.com
233 The New York Times https://www.nytimes.com
234 They Said So https://theysaidso.com/
235 TickCounter https://www.tickcounter.com
236 TikTok https://www.tiktok.com/
237 Toornament https://www.toornament.com/
238 Topy https://www.topy.se/
239 Totango https://totango.com
240 Trinity Audio https://trinityaudio.ai
241 Tumblr https://www.tumblr.com
242 Tuxx https://www.tuxx.be/
243 tvcf https://tvcf.co.kr
244 Twitter https://www.twitter.com/
245 TypeCast https://typecast.ai
246 Typlog https://typlog.com
247 UAPod https://uapod.univ-antilles.fr/
248 University of Cambridge Map https://map.cam.ac.uk
249 UnivParis1.Pod https://mediatheque.univ-paris1.fr/
250 Upec.Pod https://pod.u-pec.fr/
251 Ustream https://www.ustream.tv
252 uStudio, Inc. https://www.ustudio.com
253 VeeR VR https://veer.tv/
254 Verse https://verse.com/
255 VEVO https://www.vevo.com/
256 Videfit https://videfit.com/
257 VidMount https://vidmount.com/
258 Vidyard https://vidyard.com
259 Vimeo https://vimeo.com/
260 Viously https://www.viously.com
261 Vizydrop https://vizydrop.com
262 Vlipsy https://vlipsy.com/
263 VLIVE https://www.vlive.tv
264 Vouch https://www.vouchfor.com/
265 VoxSnap https://voxsnap.com/
266 Waltrack https://waltrack/net
267 Wave.video https://wave.video
268 wecandeo https://www.wecandeo.com/
269 Wiredrive https://www.wiredrive.com/
270 Wistia, Inc. https://wistia.com/
271 wizer.me https://www.wizer.me/
272 Wokwi https://wokwi.com
273 Wolfram Cloud https://www.wolframcloud.com
274 WordPress.com https://wordpress.com/
275 YouTube https://www.youtube.com/
276 Zeplin https://zeplin.io
277 ZingSoft https://app.zingsoft.com
278 ZnipeTV https://www.znipe.tv/
279 Zoomable https://zoomable.ca/