Embedding Multimedia - How does it work??

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