Video Sharing Website Part 2 : Converting the uploaded video to FLV

Posted on | June 30, 2009 | 2 Comments

This series of blog post will talk about how to setup a Video Sharing Website.

Converting the uploaded video to FLV

This is a ‘on the fly’ conversion example, using Cakephp Framework.  I am using the ffmpeg library for the transcoding in my example. The ffmpeg converter supports FLV, MP4 and many more.

ffmpeg supported formats: http://ffmpeg.org/general.html#SEC8

For the most basic video sharing, the user will upload a video, enter a title and a description. The VideoConvertorComponent will take the uploaded video, extract a thumbnail and convert it to FLV. Other users can view the FLV in the flash player.

VideoConvertorComponent:: flv_import() is called in the controller. FLV and thumbnail image is created.

<?php
class VideoConvertorComponent extends Component
{
var $params = array();
var $img_path = '';
var $flv_path = '';

function initialize(&$controller, $settings)
{
$this->params = $controller->params;
if(!empty($settings['img_path'])) {
$this->img_path = $settings['img_path'];
}
else {
$this->img_path = IMAGES.'video_tn';
}
if(!empty($settings['flv_path'])) {
$this->flv_path = $settings['flv_path'];
}
else {
$this->flv_path = WWW_ROOT.'files\video_flv';
}
}
/**
*	convert video to flv
*/
function converttoflv( $in, $out )
{
//unlink( $out );
$cmd = 'D:\www\video_componenet\app\controllers\components\ffmpeg -v 0 -i'." $in -ar 11025 $out 2>&1";
$fh = popen( $cmd, "r" );
while( fgets( $fh ) ) { }
pclose( $fh );
}
/**
*	extract a thumbnail from video
*/
function getthumbnail( $in, $out )
{
//unlink( $out );
$cmd = 'D:\www\video_componenet\app\controllers\components\ffmpeg -i'." $in -pix_fmt rgb24 -vframes 1 -s 300x200 $out 2>&1";

$fh = popen( $cmd, "r" );
while( fgets( $fh ) ) { }
pclose( $fh );
}

function flv_import($upfile, $fname, $img_name = '', $video_name = '')
{
$fname = preg_replace( '/\..*$/', '', basename( $fname ) );
$flvpath = $this->flv_path.DS."$fname.flv";
$thumbpath = $this->img_path.DS."$fname.gif";

$this->converttoflv( $upfile, $flvpath);
$this->getthumbnail( $upfile, $thumbpath);

return array('thumbnail' => $thumbpath, 'flv' => $flvpath);
}

}
?>

Note that you need to edit the path to the ffmpeg executable.
In VideoConvertorComponent ::getthumbnail()

$cmd = 'D:\www\video_componenet\app\controllers\components\ffmpeg -i'." $in -pix_fmt rgb24 -vframes 1 -s 300x200 $out 2>&1";

In VideoConvertorComponent :: flv_import()

$cmd = 'D:\www\video_componenet\app\controllers\components\ffmpeg -v 0 -i'." $in -ar 11025 $out 2>&1";

On *nix platforms, you can do without the full path.

Streaming the Video

The streaming of video is done with a Flash Player. I am using JW FLV Player here. I created a VideoHtml to render all the HTML needed for displaying of video related thumbnails and Flash Player. $videoHtml->video() prints out the SWF embedding codes. $videoHtml->image() prints out the image.

<?php echo $videoHtml->image('video_tn/'.$video['Video']['thumbnail']); ?>
<?php echo $videoHtml->video($video['Video']['video_file']); ?>

