Nanaz's Blog

Suatu saat saya pernah diminta untuk mengerjakan sebuah project web dimana didalam web tersebut terdapat sebuah halaman berisi tampilan Video seperti pada youtube. Videonya harus dapat di upload sendiri. Nanti setelah di upload video tersebut harus diconvert menjadi format .flv untuk dapat ditampilkan di browser.

Sebenarnya sudah ada extension yang disediakan oleh Silverstripe untuk mengelola video yang bernama Youtube Gallery. Tapi extension ini hanya menyediakan fitur untuk mengambil video dari youtube. Sedangkan client saya waktu itu ingin mengelola videonya sendiri tanpa menggunakan youtube atau web video sharing lainnya. Untuk itu saya mencoba membuat sebuah objek FlashVideo sendiri untuk mengakomodir keinginan dari user saya.

Kebutuhan

1. FFMPEG

FFMPEG merupakan aplikasi opensource yang dapat digunakan untuk melakukan record, convert dan stream audio dan video. Aplikasi FFMPEG ini dibutuhkan untuk digunakan meng-convert video hasil dari upload user. Aplikasi ini dapat di download secara gratis dari http://ffmpeg.org/. Jika anda menggunakan server hosting, minta admin anda untuk menginstall aplikasi ini.

Setelah mendownload dan menginstall di komputer yang digunakan oleh silverstripe. Anda harus mengetahui path file binary dari ffmpeg. Kalau di komputer saya file ffmpegnya terletak di /usr/local/bin/ffmpeg. Kita harus memastikan ffmpeg dapat berjalan dengan menjalankan perintah /usr/local/bin/ffmpeg pada console (jika di microsoft windows di command prompt). Nanti biasanya outputnya berupa :

bash-3.2# /usr/local/bin/ffmpeg
FFmpeg version SVN-r17910, Copyright (c) 2000-2009 Fabrice Bellard, et al.
  configuration: --enable-libmp3lame --enable-shared --disable-mmx
  libavutil     50. 0. 0 / 50. 0. 0
  libavcodec    52.21. 0 / 52.21. 0
  libavformat   52.31. 1 / 52.31. 1
  libavdevice   52. 1. 0 / 52. 1. 0
  libswscale     0. 7. 1 /  0. 7. 1
  built on Mar 10 2009 22:33:58, gcc: 4.0.1 (Apple Inc. build 5465)
At least one output file must be specified


Jika tidak ada pesan error berarti ffmpeg sudah terinstall dengan benar.
 

2. FLV Player

Kita membutuhkan sebuah flv player untuk memutar video pada web. Secara umum, anda bisa menggunakan flv player apa saja. Cara mendapatkannya cukup mudah anda tinggal cari pada search engine google dengan kata kunci “flv player” atau “flash video player”. Saya sendiri waktu itu menggunakan JW Player yang dapat didownload gratis pada http://www.longtailvideo.com/players/jw-flv-player/.  Flv player akan berbentuk file .swf karena bentuknya berupa file flash.

Objek Flash Video

Jika sudah menginstall ffmpeg dan mendownload flv player maka kita siap untuk memulai membuat objek FlashVideo pada Silverstripe.

Pertama-tama, buatlah sebuah direktori bernama FlashVideo di direktori utama dari silvertripe. Di dalam direktori FlashVideo tersebut, buatlah dua buah direktori bernama code dan swf sehingga direktorinya akan berbentuk seperti pada gambar dibawah ini.

Tujuan dibuatnya direktori ini sebenarnya adalah untuk memisahkan Objek FlashVideo beserta komponennya dari direktori utama web kita (direktori mysite). Namun sebenarnya bisa saja kita membuat Objek FlashVideo tersebut di dalam direktori mysite, karena strukturnya sebenarnya sama saja.

Setelah pembuatan direktori FlashVideo, copykan file .swf dari flv player yang sudah anda download ke dalam direktori swf. File video flash player yang saya gunakan bernama player.swf, nama file ini nantinya akan digunakan dalam pembuatan objek FlashVideo selanjutnya.

Buat sebuah file bernama _config.php pada direktori FlashVideo/code/ dengan isi sebagai berikut:

FlashVideo/code/_config.php

