This tutorial will show you how to upload and play video using Codeigniter. CodeIgniter’s File Uploading Class permits files to be uploaded. You can set various preferences, restricting the type and size of the files.

Uploading a file involves the following general process:

An upload form is displayed, allowing a user to select a file and upload it.

When the form is submitted, the file is uploaded to the destination you specify.

Along the way, the file is validated to make sure it is allowed to be uploaded based on the preferences you set.

Once uploaded, the user will be shown a success message.

Prerequisites

Netbeans 8.1
XAMPP in Windows
Codeigniter 3.0.6
Configure XAMPP and Netbeans

From Netbeans IDE go to Tools->Options. Click on PHP. Now on tab “General” browse the file for “PHP 5 Interpreter”. The php interpreter file generally placed inside the <physical drive in Windows OS>:xamppphpphp.exe

Configure Codeigniter and Netbeans

Create a new PHP project in Netbeans. Then remove the index.php file from the newly created project. Now copy the extracted files from Codeigniter 3.0.6 to the newly created project directory.

Directory Structure

A typical directory structure for the project would be as shown below. Here upload directory will contain the uploaded video file.

upload and play video codeigniter

Step 1. Now modify <root directory>/application/config/autoload.php file for auto-loading html, url, file and form. We want to auto load such things to avoid loading every time we want to use frequently.

/*
  | -------------------------------------------------------------------
  |  Auto-load Helper Files
  | -------------------------------------------------------------------
  | Prototype:
  |
  |    $autoload['helper'] = array('url', 'file');
 */
$autoload['helper'] = array('html', 'url', 'file', 'form');

Step 2. Create a view file upload_video under <root directory>/application/views which will be used for uploading video file. This view file is responsible to upload and play video using codeigniter.