<?php
//display html for displaying videos created by video component
class VideoHtmlHelper extends AppHelper {
var $helpers = array('Html');
var $height = 335;
var $width = 400;
/**
* Displays Thumbnail Image
*/
function image($image, $attributes = null) {
if(!isset($attributes['class'])) {
$attributes['class'] = 'ffvideo';
}
else {
$attributes['class'] = $attributes['class'].' ffvideo';
}
return $this->Html->image($image, $attributes);
}

/**
* Displays Video
*/
function video($flv, $attributes = null) {
if(!isset($attributes['height']))
$height = $this->height;
if(!isset($attributes['width']))
$width = $this->width;
if(!isset($attributes['moviebase']))
$moviebase = $this->Html->url('/files/video_flv/'.$flv, true);

return $this->Html->output('<div id="webstunning_video_player" >
<!-- Press Ctrl+Shift+A to edit the player -->
<script src="'.$this->Html->url('/js/swfobject_modified.js').'" type="text/javascript"></script>
<!-- saved from url=(0014)about:internet -->
<object id="WSplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="272">
<param name="movie" value="'.$this->Html->url('/files/player.swf').'" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="allowScriptAccess" value="always" />
<param name="swliveconnect" value="true" />
<param name="allowFullScreen" value="true" />
<param name="swfversion" value="8.0.0.0" />
<param name="FlashVars" value="_thumbnailTitles=[\'Test\']&_videoType=\'File (URL)\'&_videoList=[\''.$moviebase.'\']&_videoAdsList=[\'\']&_videoAdsLinkList=[\'\']&_previewImageList=[\'\']&_thumbnailPlayList=[\'\']&_save_as=\'Flash parameters\'&PlayListXML_path=\'\'&_showMainBar=true&_skin=\'Default\'&_mainbarAutoHide=true&_mainbar_Alpha=100&_mainbar_Top=#333333&_mainbar_Bottom=#000000&_loadSkin=false&_thumbnailCarousel=false&_fixedWidth=480&_fixedHeight=272&_videoProportions=true&_autoSize=true&_autoPlay=true&_loop=true&_bufferTime=2&_buttonToolTips=false&_buttonsColor=#FFFFFF&_volumeAudio=60&_seekBar_color=#0000FF&_showEmailButton=true&_showEmbedButton=true&_showFullscreenButton=true&_showPlayListButton=true&_showTimerButton=true&_showVideoPropButton=true&_showVolumeButton=true&_fontFamily=\'Default Embedded Font\'&_fontSize=8&_emailSubjectTitle=\'Interesting\'&_emailBodyText=\'Take a look\'&_buttonToolTipsList=[\'stop\',\'play\',\'pause\',\'played time / all time\',\'sound volume\',\'playlist\',\'html code and link\',\'send to friend\',\'video properties\',\'fullscreen mode\']&_addexterpl=false&_plbgcolor=#000000&_plwidth=480&_plheight=272&_ownerLogoIMGPath=\'demo_files/owner_logo.png\'&_ownerLogoAlpha=80&_ownerLogoLink=\'www.webstunning.com\'&_rightClickMenuCopyright=\'WebStunning FLV Player\'&_rightClickMenuCopyrightLink=\'http://webstunning.com\'&_rightClickMenuCopyrightTarget=\'_blank\'&_objectID=\'WSplayer\'" />
<!-- This param tag prompts users with Flash Player 7.0 and older to download the latest version of Flash Player. -->
<param name="expressinstall" value="includes/expressInstall.swf" />
<noscript>
The <a href="http://webstunning.com/flv-player/tutorial/">flv player tutorial</a> by webstunning.com. All Rights Reserved
</noscript>
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object id="innerWSplayer" type="application/x-shockwave-flash" data="'.$this->Html->url('/files/player.swf').'" width="480" height="272">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="allowScriptAccess" value="always" />
<param name="swliveconnect" value="true" />
<param name="allowFullScreen" value="true" />
<param name="swfversion" value="8.0.0.0" />
<param name="FlashVars" value="_thumbnailTitles=[\'Test\']&_videoType=\'File (URL)\'&_videoList=[\''.$moviebase.'\']&_videoAdsList=[\'\']&_videoAdsLinkList=[\'\']&_previewImageList=[\'\']&_thumbnailPlayList=[\'\']&_save_as=\'Flash parameters\'&PlayListXML_path=\'\'&_showMainBar=true&_skin=\'Default\'&_mainbarAutoHide=true&_mainbar_Alpha=100&_mainbar_Top=#333333&_mainbar_Bottom=#000000&_loadSkin=false&_thumbnailCarousel=false&_fixedWidth=480&_fixedHeight=272&_videoProportions=true&_autoSize=true&_autoPlay=true&_loop=true&_bufferTime=2&_buttonToolTips=false&_buttonsColor=#FFFFFF&_volumeAudio=60&_seekBar_color=#0000FF&_showEmailButton=true&_showEmbedButton=true&_showFullscreenButton=true&_showPlayListButton=true&_showTimerButton=true&_showVideoPropButton=true&_showVolumeButton=true&_fontFamily=\'Default Embedded Font\'&_fontSize=8&_emailSubjectTitle=\'Interesting\'&_emailBodyText=\'Take a look\'&_buttonToolTipsList=[\'stop\',\'play\',\'pause\',\'played time / all time\',\'sound volume\',\'playlist\',\'html code and link\',\'send to friend\',\'video properties\',\'fullscreen mode\']&_addexterpl=false&_plbgcolor=#000000&_plwidth=480&_plheight=272&_ownerLogoIMGPath=\'demo_files/owner_logo.png\'&_ownerLogoAlpha=80&_ownerLogoLink=\'www.webstunning.com\'&_rightClickMenuCopyright=\'WebStunning FLV Player\'&_rightClickMenuCopyrightLink=\'http://webstunning.com\'&_rightClickMenuCopyrightTarget=\'_blank\'&_objectID=\'WSplayer\'" />
<param name="expressinstall" value="includes/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 7.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img border="0" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Download flash player"/></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">swfobject.registerObject("WSplayer")</script>
</div>');
}
}

?>

Conclusion

This is an example of how to convert videos to FLV for video streaming. Download the codes from here to play around with the codes. Next post would be on uploading mulitple video files with AJAX.

No TweetBacks yet. (bookmark

Comments