This week’s budget gave a good opportunity to see how different news organisations handled live reporting on their websites so I did a quick scan through a few TV and newspaper websites and screen grabbed what I could see.
The reason I’m interested is that the 125 anniversary has provided an opportunity for a large number of events on campus for some of these like the Manifesto for Change event to have a remote audience engaging online via streaming video and live chat.
For both sites we’ve developed some new ways of displaying information as well as improving the designs. Bot the homepage designs use jQuery to create visual effects on the page. 125 has multiple “slides” of information. Each slide transitions to the next after a short period of time or when you click the link on the right.
New Sport also uses some jQuery transitions, this time to change the background image and headline when you hover over links to each section.
There’s a few more new additions to the sport site. We were provided with a DVD containing lots of aerial photos of the campus to feature in a gallery. We’ve done the usual thumbnail gallery but we’ve also got a fancier way of showing off photos.
Microsoft Photosynth is a tool from their Live Labs project. It works by taking a set of photos, working out how they fit together and creating a 3D model in which you can navigate around them. Our set of photos is 71% “synthy” – a measure of how we matched they are – pretty good I’d say! The one negative thing is that viewing the resulting photosynth requires Silverlight on the browser.
Another new development that’s being released for the first time on this site is a video browser. The observant may have noticed last week video pages on the Edge Hill site changed slightly, doubling the size of the video and moving around some elements on the page. This was to allow us to highlight related videos right along side.
One final little thing we’ve incorporated into this site is embedding the PDF of exhibition boards – normally a sizable download – into the page using Scribd. Using third party hosted services has risks associated with it but here it clearly benefits the user to be able to quickly scan through pages without the need to download a large file and open in Acrobat.
We’ve just upgraded to the latest version of WordPress MU – the system that powered blogs.edgehill.ac.uk. You can see that latest features in this video:
That video was embedded using one of the coolest new features in WordPress 2.9.1 – oEmbed. oEmbed is a way of websites sharing information about how content should be included in a page. Instead of having to copy any paste complicated HTML such as this:
We can instead just paste the URL onto a blank line in the post. oEmbed is supported right now by many popular websites such as Flickr and YouTube. We’ve also added oEmbed support to our own video streaming platform. Since we’re not one of the popular video sharing sites embedding our videos doesn’t work out of the box with WordPress but we’ve enabled it for our site. Here’s what it will look like:
http://www.edgehill.ac.uk/video/psychology
Implementing oEmbed was fairly easy so keep an eye out for it on other content we publish.
University LipDub has taken University campuses across Continental Europe, Brazil and Québec by storm over the last year! Karine Joly and Mike Richwalsky mentioned it on Twitter the other day which got me looking at some of the examples. One of the best – from l’Université du Québec à Montréal – has been featured on CNN and “LipDubs” [???] the Black Eyed Peas’ I Gotta Feeling:
I wonder if there are there any Media or Performing Arts students out there who fancy giving this a go..?
I’ve seen Tom Scott do presentations before at various BarCamps and they’re always pretty fun. He’s just published this video from Thinking Digital in May where he makes great use of graphs to get his points across. I’ve mentioned it before, but I love the last slide – it’s how I try to live my life.
FACT in Liverpool is more than just a cinema and today they’re launching a new website to showcase some of the work they produce, commission or display. fact.tv already has dozens of videos online so take a look at what’s on offer. Here’s a trailer to whet your appetite:
If you’ve seen the homepage of the Edge Hill website since the new design went live you’ll see something we’ve not done before – embedded video featured predominantly on the site. Of course we’ve had video on the site for ages – we’ve been linking to a Windows Media streaming server for a several years and more recently we’ve been converting video to Flash so it can be embedded in pages (on the Careers website for example). The user experience has been mixed – availability of broadband wasn’t universal, plugin support was often sketchy and the process of getting video from tape to web complex.
That’s all changing though. The BBC iPlayer has brought online video to the masses. No longer is video a novelty, it’s expected as part of the whole website package and our job is to meet those requirements. So we’ve invested in new systems to create and manage video throughout the process from capture to encoding and streaming. The media development team have acquired a Tricaster box, currently located in the control room in the Faculty of Health, which allows them to do live mixing and a whole load of other things. IT Services (or should that be Steve Daniels) have installed an eStream system to encode and store video.
The first time you might have seen these used in anger is for the Graduation ceremonies last month. There we (Media Development and Web Services) successfully mixed the ceremony and streamed live video across the campus and onto the internet. We peaked at around 70 simultaneous connections and many more in total over the three ceremonies.
The eStream box allowed us to broadcast live video in Windows Media and Flash Video formats to ensure maximum compatibility with different systems. Since then the archive video has been available for viewing, again in both WMV and FLV formats.
As part of the new website design we wanted to allow video to be more widely available throughout the site. Corporate Marketing have been generating video specifically for the website and we needed a way of embedding this. There are a couple of aspects of the eStream system that I wasn’t particularly happy with and these were addressed specifically for the website.
Firstly we maintain our own database of videos that are used on the corporate site. Here we can store extra, website-specific information, tag videos correctly, and abstract the complexities of the eStream system – we don’t care whether video is hosted on the eStream box or elsewhere.
Secondly we use a different Flash video player. The one provided by the estream box isn’t very flexible and frankly looks a bit ugly. We’re instead using the open source FLV-Player which gives us more flexibility in how it looks and what features to offer.
The video functionality for the website isn’t just on the backend – we’re adding features on the website too. Each video has its own page which is linked to across the site, and we encourage others to link to through social bookmarking systems. For an example check out one of the TV Advert pages. On this page you’ll also see that we provide code to allow you to embed the video in your own page. Here’s what the same video looks like embedded right here:
We’re particularly happy with how this looks, especially compared to some other video sites. Here’s the same video embedded from YouTube:
It’s worth noting however that YouTube have started providing higher quality versions of some videos to view within their own site, but (currently?) only low quality versions are available for embedding.
This is just the beginning of video on our websites. Over the coming months we’ll be creating much more content – everything from students talking about courses through to the next round of inaugural lectures – and making them available even more deeply within the site.
If you think all this video really does mean the death of the radio star, fear not – we’re looking at podcasts too.
