Like most people running a large cms on the web we always have an interesting time with video from youtube and vimeo.
Embedding code standards change over time, the different urls are always fun, http/https is not intuitive to most users, videos can get taken down quite frequently and that classic 20 embedded videos in one page we used to see on myspace is always fun for page load times.
Luckily some very clever people on the web have already solved most of these issues and there are some nice patterns on the web to make it all just work without us having to re-invent the wheel.
On sites like facebook there are often a large number of embedded videos on a single page.
The trick is to show the video thumbnail image, with a play button on top, and only load the actual video when the user clicks play. Its an illusion of embedded videos, but one that works well.
So how does this work in our moodle?
Youtube, Vimeo and both provide a handy oEmbed API. You can pass it pretty much any video url – shortcode, strange variables etc – and the service sorts out giving you back the most uptodate embed code, and lots of other nice stuff.
http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=E3418SeWZfQ&format=json
gives us
{"author_name": "JavaZone Norway","thumbnail_url": "http:\/\/i1.ytimg.com\/vi\/E3418SeWZfQ\/hqdefault.jpg","provider_url": "http:\/\/www.youtube.com\/","type": "video","provider_name": "YouTube","version": "1.0","author_url": "http:\/\/www.youtube.com\/user\/JavaZoneNo","thumbnail_width": 480,"thumbnail_height": 360,"html": "\u003ciframe width=\"480\" height=\"270\"src=\"http:\/\/www.youtube.com\/embed\/E3418SeWZfQ?feature=oembed\"frameborder=\"0\"allowfullscreen\u003e\u003c\/iframe\u003e","height": 270,"width": 480,"title": "JavaZone 2013: Javapocalypse"}and vimeo gives a similar output.
So now, given a video url, we can call the oEmbed and use a reusable media element to display the thumbnail and metadata.
This looks like the video is embedded, but its not – it is just the thumbnail image, which takes considerably less time to load and render.
The next trick is to use the html in the json with the the services recommended embed/iframe code. We add an onclick event listeners to the the thumbnail/play button, which uses that html from the oEmbed, adds autoplay, and voila – your watching the video.
Fun with form validation
As an offshoot of making our oEmbed service we also found we could use it for validation. When a user adds a video url if it doesn’t return an oEmbed response, we know its never going to embed with our service.
If it does return json we can show them a preview, which is always nice.
We are using the same code for the video display as the validation, which I find pretty neat.
One Comment