Simple video comments
Posted on: 28 August 2008
One of the things we're really eager to get going on Save A Million Shots is the idea of video conversation threads. The trouble is, commenting is a fundamentally different activity from posting.
If you're posting an article, you're putting in a reasonable amount of time and effort (probably!), which could include making a video file, saving it to your computer somewhere, and uploading it when you write your post
By contrast, commenting on an existing post is much more spontaneous and disposable, so the only way people are going to add video comments is if it is ridiculously simple.
Fortunately, I've discovered Riffly, which does exactly that. Riffly is designed as a Wordpress plugin, but fortunately there is already a Drupal module, making it really easy to integrate into a Drupal system. It's now just a few clicks to capture a video (or audio) comment using your webcam, and have it embedded straight in the comment.
There is a hitch though (isn't there always!). The Riffly module specifies a form field which will receive the embed code which relates to the audio or video clip. Unfortunately, I'm using the FCKEditor module too, which provides a really cool WYSIWYG HTML editor for comments. In it's Drupal incarnation, this doesn't exist in the page HTML - it's generated by client-side Javascript as an object. Luckily the maintainers of FCKEditor had the foresight to include an API so that you can access the editor object. To get the Riffly embed code into the FCKEditor window, I've had to take my own local copy of the Riffly javascript file, and hack around a bit with their rifflyAttachCode function:
function rifflyAttachCode (riffly_id, comment_type) {
var rifflyEmbedCode = '';
if (comment_type == 'audio') {
rifflyEmbedCode = "\n[riffly_audio]" + riffly_id + "[/riffly_audio]\n";
} else {
rifflyEmbedCode = "\n[riffly_video]" + riffly_id + "[/riffly_video]\n";
}
document.getElementById(riffly_target_id).value += rifflyEmbedCode;
if(typeof FCKeditorAPI != 'undefined') {
FCKeditorAPI.GetInstance(riffly_target_id).InsertHtml(rifflyEmbedCode);
}
document.getElementById(riffly_recorder_window_id).innerHTML = '';
document.getElementById(riffly_recorder_window_id).style.display = 'none';
}
It's not ideal, as I will miss out on any code changes that the Riffly team make to their Javascript, but apart from that it works seamlessly. Look out for it on the live site in the next few days!