Browserify bundling with video.js

[alexbakum]

Hello.

I'm experiencing some issues in bundling this plugin and video.js core library into my own player player build with gulp+browserify stack.
My goal is to make this plugin usable with this kind of code (in CommonJS-compatible code):

var videojs = require('video.js');
require('videojs-hls');
// work with videojs as usual....
videojs('video');

I have some suggestions to improve plugin distribution:

• make all modules in src directory CommonJS compatible
• bundle plugin with browserify
• include dist/videojs-hls.js into repository to make plugin installable with npm (bower, etc.)

Well, I'm on my way to do implement this and i'm requesting for comments and suggestions.
Many thanks.

[gkatsev]

The current UMD that videojs has doesn't work great. But we're working for 5.0 to rework it to use browserify.
This project does include the dist file on npm. We probably need to point the browser field of the package.json to point at the dist file.

Also, one of the things I would like to do with this project is break things up into separate projects. For example, have the m3u8 parser a separate dependency that can be included via browserify. We've already started doing that internally.

However, we'd be more than happy to accept the changes to switch this project to commonjs/browserify.

P.S., you could probably use browserify-shim to make the current files work via browserify as a stop gap.

[alexbakum]

Thanks for suggesting usage of the browserify-shim transform module.
Now I have working example of bundled videojs+videojs-contrib-hls.
You can clone it and just open index.html in your browser to see that the bundle works.
https://github.com/alexbakum/example-videojs-hls-bundle

But this solution looks quite ugly.

Also i saw some issues for todos not only for videojs-contrib-hls plugin but also for others:

• require cannot resolve paths (no main field in package.json) for: videojs-contrib-hls, videojs-contrib-media-sources, videojs-swf(just cannot imagine if browserify will do this for AS3 project)
• dist/pkcs7.unpad.js from brightcove/pkcs7 project cannot be bundled with browserify, so I had to bundle full dist/pkcs7.js due to it's proper UMD wrapper
• I'm not sure of bundling vtt.js to my bundle.
• latest videojs-contrib-hls project version does not have dist/videojs.hls.min.js and 'dist/videojs.hls.js` files on npm

You've mentioned that your team will be happy to accept some changes to switch project to commonjs/browserify. Do you have some kind of roadmap for changes or suggestions where to start from?
I'm still on my way to make bundle or some kind of recipe of bundling current versions of videojs and it's plugins.

P.S., I'm using videojs, some plugins authored by videojs team and brightcove(pkcs7) projects as dependencies in my example project and don't have license. What license will you suggest for it?

[darrennolan]

Hey just popping in on this thread,

Video.js v5 is getting better support for browserify via umd which is great. But without browserify shim I can't seem to get this plugin working.

What is the plan for using plugins within Video.js under umd? Shimming is not available for what I'm trying to achieve (I'm trying to use Video.js under node for isomorphic code). Just trying to work out a plan of attack for these plugins.

[seankoji]

+1 to node use please. How would we go about making this changes/possible pull requests ourselves?

[nigelwtf]

I'm also jumping on the bandwagon - as I've been looking at this for a while. Would be good to be able to use videojs this without shimming any dependencies. Even if not for isomorphic use, it's still rather inelegant to shim.

[gkatsev]

videojs 5.0 should work nicely with browserify (and to a certain extent in node).
It's probably not worth having anyone work on this right now because this project is in flux right now as we're trying to get MSE support added.

[oleynikd]

videojs 5.0 should work nicely with browserify (and to a certain extent in node).

Great, but what about require('videojs-hls'); ? It would be great to avoid shim...

[dmlap]

@oleynikd yeah, that's definitely the direction we'd like to head. As soon as we get MSE support stabilized, we'd love to upgrade to es6 and browserify like the main video.js code base.

[pbacci]

Hello there, are there any updates on a timeline to be able to do require('videojs-hls'); ? We are hitting the same problem and we are trying to understand if we should go with a shim solution in the interim or wait for this to be fixed more properly

[dmlap]

@pbacci it's a bit of a laborious process but we're deep in it in the development branch right now.

[gkatsev]

I believe this is now available in the dev branch.

[builtbylane]

has this been implemented in the master branch?

[gkatsev]

Yup, the 2.x and 3.x releases should be available. Works great with browserify right now. Still some issues with webpack ( #600 )