Integrate video.js in meteor

Integrate video.js in meteor

Meteor has a specific way to serve the content and it can be a pain to integrate video.js in it. In order to make it less painful, here is my feedback.

You have two ways to integrate video.js in your meteor website:

• Using a package. This is the easy way but it has some downsides. I'll explain it further in the dedicated section below
• Manually. This is a little more demanding and it can cause problems if you change your folder structure without considering video.js. However, it appeared as more effective to me and (in my opinion) I like understanding where is what.

1. Using a package

Here is an overview of the available packages

• https://github.com/GitYong/meteor-videojs

It gets the job done but it includes all the dist folder, not only minified versions. It also puts all the files in a video.js folder, creating in my experience issues with the relative links inside the video.js (to lang and font folders).

• https://github.com/nate-strauser/meteor-video-js

Works fine but use a CDN hosted version of video.js. It basically adds the CDN script tag in the head of your website

• https://github.com/Billybobbonnet/videojs4meteor/

I did this one in order to fix the mime type errors from GitYong's package but it isn't an ideal solution. I had to include the video.js files as Meteor assets and load them in the head of the document but it looks like when you add several Javascript files using this method, the effective load order can vary (videojs wasn't loaded in 1/6 of my page load attempts approx)

If I have enough time I will update it accordingly to what I explain below.

• I have not reviewed the others: https://github.com/jrudio/meteor-videojs and https://atmospherejs.com/mrt/videojs-b3

2. Manually

You could try to just drop the video.js files in your client folder but you will encounter two issues:

• The files are not loaded in the correct order. the package way allows to specify that explicitly. In the manual case, you need to use the the Meteor application structure guidelines
• All the relative links inside the videojs files will be broken. It will create a warning in the console "Resource interpreted as Stylesheet but transferred with MIME type text/html". In fact, meteor send a pseudo HTML file instead of the one you want to serve.

There are several ways to solve these two issues.

2.1 Everything in the public directory

It is the same approach than what I did with my package, except all the files become public. Video.js will then be served as an asset with the execution glitches mentionned above.

2.2 Separate the files

The relative links are broken and pointing to e.g. www.mywebsite.com/lang. This is the path you would you if lang folder was in public folder. It is then possible to add only the lang and font folders in the public folder and get the relative links working. You are then free to put the videojs javascript and css/less files anywhere you want in your meteor app folder, as long as the load order is respected: video.js must be loaded before its plugins and the assets.

Meteor has a few rules to deal with the order of the files loaded. My solution to this was this structure:

• public
  • font
  • lang
• client
  • lib
    • video.js
    • video._pluginName_.plugin.js
  • styles
    • video-js.css

3. disclaimer

This is just a feedback on my experience dealing with this. I might have misunderstood some elements about Meteor (still not clear on how js assets are loaded). I must also mention that I am just starting on Meteor.

Feel free to edit and improve this guide.

---

Guide contributed by @Billybobbonnet