Using Relate+ Videos Offline

Recently I’ve been building a Relate+ demo site and one of things I did was upload a couple of videos. Relate+ has a nice feature where it takes your videos and uploads them to the Internet in a proper web format, so that your users can play them from there. Because your videos are uploaded to the Internet instead of your local servers, it means that the effort for streaming out the movies is taken away from your servers, leaving them free for serving the Relate+ web.

To make things even better, the videos are actually uploaded to a Content Delivery Network (CDN). For those who are unsure what a CDN does, it replicates your media to servers around the globe so that users get the content from a server that is closer geographically to them than your server might be. It means that movies load more quickly and play more smoothly for all your users, wherever they are.

When putting my demo together, the video upload all worked fine and I could play the videos nice and smoothly from the Internet using the default Content Delivery Network (CDN) provided by EPiServer. However, the downside to uploading your videos to the Internet and playing them from there is that when not connected to the Internet, your videos will no longer work. Not a big problem in a live production site, but when you are trying to do a local demo on your laptop you might not have Internet access.

So what to do? Well, Håkan Lindqvist from EPiServer Sweden suggested a great little hack to get videos working ‘offline’ for demo purposes. Note that this technique allows you to play videos that you’ve already uploaded, but it won’t allow you to add or remove videos because… well… because you’re not connected to the Internet. It’s a hack. It’s not magic :)

Firstly, load your videos into Relate+ the way you normally would. This will get your video uploaded, create the Image Gallery thumbnail, meta data etc. Everything will now be set up and ready for the next stage.

The next thing to do is get your video locally in Flash format (a .flv file). If you’re lucky, your original video will be in a suitable .flv format. If you’re unlucky, you’ll either have to convert your original source video or download it from the Internet as a .flv yourself. This second option isn’t so bad – there are lots of video stream rippers available that you could use to grab your video as a Flash file. Ironic that you have to re-grab the video that you uploaded yourself, but the upside is that it will be in the correct format.

Once you have your video files locally as Flash format (and I suggest you do all of them otherwise it would get rather complex) we are ready to put the hack into action. Firstly, open up SQL Server Management Studio and take a look at the tblEPiServerCommunityVideoGalleryVideo table in your EPiServer site database. The path to the uploaded movie can be found in the strEncodedFilePath field. When you upload files to the CDN they get put into whatever structure the CDN decides, and so it’s likely this will be a rather cryptic string. When Relate+ loads your movie it takes a host URL setting from the web.config (more on that in a minute) and puts that together with the encoded file path to form the URL for the video on the CDN.

What you need to do is recreate that rather cryptic path on your local machine. Go to the root of your website and create each of the folders in turn. You should end up with a path (or paths) that match the file paths from the database. Lastly, copy your .flv files into the folders. Note that you will probably need to rename them – check the file names in strEncodedFilePath as well as the paths.

At this point we have recreated all the CDN content folders and files locally on your machine. Now for the final stage. Open the web.config and find the cdnProvider element under the videoGallery element. Copy the whole cdnProvider element and paste a copy of it below the original. Comment out the original with HTML comment tags. By doing this, you will be able to swap over between the Internet and local based videos as you need just by switching the comment tags. On the copy of the element, you will see that one of the attributes of the cdnProvider tag is contentHostUrl. This will be set to whatever the default is when you installed Relate+, or possibly your own CDN setting if you have already customised it. All you need to do is change this to your Relate+ website root instead (e.g. http://myrelatesite.com). Save the web.config and we are done!

Now when you load the Video Gallery, it should look exactly the same but instead of streaming the video from the CDN server, it should stream it from your local machine. Make sure you disable your Internet connection for a moment to test it so you’re sure it’s working correctly. And that should be it – streaming in Relate+ without being connected to the Internet. Just remember that you can’t upload new videos otherwise you’ll have to explain why you’re getting an error :)