I’ve spent a few days this week playing around with video on the web. It’s a fairly simple process to copy and paste the embed code from YouTube and have videos appear on this site, but I needed to embed a shortened clip of a longer piece. I’ve managed to do it (last night) but I had to do a fair bit of Googling to find a solution that worked for me.
get_iplayer
Firstly, the videos I needed to shorten were from the BBC.1. There’s a command line tool called get_iplayer that enables me to grab live or recorded video from the BBC site. It’s way too complex to fully describe here but the command I used to grab my video clip was:
get_iplayer http://news.bbc.co.uk/democracylive/hi/house_of_commons/default.stm --stop 1800 --get
That command retrieves the embedded live video on that particular BBC web page and saves the file as an *.avi. The --stop 1800 argument recorded 1800 seconds of video (60secs x 30mins = half an hour – I was having my tea!). Once I’d retrieved the video I had to find the start-time of my desired clip and then calculate its duration. I used ffmpeg to create a *.flv file from the original *.avi.
I found that the original downloaded file’s audio and video were out of sync, by approximately 1 second. More Googling and I found a way to encode the *.flv file and offset the audio/video. Here’s the command I used:
ffmpeg -i downloaded.avi -vcodec copy -itsoffset 1 -i downloaded.avi -map 1:0 -map 0:1 -ss 848 -t 399 result.flv
That took the video from the downloaded file, offset by 1 second from the audio in the same file, starting at 848 seconds and lasting 399 seconds. Cool.
Copy of a Copy
Much in the way a photo-copied document starts to degrade after multiple recopying, the same goes for video. Downloading a video, shortening it and then uploading the result to YouTube produced acceptable but not very clear looking videos. I had to reduce the number of copies so the answer was to locally host the file. Well, hosting the file on Amazon S3 and making use of their content delivery network (CDN).
Google led me to the marvellous site by Mark Pilgrim, Dive into HTML 5. The video section of the site goes into great detail about how best to display video in modern browsers and a link through to another awesome page, Video for Everybody. That site outlines how to display video in older or incapable browsers; yes Internet Explorer, pay attention. The information described in those two sites is invaluable, however since I primarily use WordPress for blogs and sites, I decided to use a plugin to display either *.flv or *.m4v files.
Not as pure as Video for Everybody but nevertheless, everyone should be able to see the video.
Flowplayer
Flowplayer is a tool that allows you to display video on your site in a YouTube style enclosure, complete with controls. There are a number of WordPress Plugins that utilise Flowplayer but some of them collide with jQuery. One that doesn’t is FV WordPress Flowplayer, so that’s what I’m using here on my site.
The plugin uses short codes to embed your video files, like this:
It seems to work pretty well. You can see an embedded video here: Embedded video using flowplayer. If I wasn’t using WordPress or something similar I’d definitely use the Video for Everyone technique for video embedding.
I’ve put this entry on my blog so that I don’t forget how to do it next time. It’s fairly straightforward to do so if you ended up here from a search engine, I hope you find it useful.
- I know, a bit naughty but I pay my licence fee and I’m using the video for non-commercial purposes, and I’m only a little guy, don’t beat me up Aunty [↩]