<?php
    define('FFMPEG_BIN',"/usr/local/bin/ffmpeg");
    $dir = "video";

    /*
        Don't change these code bellow if you dont know what you're doing!!
    */
    define('VIDEO_PATH', ASSETS_PATH."/".$dir);
    define("VIDEO_DIR", ASSETS_DIR."/".$dir);

    if (!file_exists(VIDEO_PATH)){
        @mkdir(VIDEO_PATH);
        @mkdir(VIDEO_PATH."/_resampled");
        @mkdir(VIDEO_PATH."/_thumbnail");
    }
?>

File _config.php merupakan file konfigurasi direktori dari FlashVideo yang nantinya akan kita gunakan. MVC Silverstripe akan membaca file _config.php terlebih dahulu sebelum memproses file lainnya yang ada di dalam direktori FlashVideo. Pada file ini terdapat pendefinisian konstanta bernama FFMPEG_BIN digunakan untuk memberitahukan lokasi dari file binary aplikasi FFMPEG. Lalu ada pendefinisian $dir=”video”, dimana $dir adalah nama direktori untuk menyimpan hasil pemrosesan file. Direktori ini ($dir) nantinya akan terletak di dalam direktori assets. Tujuannya agar file flv kita dapat dikelola dengan mudah lewat bagian Files & Images pada halaman admin silverstripe.

Sesudah membuat file _config.php, selanjutnya adalah membuat file FlashVideo.php yang diletakkan pada direktori FlashVideo/code/. Isi dari FlashVideo.php adalah sebagai berikut:

FlashVideo/code/FlashVideo.php

<?php
/*
    Flash Video Model File for uploading Video Files and convert it to flv extension
    By Firnas Nadirman   
*/
class FlashVideo extends File {

    public static $thumbnail_width = 114;

    public static $thumbnail_height = 87;

    public static $cms_thumbnail_width = 100;

    public static $cms_thumbnail_height = 60;
   
    public $allowedExtensions = array("mov","mp4","avi","flv","mpeg","mpg");   
   
    public $flvplayer = "FlashVideo/swf/player.swf";
       
    function getOriginalFileURL() {
        return Director::baseURL().$this->FileName;
    }
   
    function getURL() {
        if (!file_exists($this->getFlvFilePath())){
            $this->generateFlv();
        }
       
        return Director::baseURL().$this->getFlvFileName();
    }
   
    function URL() {
        return $this->getURL();
    }
   
    function forTemplate(){
        if(!file_exists($this->getCMSThumbFilePath())) {
            $this->getThumbnail($this->stat("cms_thumbnail_width"), $this->stat("cms_thumbnail_height"), $this->getCMSThumbFilePath());
        }
        return "<embed width=\"400\" height=\"300\" flashvars=\"file=".$this->getURL()."&amp;image=".$this->getCMSThumbFileName()."\" allowscriptaccess=\"always\" allowfullscreen=\"true\" quality=\"high\" bgcolor=\"#FFFFFF\" name=\"player\" id=\"player\" style=\"\" src=\"$this->flvplayer\" type=\"application/x-shockwave-flash\">";
    }
   
   
    function getThumbFileName(){
        return VIDEO_DIR."/_thumbnail/thumb_".strtolower($this->Name).".png";
    }
   
    function getThumbFilePath(){
        return VIDEO_PATH."/_thumbnail/thumb_".strtolower($this->Name).".png";
    }

    function getCMSThumbFileName(){
        return VIDEO_DIR."/_thumbnail/CMSthumb_".strtolower($this->Name).".png";
    }
   
    function getCMSThumbFilePath(){
        return VIDEO_PATH."/_thumbnail/CMSthumb_".strtolower($this->Name).".png";
    }
   
    public function CMSThumbnail() {
        return $this->generateCMSThumbnail();
    }

    public function getImage() {
        return $this->generateThumbnail();
    }


    function generateThumbnail(){
        if(!file_exists($this->getThumbFilePath())) {
            $this->getThumbnail($this->stat("thumbnail_width"), $this->stat("thumbnail_height"), $this->getThumbFilePath());
        }
        return "<img src=\"".$this->getThumbFileName()."\" title=\"".$this->Title."\">";
    }


