What is VideoJS ?
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
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
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
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
#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>
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 %>"
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.
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/
VideoJS Docs: https://docs.videojs.com