Categories
blog ruby

How to add the VideoJS Yarn package to Rails

It’s not unsurprising that a web tutorial should follow the old ‘how to draw a duck’ format… “draw two circles for the head and body, draw two circles for the eyes, draw the rest of the duck!” Case in point, the videojs project doesn’t elaborate beyond “npm install…” which is nice if you’re using npm every day. If you’re new to the process or are using something a little more complex like Rail’s Yarn/Webpacker integration here’s how to add the VideoJS Yarn package to Rails.

Here’s how to get going, and how to get the new Video.JS theme pack installed while you’re at it. I’m using the Jumpstart Pro provisioning of Yarn, Webpacker etc., which I won’t touch here. So I guess you’ll have to draw the rest of that duck yourself! GoRails has some good webpacker content.

Note that this project uses the (weird) new normal of putting stylesheets within the javascript structure which is described in this Tailwind tutorial (similar to the way Jumpstart is built).

Once you have Yarn functioning as part of your project it’s quite simple. Just as a primer let’s look at the npm installation guide on the Mux themes page. We’re not going to copy this directly…

$ npm install --save video.js @videojs/themes

// Base Video.js theme
import 'video.js/dist/video-js.css';

// City
import '@videojs/themes/dist/city/index.css';
...

That needs split up into three.

  1. install the npm components using Yarn
  2. amend the import statements and place into your application.scss file
  3. add the unmentioned javascript components into your application.js file

1. Yarn

Add the npm components using Yarn (you’ll recognise this from the npm install line earlier).

yarn add video.js @videojs/themes

Your output will look something like this:

Some warnings are to be expected – take a note of them in case you see errors later.

2. Webpacker’s application.scss

You’ll see a series of ‘@import’ statements in your file already. We need to convert the “import” lines from the turial to “@import”.

@import 'flatpickr/dist/flatpickr.css';

@import 'video.js/dist/video-js.css';
//@import '@videojs/themes/dist/city/index.css';
//@import '@videojs/themes/dist/fantasy/index.css';
//@import '@videojs/themes/dist/forest/index.css';
@import '@videojs/themes/dist/sea/index.css';

You’ll notice at this point, if your server is running, that the CSS files will recompile. Any errors will appear at this time. (I’m using Jumpstart’s Foreman + Procfile.dev processes).

3. Webpacker’s application.js

Finally, in application.js we need to require the ‘video.js’ package’s script. Note the styles use @videojs and the script uses video.js. No idea why it’s different – any clues or wildly inaccurate guesses leave them in the comments.

// Rails functionality
window.Rails = require("@rails/ujs")
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")

require("video.js")

Another webpack compile and a browser refresh, if configured. And that’s how to add the VideoJS Yarn package to Rails 6 and webpacker!

Test it!

Here’s a test using a sample m3u8 (hls) stream which is equivalent to any modern live stream after adding the VideoJS package via webpacker.

<video-js controls autoplay preload class="vjs-theme-sea" id="player-id" data-setup='{"liveui": true,"fluid": true}'>
  <source src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" type="application/x-mpegurl">
</video-js>
A screenshot showing VideoJS content playing back with the ‘Sea’ theme

Here’s the sample video loaded alongside some teaser text for my upcoming product. If you’re interested in asset management and a pay per view live streaming platform for sports teams and leagues, sign up to get info!

While you are here

I’ve recently launched social media platforms for my company on both Facebook and LinkedIn. I’d love it if you would like/follow/share the profiles if you can. My focus is heavily on live streaming solutions but as you can tell from my recent blog posts web development is an ongoing part of my business.

My last two articles:

Thanks for reading! If you have any questions drop a comment below, or email me.