Selamat Datang

Upload File Video Dengan Codeigniter

Upload video dengan menggunakan codeigniter terkadang menyulitkan untuk sebagian orang, sebab mengupload video perlu settingan agak berbeda dengan file-file lain seperti .doc, .pdf, .txt. Misal kita perlu menambahkan support terhadap mime yang diperlukan untuk beberapa format video. Nah pada tulisan kali ini kita akan membahas bagaimana trik sederhana mengupload video dengan codeigniter.

Silahkan ikuti langkah-langkah berikut ini secara berurutan.

1. Pastikan anda sudah mendownload codeigniter dan menaruhnya di folder htdocs (../htdocs/ci-video).

2. Buat sebuah folder untuk menampung file yang sudah diupload, beri nama folder tersebut dengan video di root folder kerja anda. Misal: htdocs/ci-video/video

3. Kita perlu menambahkan mime untuk file dengan format .flv , .wmv, dan .mp4 agar file-file video tersebut bisa diupload dengan codeigniter. Oleh karena itu buka file mime.php yang ada di application/config/mimes.php.

Lalu tambahkan list berikut:

'wmv'	=>	array('video/wmv', 'video/x-ms-wmv', 'flv-application/octet-stream', 'application/octet-stream'),
'mp4'	=>	'video/mp4',
'flv'	=>	array('video/flv', 'video/x-flv', 'flv-application/octet-stream', 'application/octet-stream')

4. Karena biasanya format video itu ukuran file nya besar, maka kita perlu menambahkan besar maksimum ukuran file yang bisa di upload dengan php. Untuk itu kita perlu mengubah file php.ini , disini saya coba ubah pada bagian upload_max_filesize jadi 32MB

upload_max_filesize = 32M

(lokasi php.ini disetiap sistem operasi lokasinya berbeda-beda)

  • Lokasi di Xampp Windows: xampp/php/php.ini
  • Lokasi di MAMP Mac : Application/MAMP/Conf/php5.x.x/php.ini

5. Buat View dengan nama movie.php di (.. /Application/views/video/movie.php )

codeigniter-upload-file

VIEW: movie.php

<div class="container">
    <form class="cssform" name="property" id="property" method="POST" action="<?php echo base_url('movie/add_video')?>" enctype="multipart/form-data" >
        <h2><a href="http://www.tutorial-webdesign.com/upload-file-video-codeigniter">Tutorial-webdesign.com</a></h2>
        <small>Demo upload file using codeigniter | &rarr; <a href="http://www.tutorial-webdesign.com/upload-file-video-codeigniter">Back to tutorial</a></small>
        <hr>
        <table>
            <tr>
                <td>Select Video :</td>
                <td><input type="file" id="video" name="video" ></td>
            </tr>
            <tr>
                <td> <input type="submit" id="button" name="submit" value="Submit" /></td>
            </tr>
        </table>
    </form>
</div>

6 Buat View dengan nama show.php (../Application/views/video/show.php) untuk menampilkan video jika file sukses di upload, isinya seperti berikut ini.

script untuk head dan /head

	<link href="<?=base_url('twd-theme/videojs/video-js.css');?>" rel="stylesheet">
    <script src="<?=base_url('twd-theme/videojs/video.js');?>"></script>
    <link rel="stylesheet" href="<?=base_url('twd-theme/style.css');?>">

Terlihat pada script diatas kita menggunakan video-js.css dan video.js, dua file itu digunakan untuk memutar file video dihalaman website, baca artikel sebelumnya tentang Memutar Video Dengan HTML5  jika anda bingung

Script untuk body dan /body

    <div class="container">
        <h2><a href="http://www.tutorial-webdesign.com/upload-file-video-codeigniter">Tutorial-webdesign.com</a></h2>
        <small>Demo upload file using codeigniter | &rarr; <a href="http://www.tutorial-webdesign.com/upload-file-video-codeigniter">Back to tutorial</a></small>
        <hr>
    	<strong>File Name:</strong> <?php echo $video_detail['file_name'];?><br>
        <small>Click to play</small>
        <video id="video1" class="video-js vjs-default-skin" width="480" height="320" poster="http://www.tutorial-webdesign.com/wp-content/themes/nurumah/img/logo-bg.png"
            data-setup='{"controls" : true, "autoplay" : false, "preload" : "auto"}'>
            <source src="http://localhost/ci-mvc/video/<?=$video_detail['file_name'];?>" type="video/x-flv">
            <source src="http://localhost/ci-mvc/video/<?=$video_detail['file_name'];?>" type='video/mp4'>
        </video>

        <pre>
            <?php print_r($video_detail);?>
    	</pre>
        <hr>
        FILE NAME: <?php echo $video_detail['file_name'];?>
    </div>

Jika anda bingung bagaimana menampilkan video anda bisa baca artikel tutorial-webdesign.com sebelumnya yang berjudul “Memutar Video Di Website Dengan HTML5 – FLV | MP4 | WMV“.

