Develop a video sharing app in 6 min

In this tutorial I will show you how to create a video sharing platform in 6 min using Ruby on Rails. This tutorial will cover the basic foundation in later tutorials I will demonstrate styling, adding popups , adding additional input fields, etc. For this tutorial we will set up the building blocks to create a video uploading system and display that video with video.js.

To start out let’s create a new rails app. Open up your terminal and type in this command to create a new rails app.

rails new videoSharingWebsite

This command will generate a new Rails app. Now go ahead and cd or change directory into your new Rails app.

Now in the terminal run rails s to start the server. You should see the welcome message .

The rails s command start’s the Rails server , and get you up and running ! Ok so now lets open up our app in your favorite text editor. open up your Gemfile These are the gems we will need for now. Add these to your Gemfile

gem 'dropzonejs-rails'

gem 'videojs_rails'
gem 'jquery-rails'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
gem 'simple_form', '~> 3.4'
gem "paperclip", "~> 5.0.0"

dropzonejs-rails is used for the asynchronous video uploading, videojs_rails is used for a nice looking video player, jquery-rails is used for jQuery functionality, bootstrap-sass should already come with the Gemfile , but just to be safe, simple_form is used for a simpler way to create forms, and paperclip for uploading files.

run bundle in the terminal to install those new gems we added.

Now in your text editor navigate to app/assets/javascripts/application.js and add these require statements in order to require the files for the new gems we installed.

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require video
//= require bootstrap-sprockets
//= require dropzone
//= require_tree .

Now navigate to app/assets/stylesheets/application.css and add the following , so that we have all our dependencies.

 *= require_tree .
 *= require dropzone/dropzone
 *= require_self
 *= require video-js
 */

@import "bootstrap";

Now lets run a scaffold generator. A scaffold generator will create an entire CRUD (create,update,delete,destroy) interface for you. This will give us a great starting point to create a video uploading system. In the terminal run..

rails g scaffold Video

As you can see this created a ton of files. This created a Model View and Controller for you to create a CRUD interface for us to work with. Now we will add a paperclip migration onto our Video model we created using the scaffold generator. We are using paperclip in order to handle file uploads , so lets run the following command in the terminal.

rails g paperclip Video mp4

Paperclip added the following migration

class AddAttachmentMp4ToVideos < ActiveRecord::Migration[5.1]
  def self.up
    change_table :videos do |t|
      t.attachment :mp4
    end
  end

  def self.down
    remove_attachment :videos, :mp4
  end
end

Make sure that if paperclip didnt add the ActiveRecord::Migration[5.1], then you need to add that additional [5.1] part, or you will recieve an error when you run the next command.

Now run rails db:migrate in your terminal to migrate the database.

Now restart your server , and go to localhost:3000/videos/new you should see..

Now lets go back to our text editor and navigate to our Video model in app/models/video.rb. We need to add the following paperclip declarations for our video model. Add the following to your model.

has_attached_file :mp4,
                  :styles => {:thumb => ["400x400#", :jpg]}
validates_attachment_content_type :mp4, content_type: /\Avideo/

Now that we have added that navigate to app/views/videos/_form.html.erb. We will be using simple form , initially you will have a regular form_for. Below is the code we will need for our form. I will go over this, but use this code instead of the form that is already there.

<%= simple_form_for(@video,html:{multipart:true, class:'dropzone', id:'my-dropzone'}) do |f| %>
  <%= f.error_notification %>
<br>
    <div id = "dropzonePreview" class = "dz-message dz-default needsclick">
      <img style = "width:100px; height:100px;" src = "http://www.freeiconspng.com/uploads/upload-icon-31.png">
      <h3>Drop a video file here </h3>
      <strong>or Click to upload</strong>
    </div><br>


    <div class="fallback">
      <%= f.input :mp4 %>
    </div>


    <div class = "submit ">
      <%= f.button :submit, class:'submit-btn btn ' %>
    </div>

<% end %>

‘We should see this in the browser . Alright so dropzone requires us to add a class dropzone for styling , and I added an id "my-dropzone" so that we can manipulate the dropzone form through javascript later. The dropzone preview div will be were the files will be shown while downloading. Now lets navigate to app/views/videos/new.html.erb. Here add the following code.

<h1>New Video</h1>


  <%= render 'form', video: @video %>



<script>
        Dropzone.autoDiscover = false;
        Dropzone.options.myDropzone = {
            autoProcessQueue: false,
            acceptedFiles: ".mp4,.mov,.wmv,.flv,.avi",
            maxFilesize:500,
            init: function() {

                var myDropzone = this;
                $(".submit").click(function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("addedfile", function() {



                    if (this.files[1]!=null){
                        this.removeFile(this.files[0]);
                    }
                });
                this.on("success", function (file, responseText) {

                    window.location.href = ("/videos/"+responseText.id);
                });
            }
        };
        $("#my-dropzone").dropzone({
            addRemoveLinks: true,
            paramName: 'video[mp4]'

        });
    
</script>

Here we are rendering the form partial. Then we are customizing the dropzone options. We want to make sure that when we add a file the file doesn’t automatically upload, so we don’t auto process the Que. Were also specifying the file types we want to use, and the max file size. Whenever the dropzone is initialized we say that when we click the submit button, process whatever files are in the dropzone, and prevent the default behavior for the form. Also, i’m specifying that I only want one file to be present in the dropzone. If another file is added we simply overwrite the previous file with the new file. Lastly, if the file submission is successful then redirect us to the id of that video, which would be the show view. Now if we try and upload something we will get an error.

So we need to navigate to our videos_controller.rb , and add our strong params. At the bottom of the file add your strong params.

params.require(:video).permit(:mp4)

Now if we try to upload a video we will get a check , and will be redirected to the show page for that particular video. Now currently there is nothing to see on the show page, because we haven’t added any code for it, so lets do that. Go to app/views/videos/show.html.erb, and add the following.

<video  id="my_video_1" class="video-js vjs-default-skin" width="100%" height="500px"
        preload="auto" autoplay  poster='http://video-js.zencoder.com/oceans-clip.jpg'
        data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2, 2.5, 3.0], "controls":"true" }'
        poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="<%= @video.mp4.url %>" type='video/mp4'>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

Perfect! Now you have a video uploading system with a nice video player. If this tutorial is helpful, I will create a part 2 were we will add a user who can create and share videos, styling, additional input fields, and some cool dialog messages to help guide the user. The code is on github here https://github.com/jalenjackson/Video-sharing-app-tutorial