    function generateCMSThumbnail() {
        if(!file_exists($this->getCMSThumbFilePath())) {
            $this->getThumbnail($this->stat("cms_thumbnail_width"), $this->stat("cms_thumbnail_height"), $this->getCMSThumbFilePath());
        }
       
        return "<div style=\"text-align:center;width: 100px;\"><a target=\"_blank\" href=\"$this->URL\" title=\"Download: $this->URL\"><img src=\"".$this->getCMSThumbFileName()."\" alt=\"".$this->getCMSThumbFileName()."\" /></a><br /><br /><a style=\"color: #0074C6;\"target=\"_blank\" href=\"$this->URL\" title=\"Download: $this->URL\">Download</a></div>";
    }
   
    function getThumbnail($width, $height, $filedest){
        $videoFile = BASE_PATH."/".$this->Filename;
        if(file_exists($videoFile)){
            $thumb = FFMPEG_BIN." -i ".$videoFile." -r 1 -s ".$width."x".$height." -f image2pipe -vframes 1 -ss 00:00:01 ".$filedest;
            $cmd = `$thumb`;
        }
    }
   
    function getFlvFileName(){
        return VIDEO_DIR."/_resampled/"."flv_".strtolower($this->Name).".flv";
    }
   
    function getFlvFilePath(){
        return VIDEO_PATH."/_resampled/flv_".strtolower($this->Name).".flv";
    }
       
    function generateFlv(){
        $videoFile = BASE_PATH."/".$this->Filename;
        $vid =    FFMPEG_BIN." -i ".$videoFile." -r 16 -ar 11025 -ab 32k -s cga -qscale 10 -y ".$this->getFlvFilePath();
        $cmd =`$vid`;
    }
       
}
?>


FlashVideo.php berisi objek dari file FlashVideo. Objek ini merupakan turunan dari objek File, sehingga objek ini memiliki seluruh atribut dan method yang dimiliki oleh objek File. Pada objek flash video ini terdapat beberapa variabel yang digunakan untuk konfigurasi pada file FlashVideo, yaitu:

• $thumbnail_width, variabel ini digunakan untuk menentukan lebar gambar thumbnail dari video yang di upload.
• $thumbnail_height, variabel ini digunakan untuk menentukan tinggi gambar thumbnail dari video yang di upload.
• $cms_thumbnail_width, variabel ini digunakan untuk menentukan lebar gambar thumbnail pada halaman admin dari video yang di upload.
• $cms_thumbnail_width, variabel ini digunakan untuk menentukan tinggi gambar thumbnail pada halaman admin dari video yang di upload.
• $allowedExtensions, variabel ini berisi array extension file dari file yang akan di upload. Anda bisa menambahkan extension file lainnya pada variabel ini.
• $flvplayer, variabel ini berisi relative path dari file flv player yang dilihat dari direktori silverstripe kita.

Jika sudah membuat kedua file ini, maka kita tinggal menjalankan perintah db/build/?flush=1 pada url silvertripe untuk menambahkan objek FlashVideo kedalam struktur database silverstripe. Selanjutnya objek ini bisa kita gunakan pada halaman kita.

Menggunakan Objek FlashVideo

Untuk menggunakan objek FlashVideo pada halaman silverstripe, kita bisa menambahkan sebuah fields bertipe FlashVideo seperti menambahkan fields bertipe Image. Jika pada contoh sebelumnya pada ArticlePage.php, kita bisa menambahkan kode sebagai berikut :

    public static $has_one = array(
    'Picture' => 'Image',
    'Video' => 'FlashVideo'
    );   

Untuk halaman CMS-nya kita bisa menggunakan FileIFrameField untuk mengupload file video pada method getCMSFields().

    function getCMSFields() {
       $fields = parent::getCMSFields();
   
       $fields->addFieldToTab('Root.Content.Main', new CalendarDateField('Date'), 'Content');
       $fields->addFieldToTab("Root.Content.Main", new ImageField('Picture'));
       $fields->addFieldToTab("Root.Content.Main", new FileIFrameField('Video'));
           
       return $fields;
    }

Untuk templatenya kita tinggal panggil variabel yang bertipe FlashVideo ($Video) dan diletakkan pada ArticlePage.ss sesuai dengan keinginan kita.

        <h2>$Title</h2>
   
        $Picture
        $Video
        $Content
        $Form
        $PageComments

Jangan lupa melakukan perintah db/build/?flush=1. Setelah itu pada halaman ArticlePage akan muncul flvplayer yang akan berisi video yang sudah di upload.

Anda dapat mendownload file source code dari objek FlashPage diatas dengan lengkap disini.