7. Buat Controller dengan nama movie.php di (../Application/controllers/movie.php)

Controllers: movie.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Movie extends CI_Controller {

  public function __construct() {
    parent::__construct();
    $this->load->helper(array('url','html','form'));
  }

  public function index() {
    $this->load->view('movie');
  }

  public function show() {
    $this->load->view('show');
  }

  public function add_video(){
    if (isset($_FILES['video']['name']) && $_FILES['video']['name'] != '') {
        unset($config);
        $date = date("ymd");
        $configVideo['upload_path'] = './video';
        $configVideo['max_size'] = '60000';
        $configVideo['allowed_types'] = 'avi|flv|wmv|mp3|mp4';
        $configVideo['overwrite'] = FALSE;
        $configVideo['remove_spaces'] = TRUE;
        $video_name = $date.$_FILES['video']['name'];
        $configVideo['file_name'] = $video_name;

        $this->load->library('upload', $configVideo);
        $this->upload->initialize($configVideo);
        if(!$this->upload->do_upload('video')) {
            echo $this->upload->display_errors();
        }else{
            $videoDetails = $this->upload->data();
            $data['video_name']= $configVideo['file_name'];
            $data['video_detail'] = $videoDetails;
            $this->load->view('movie/show', $data);
        }

    }else{
        echo "Please select a file";
    }
  }

}

Jika file sukses di upload maka hasilnya seperti ini

Upload Sukses

Upload Sukses

Download Script

Sekian tutorial kali ini, semoga membantu pekerjaan anda.

Salam Web Design & Development Indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

25 thoughts on “Upload File Video Dengan Codeigniter

  1. abay says:

    untuk upload fiel video yg besar kan harus diubah configurasi file php.ini, nah kalau kita di sewa hosting pan gk dikasih akses untuk php.ini, nah itu pegimane brow solusinye?

    • Bikin aja file php.ini di folder di hosting nya (biasanya begitu kebijakan hosting), atau biar lebih jelas tanya ke hosting aja gimana caranya untuk merubah konfigurasi php.ini itu.

  2. sakuragi says:

    kok movie-ny g nampil,,,

  3. jamal cyber says:

    mas saya mw tanya nih kyanya Yii framework ko g da y ditutorial web design.bikin donk mas tentang pembuatan website dan web basednya di tutorial web design.makasih salam kenal y mas jamal cyber

  4. jamal cyber says:

    yah mud2han ja da yang mau share Yii.soalnya pke ntu keren bagt mas.trimakasih y infonya..keren tutorial2 nya di di tutorial-webdesignr

  5. ahmad says:

    mas saya sudah ubah dan saya besarkan max size dalam file php.ini dan saya juga upload dengan ukuran yang sangat kecil.
    tp error nya masih file melebihi kapasitas? mohon pencerahnya mas buat newbie.. makasih

  6. fadli says:

    movie nya ko gga nampil ya, tp uda ada waktu menit video’a,,
    udah ngikutin jg tutor menampilkan video dengan html 5??

  7. MintaBantuan says:

    permisi,mau tanya dong di bagian show.php $video_detail kok ga ke detect variable ya?

  8. Hery says:

    mas mo nanya nih kalo misal kita upload path-nya tu diluar folder aplikasi yang kita bangun atau pake URL = http://192.168.7.252/web/
    nah saya mau masukin tu ke url tersebut tu gmn ya mas???dah nyoba berkali kali ga jadi mas….semoga ada solusi…
    trimakasih. :)

    • Biasanya file harus ditaro di satu server, folder nya boleh beda2 yang penting satu server. Kalau sudah beda server tidak bisa

    • upload bisa dilakukan jika script dan lokasi penyimpanan berada dalam satu server, jadi pastikan itu dalam satu folder.

      Untuk penembapatan diluar folder bisa menggunkana ../../folder atau /folder/location/xx/xx/...

  9. Nurul Zuni says:

    gan, mau nanya, gimana kalau mau ngupload video youtube. jadi video itu gak nyimpen ke web kita?
    dimohon bantuannya ya gan. thx

  10. Freddy says:

    bang kalau buat crud yang ada fotonya donk ? please ini lagi on fire belajar

  11. Freddy says:

    bag please ini buat tutorial upload gambar, input dan edit dan delete, butuh banget buat belajar, kebanyakan di google cuma user guide agak sulit buat new bie kalau gak ada database ?

    big thanks

  12. Reky says:

    maaf para mastah saya newbie mau blajar CI, mau tanya kalo scripth ini dan blabla kebawah itu simpennya dimana?dan nama formatnya apa?

  13. suzhouke.net says:

    This site was… how do I say it? Relevant!! Finally I’ve found something that helped me.
    Thanks a lot!

  14. Tuluss says:

    maaf Om, klo nyimpen gambar , durasi ,sama resolusi di database nya ada ga ya , pake ffmpeg instalnya ga ngerti saya klo ga ada toturial videonya| terimakasih (y)

  15. Tararangkyu says:

    Berhasil , Thanks ea

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development