Compile Library (VideoJS)

Node.js build server
↓
bundled assets (video.js + your code)

 

🚀 1. Create Node build project

On your build server:

 
mkdir videojs-build
cd videojs-build
npm init -y
npm install esbuild

Different way:

npm install video.js

📦 2. 

 

⚙️ 3. Create source entry file

Create:

 
src/main.js
 
 
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

window.videojs = videojs;
 

Why window.videojs?
👉 OctoberCMS will use global variable, not ES modules.

🔨 4. Build with ESBuild (recommended lightweight)

Create:

 
build.js
 
 
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/main.js'],
  bundle: true,
  minify: true,
  sourcemap: false,
  outfile: '../october-theme/assets/vendor/videojs/video.min.js',
  loader: {
    '.css': 'css'
  }
}).catch(() => process.exit(1));
 

▶️ 5. Run build

 
node build.js
 

Output:

 
themes/your-theme/assets/vendor/videojs/video.min.js
 

🎨 6. CSS build (important)

Video.js CSS must also be extracted.

Option A (simple copy)

 
cp node_modules/video.js/dist/video-js.css ../october-theme/assets/vendor/videojs/video-js.css
 

Option B (via bundler)

If using Vite/Webpack, CSS is automatically bundled.

🧠 7. Final structure in OctoberCMS

 
themes/your-theme/assets/vendor/videojs/
    video.min.js
    video-js.css
 

⚙️ 8. Use in OctoberCMS

layout:

 
{% put styles %}
<link rel="stylesheet" href="{{ 'assets/vendor/videojs/video-js.css'|theme }}">
{% endput %}

{% put scripts %}
<script src="{{ 'assets/vendor/videojs/video.min.js'|theme }}"></script>
{% endput %}
 

🧪 9. Initialize in page

 
<script>
document.addEventListener('DOMContentLoaded', function () {

    const player = videojs('company-video', {
        controls: true,
        autoplay: false,
        preload: 'none'
    });

    document.querySelector('.js-play-video')
        ?.addEventListener('click', () => player.play());

});
</script>
 

🔥 10. Optional: full production pipeline (recommended)

If you want “real frontend engineering setup”, upgrade to:

Vite config

 
npm create vite@latest
 

Then:

 
export default {
  build: {
    lib: {
      entry: 'src/main.js',
      name: 'VideoJSBundle',
      fileName: 'video',
      formats: ['iife']
    }
  }
}
 

Build:

npm run build
 

Output:

dist/video.iife.js
 

✔ Perfect for CMS integration

2026안정적인 CORE

검색 폼