Making vid.ly conversion and embedding easy
Thursday, December 1st, 2011I am lucky enough to have a vid.ly pro account to convert videos. Lucky because lately the free service started limiting the amount of times you can watch a video in a month (as they were hammered by a lot of traffic from Asia abusing the service). In case you still haven’t heard about vid.ly – it is a service that converts a video into a few dozen formats for HTML5 embedding and gives you a single URL to redirect devices to the correct format of the video.
Now, to make it easier for my colleagues to convert and embed videos in HTML5, I built a simple interface for converting and embedding a video on our blogs. For this I am using the API, but I wanted to avoid having to give my key out for colleagues to use.
The interface to convert videos is pretty easy:
<header><h1>Vid.ly conversion and embed</h1></header> <section> <?php echo $message; ?> <p>Simply add the URL of the video to convert below and you get the embed code. An email will inform you about the successful conversion. Conversion could take up to an hour.</p> <form method="post"> <div><label for="email">Email:</label><input type="text" id="email" name="email"></div> <div><label for="url">URL:</label><input type="text" id="url" name="url"></div> <div><input type="submit" name="send" value="make it so"></div> </form> </section> |
One of the cool features of the API is that it allows you to define an email that is not the one connected with the key to be the one that gets notified both of the conversion start, errors and success email. That made my job a lot easier. All I needed to do was assemble the correct XML and send it to the API. As the result is XML, too, I needed to check what came back and give feedback in the form:
<?php $key = '{add your key here}'; $message = ''; if(isset($_POST['send'])){ if($_POST['email'] !== '' && $_POST['url'] !== '') { $query = '<?xml version="1.0"?>'. '<query><action>AddMedia</action><userid>481</userid>'. '<userkey>'.$key.'</userkey>'. '<notify>'.$_POST['email'].'</notify>'. '<Source><SourceFile>'.$_POST['url'].'</SourceFile>'. '<CDN>AWS</CDN></Source></query>'; $url = 'http://m.vid.ly/api/'; $ch = curl_init(); curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch,CURLOPT_POST,1); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch,CURLOPT_POSTFIELDS,'xml='.urlencode($query)); $result = curl_exec($ch); curl_close($ch); $xml = simplexml_load_string($result); if($xml->Success) { $vid = $xml->Success->MediaShortLink->ShortLink; $video = '<video controls width="100%" controls preload="none"'. ' poster="http://cf.cdn.vid.ly/'.$vid.'/poster.jpg">'. '<source src="http://cf.cdn.vid.ly/'.$vid.'/mp4.mp4" '. 'type="video/mp4">'. '<source src="http://cf.cdn.vid.ly/'.$vid.'/webm.webm" '. 'type="video/webm">'. '<source src="http://cf.cdn.vid.ly/'.$vid.'/ogv.ogv" '. 'type="video/ogg">'. '<a target="_blank" href="http://vid.ly/'.$vid.'">'. '<img src="http://cf.cdn.vid.ly/'.$vid.'/poster.jpg" '. 'width="500"></a>'. '</video>'; $message = '<div class="success"><h1>Conversion started</h1>'. '<p>The video conversion is under way. '. 'You should get an email telling you so and an email when '. 'the video URL is ready. The code to copy & paste into '. 'the blog is:</p>'. '<textarea>'.htmlspecialchars($video).' </textarea>'; } else { $message = '<div class="error"><h1>Error</h1>'. '<p>Something went wrong in the conversion,'. 'please try again.</p></div>'; } } else { $message = '<div class="error"><h1>Error</h1>'. '<p>Please provide a video URL and email</p></div>'; } } ?> |
Pretty simple, isn’t it. Now my colleagues can add their email, give the form a URL where the video to convert is on the web and will get a copy and paste HTML for the video, for example:
<video controls preload="none" style="width:100%;height:300px;" poster="http://cf.cdn.vid.ly/1l5i5m/poster.jpg"> <source src="http://cf.cdn.vid.ly/1l5i5m/mp4.mp4" type="video/mp4"> <source src="http://cf.cdn.vid.ly/1l5i5m/webm.webm" type="video/webm"> <source src="http://cf.cdn.vid.ly/1l5i5m/ogv.ogv" type="video/ogg"> <a target='_blank' href='http://vid.ly/1l5i5m'> <img src='http://cf.cdn.vid.ly/1l5i5m/poster.jpg' width="500"></a> </video> |
Which results in:
Giving HTML5 video to the browsers who support it and a link to vid.ly for those who don’t :) The code is on GitHub as a Gist:
