Display uploaded videos with VideoJS

What is VideoJS ?

VideoJS is a client-side javascript library for displaying/showing/playing/embedding videos with a video player on the web browser, with controls such as volume controls, forward, skip, play, pause, etc. We can also display uploaded videos directly without even using this library as HTML5 already supports videos. But with videoJS we can have more controls for the video player and also we can customize the video player with skins custom buttons, etc.

VideoJS: https://videojs.com

Video Attachment

I will be using active storage to manage the attachments of my video model, you can use gems such as carrierwave, shrine, etc; if you don’t want to use active storage. As for me i like to use active storage because it comes out of the box with rails6, and also because it’s easier to implement. I’ll skip the part of setting up active storage, you can follow rails guides if you don’t know how to use active storage.

Active Storage Rails Guides: https://edgeguides.rubyonrails.org/active_storage_overview.html

The model

For my video model, i added two active storage attachments; one for the video thumbnails and the other for the actual video file. And then, I associated my video model with my user model.

#File: app/models/video.rb
class Video < ApplicationRecord
has_one_attached :video_thumb
has_one_attached :video_data
belongs_to :user
end

The controller

In my controller i permitted the new parameters for my attachments, i.e; video_thumb and video_data.

#File: app/controllers/videos_controller.rb
class VideosController < ApplicationController
#...Other methods
private
# Use callbacks to share common setup or constraints between actions.
def set_video
@video = Video.find(params[:id])
end

# Only allow a list of trusted parameters through.
def video_params
params.require(:video).permit(:title, :description, :video_data, :video_thumb, :user_id)
end
end

Adding VideoJS

To use videoJS we have to add the videoJS library to our rails apps, this can be done in many ways. But i wanted to make it quick and easy to use, so i added them directly in my views.

The VideoJS assets

In my video model’s show page i added the videoJS styesheet and javascript directly. It’s not the most efficient way, a better way would be to place it in your application layout. But, i wanted it to do it quickly so i added them directly.

#File: app/views/videos/show.html.erb 
#videoJS 
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" /> 
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

Thumbnails

After that i added the video thumbnail(video_thumb) with a image variant of 640×350 and the main video file(video_data), this will resize the video thumbnail of any size to 640×350. I added the thumbnail to the poster attribute, the poster attribute displays the thumbnail in the video player.

#For Thumbnail
poster="<% if @video.video_thumb.present? %><%= @video.video_thumb.variant(resize_to_fill: [640, 350]).processed.service_url %><% end %>"

Video Source

To add the main video file/source, i just called for the service URL of the video source file. Please note that i added ‘@video.video_data.present?‘ to verify the presence of the attachment. Because, sometimes the files fail to upload, this usually happens with large files and end up with an empty record. This will result in our video’s show page to end up with an error.

#For Video Source
<source src="<% if @video.video_data.present? %> <%= @video.video_data.service_url %><% end %>" type="video/mp4" />

The Show Video Page

This is what everything looks like in the show page of my video. You can customize the video size, player height, width, etc, if you want to.

#File: app/views/videos/show.html.erb
#videoJS
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<video
id="my-video"
class="video-js"
controls
height= "350"
width="640"
preload="auto"
poster="<% if @video.video_thumb.present? %><%= @video.video_thumb.variant(resize_to_fill: [640, 350]).processed.service_url %><% end %>"
data-setup='{"fluid": true}'
>
<source src="<% if @video.video_data.present? %>
<%= @video.video_data.service_url %><% end %>" 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="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>

Video thumbnail Processing

As for the video thumbnails, i could process them in the background from the video file, but that would use up a lot of resources, and with HD or 4k videos, this could take up several hours to process, so instead i decided to just add video thumbnails manually by adding a video thumbnail attachment via active storage.

Player Demo/ Preview

Below is the demo of the videoJS player(video). Click to play video. The used a royalty free video from pexels.com for the demo. The link has been given below, if you want to download the video.

Royalty Free Video Source: https://www.pexels.com/video/footage-of-people-and-surroundings-of-the-busy-time-square-street-3202634/

Final Thoughts

With VideoJS we can even use various plugins like a playlist plugin or quality selector or even add watermarks. Also, to make the videos load faster i recommend using a CDN. And to upload large video files it will be better to use direct uploads with javascript libraries like dropzoneJS. Please checkout VideoJS documentation for the complete guide.

VideoJS Docs: https://docs.videojs.com