404s when using a 3rd party video player with rails asset pipeline

Question

Specifically, I am trying to add a video player to my web app..

The javascript manifest file has in it:

//= require bitmovinplayer.min                                                                                                              
//= require bitmovinplayer-core.min
//= require bitmovinplayer-controls.min

and in the css manifest:

@import "bitmovinplayer-core.min";                                                                                                                          
@import "bitmovinplayer-controls.min";

When viewing the concatenated .js file after asset compilation, I see that these files are there properly getting included.

However, when attempting to instantiate a player, there are 404s which I see in the console:

vendor-d8cd0ac….js:38 GET https://myapp.com/assets/bitmovinplayer-core.min.css

vendor-d8cd0ac….js:38 GET https://myapp.com/assets/bitmovinplayer-core.min.js

So apparently this player code is adding html that with src attributes that is pointing to files that are not accessible-- because they are available in the main js & css files generated from the manifest.

So I thought by manually adding these files to the assets precompile array, this would solve the problem.............

config.assets.precompile += [
  'bitmovinplayer-core.min.css',
  'bitmovinplayer-core.min.js',
]

However, after doing this and precompiling, I still cannot go to:

/assets/bitmovinplayer-core.min.css

I have to go to:

/assets/bitmovinplayer-core.min-78b88b860ccc407fd131639914ecd692.css

Which is no good.. I need to be able to access this asset without the hash in the url.

How do I do this?

Answer 1

the issue here is that whenever Rails precompiles an asset through the asset pipeline it appends a hash to the files to improve caching. Since bitmovin-player expects these files to be named in a certain way by default it will run into a 404 error.

There is however a configuration setting that lets you override the paths bitmovin-player will load these files from as documented here.

location : {
  html5 : '<%= asset_path('bitmovinplayer-core.min.js') %>',
  css   : '<%= asset_path('MY_CSS_FOLDER/bitmovinplayer-core.min.css') %>',
  flash : '/bitmovinplayer.swf',
  vr    : '<%= asset_path('bitmovinplayer-vr.min.js') %>',
  ctrls : '<%= asset_path('MY_JS_FOLDER/bitmovinplayer-controls.min.js') %>',
  ctrls_css: '<%= asset_path('MY_CSS_FOLDER/bitmovinplayer-controls.min.css') %>'
}

Unfortunately there is no way at the moment to tell the player that all files are bundled together into one and it should not reload any js/css. So until then you need to add each individual file to the config.assets.precompile list.

If you don't really need to use the self-hosted player, I wrote a Rails gem yesterday that makes embedding and configuring the bitmovin-player quite a bit easier. You can check it out on GitHub. I am thinking about adding the self-hosted option to the gem - but at the moment don't have time to go into that. (The helper for embedding the player still works if you remove the <%= bitmovin_player_script %> that gets added to the head of the page.

Hope this helps.