Here in the below view file we have used traditional way to play the video as well as using html5. If your browser does not support html5 then you can use traditional way to play the video.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Codeigniter Video Upload</title>
        <style type="text/css">

            ::selection { background-color: #E13300; color: white; }
            ::-moz-selection { background-color: #E13300; color: white; }

            body {
                background-color: #fff;
                margin: 40px;
                font: 13px/20px normal Helvetica, Arial, sans-serif;
                color: #4F5155;
            }            

            #body {
                margin: 0 15px 0 15px;
            }

            #container {
                margin: 10px;
                border: 1px solid #D0D0D0;
                box-shadow: 0 0 8px #D0D0D0;
            }

            .error {
                color: #E13300;
            }

            .success {
                color: darkgreen;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>CodeIgniter Video Upload</h1>

            <div id="body">
                <p>Select a video file to upload</p>
                <?php
                if (isset($success) && strlen($success)) {
                    echo '<div class="success">';
                    echo '<p>' . $success . '</p>';
                    echo '</div>';
                    
                    //traditional video play
                    echo '<object width="338" height="300">
                      <param name="src" value="' . $video_path . '/' . $video_name . '">
                      <param name="autoplay" value="false">
                      <param name="controller" value="true">
                      <param name="bgcolor" value="#333333">
                      <embed type="' . $video_type . '" src="' . $video_path . '/' . $video_name . '" autostart="false" loop="false" width="338" height="300" controller="true" bgcolor="#333333"></embed>
                      </object>';

                    //HTML5 video play
                    /*echo '<video width="320" height="240" controls>
                      <source src="' . $video_path . '/' . $video_name . '" type="' . $video_type . '">
                      Your browser does not support the video tag.
                      </video>';*/
                }
                if (isset($errors) && strlen($errors)) {
                    echo '<div class="error">';
                    echo '<p>' . $errors . '</p>';
                    echo '</div>';
                }
                if (validation_errors()) {
                    echo validation_errors('<div class="error">', '</div>');
                }
                ?>
                <?php
                $attributes = array('name' => 'video_upload_form', 'id' => 'video_upload_form');
                echo form_open_multipart($this->uri->uri_string(), $attributes);
                ?>
                <p><input name="video_name" id="video_name" readonly="readonly" type="file" /></p>
                <p><input name="video_upload" value="Upload Video" type="submit" /></p>
                <?php
                echo form_close();
                ?>
            </div>

        </div>
    </body>
</html>

Step 3. Create a Controller class  under <root directory>/application/controllers for handling client’s request and response.

We are also validating and restricting few things while uploading video file. We allow only video file to be uploaded. We set the destination where file has to be uploaded etc.

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

/**
 * Description of VideoUpload
 *
 * @author https://www.roytuts.com
 */
class VideoUpload extends CI_Controller {

    //variable for storing error message
    private $error;
    //variable for storing success message
    private $success;

    function __construct() {
        parent::__construct();
        //load this to validate the inputs in upload form
        $this->load->library('form_validation');
    }

    //appends all error messages
    private function handle_error($err) {
        $this->error .= $err . "rn";
    }

    //appends all success messages
    private function handle_success($succ) {
        $this->success .= $succ . "rn";
    }

    public function index() {
        if ($this->input->post('video_upload')) {
            //set preferences
            //file upload destination
            $upload_path = './upload/';
            $config['upload_path'] = $upload_path;
            //allowed file types. * means all types
            $config['allowed_types'] = 'wmv|mp4|avi|mov';
            //allowed max file size. 0 means unlimited file size
            $config['max_size'] = '0';
            //max file name size
            $config['max_filename'] = '255';
            //whether file name should be encrypted or not
            $config['encrypt_name'] = FALSE;
            //store video info once uploaded
            $video_data = array();
            //check for errors
            $is_file_error = FALSE;
            //check if file was selected for upload
            if (!$_FILES) {
                $is_file_error = TRUE;
                $this->handle_error('Select a video file.');
            }
            //if file was selected then proceed to upload
            if (!$is_file_error) {
                //load the preferences
                $this->load->library('upload', $config);
                //check file successfully uploaded. 'video_name' is the name of the input
                if (!$this->upload->do_upload('video_name')) {
                    //if file upload failed then catch the errors
                    $this->handle_error($this->upload->display_errors());
                    $is_file_error = TRUE;
                } else {
                    //store the video file info
                    $video_data = $this->upload->data();
                }
            }
            // There were errors, we have to delete the uploaded video
            if ($is_file_error) {
                if ($video_data) {
                    $file = $upload_path . $video_data['file_name'];
                    if (file_exists($file)) {
                        unlink($file);
                    }
                }
            } else {
                $data['video_name'] = $video_data['file_name'];
                $data['video_path'] = $upload_path;
                $data['video_type'] = $video_data['file_type'];
                $this->handle_success('Video was successfully uploaded to direcoty <strong>' . $upload_path . '</strong>.');
            }
        }
        //load the error and success messages
        $data['errors'] = $this->error;
        $data['success'] = $this->success;
        //load the view along with data
        $this->load->view('video_upload', $data);
    }

}

Step 4. Now modify <root directory>/application/config/routes.php file for pointing the default controller class.

$route['default_controller'] = 'videoupload';

Step 5. Now if everything is fine run the application, you will see below output in the browser

upload and play video using codeigniter

Step 6. Now browse and select a video file, the file will be uploaded to <root directory>/application/upload directory and the uploaded video will be displayed or played on browser

Video uploaded to directory

upload and play video using codeigniter

Uploaded and displayed on to the browser

upload and play video using codeigniter

Playing video on browser

upload and play video using codeigniter

Hope you got idea how to upload and play video using codeigniter.

Sample videos can be found at http://www.sample-videos.com/

Thanks for reading.

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

4 thoughts on “Upload and Play Video using Codeigniter

  1. Very nice tuto
    you should add
    $this->upload->initialize($config);
    at after ligne 60 to initialized your own configuration.
    thinks.

  2. please can you upload a simple tutorial like this for creating this comment section in codeigniter
    thanks

Leave a Reply

Your email address will not be published. Required fields are marked *