Wednesday 20 October 2021

Cara Kompress Video yang di upload menggunakan PHP dan Javascript

Haiiii gaes , setelah sekian lama saya sudah tidak ngeblog 2 tahun , saya akhirnya kembali untuk melakukan blogging kembali.. saya ada pengalaman seperti berikut 

Pernahkah anda berpikir, misalnya anda upload file video tetapi file video tersebut memiliki ukuran yang besar jika diupload akan memakan storage pada server . bagaimana sih caranya setelah upload video lalu video tersebut di compress ukurannya agar bisa lebih kecil ? nah semoga tutorial saya ini bisa sedikit membantu berikut cara caranya : 
1. download file ffmpeg di link berikut Disini 

2. setelah didownload lalu extract file tersebut di local disk C: , di dalamnya ada folder bin dan juga doc , di dalam folder bin ada file ffmpeg.exe, ffplay.exe dan juga ffprobe.exe 

3. setelah semuanya selesai , mari kita lanjut ngoding :D 

4. saya anggap kalian semua sudah paham mengenai dasar CRUD , kita akan poles sedikit disini 

5. buat controller seperti berikut, oh ya saya pakai framework CI ya teman teman .. 

<?php
public function do_upload()
{
    // start upload video
    $namafilevideo = 'video'.date("YmdHis").'.mp4';
    $config3['upload_path']   = 'public/video/';
    $config3['file_name']     = $namafilevideo;
    $config3['allowed_types'] = "mp4|3gp";
    $config3['remove_spaces'] = true;
    $config3['overwrite']  = FALSE;

    $this->load->library('upload');
    $this->upload->initialize($config3);

    $this->upload->do_upload('file');
    $dataimg = $this->upload->data('file_name');        
    //end upload video

    $namavideo = $this->input->post('namavideo');
    $userlogin = $this->session->userdata('nama_pengguna');

    $datasimpan = [
        'namavideo' => $namavideo,
        'video' => "v".$namafilevideo,
        'thumbnail' => $namafilethumb,
        'datetimecreate' => date("Y-m-d H:i:s"),
        'is_active' => '0',
    ];

    $log = [
        'modul' => 'Settings',
        'nama_modul' => 'Videoplayer',
        'aktifitaslog' => 'Simpan videoplayer, nama video : '.$namavideo,
        'userlogin' => $userlogin,
        'datetimelog' => date("Y-m-d H:i:s")
    ];

    $simpan = $this->m_videoplayer->savevideo($datasimpan);
    $this->m_loghistory->simpanloghistory($log);

    if ($simpan == TRUE) {
        $output=null;
        exec("C:\\ffmpeg\\bin\\ffmpeg -i ".FCPATH."public/video/".$namafilevideo." -b 600k ".FCPATH."public/video/"."v".$namafilevideo,$output);
        echo "Berhasil simpan data";
        unlink(FCPATH."public/video/".$namafilevideo);
    } else {
        echo $this->upload->display_errors();
    }
}

6. View nya seperti berikut ini 

<form enctype="multipart/form-data" id="submit"> <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>"> <div class="form-group"> <label>Nama Video</label> <input type="text" autocomplete="off" name="namavideo" class="form-control" id="namavideo" placeholder="Nama Video"> </div> <div class="form-group"> <label>Video</label> <input type="file" id="dropifyfile" name="file"> </div> <button type="submit" id="sub" class="btn btn-primary"><i class="fa fa-save"></i> <span>Simpan</span> </button> </form> <div class="w-50 mx-auto" id="progress" style="display: none;"> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">Proses Uploading (0%)</div></div> <hr> </div> <script> $(function() { $('#submit').submit(function(e){ var progress = $('.progress-bar'); var progressCon = $('#progress'); e.preventDefault(); $.ajax({ url:'<?= site_url();?>admin/videoplayer/do_upload', //sesuaikan dengan milik kalian type:"post", data:new FormData(this), contentType:false, processData:false, beforeSend: () => { $(progressCon).slideDown(); }, xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = (evt.loaded / evt.total) * 100; $(progress).attr("aria-valuenow", percentComplete.toFixed(0)); $(progress).width(percentComplete.toFixed(0)+'%'); $(progress).text('Proses uploading ('+percentComplete.toFixed(2)+'%). Saat ini sedang proses compress video tunggu sampai selesai dan muncul notifikasi'); } },false); return xhr; }, success: function(data){ $(progress).text('Uploaded Berhasil (100%)'); $(progress).addClass('bg-success'); swal({ title: "Sukses", text: data, type: "success" }).then(function() { window.location = "<?=site_url('videoplayer')?>"; }) } }); }); var drEvent = $('#dropifyfile').dropify(); drEvent.on('dropify.beforeClear', function(event, element) { return confirm("Do you really want to delete \"" + element.file.name + "\" ?"); }); drEvent.on('dropify.afterClear', function(event, element) { alert('File deleted'); }); }) </script>

7. Siapkan folder video dan folder public , taruh folder video di dalam folder public , taruh folder public di root project

Share:

Motivasi

Jalani hari-hari dengan bismillah dan ikhlas

Contact

WA : 085 727 109 286

Service

Menerima jasa pembuatan aplikasi