Hugo Video.js Module

September 2, 2023 2 min read Modules Docs Video Video.js

Add Video.js support for Hugo.

Please check out the tutorial to start using Hugo modules.

Module
`github.com/hugomods/video-js`

Installation

Import the Module

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/video-js

hugo.toml

1[module]
2[[module.imports]]
3    path = 'github.com/hugomods/video-js'

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hugomods/video-js"
6         }
7      ]
8   }
9}

Include the CSS

Please skip this step if your theme supports HugoPress.

1{{ partial "video-js/assets/css" . }}

Include the JavaScript

Please skip this step if your theme supports HugoPress.

1{{ partial "video-js/assets/js" . }}

Site Parameters

Name	Type	Default	Description
`css_url`	string	`https://unpkg.com/video.js/dist/video-js.min.css`	The CSS URL.
`js_url`	string	`https://unpkg.com/video.js/dist/video.min.js`	The JavaScript URL.

hugo.yaml

1params:
2  video_js:
3    css_url: https://unpkg.com/video.js/dist/video-js.min.css
4    js_url: https://unpkg.com/video.js/dist/video.min.js

hugo.toml

1[params]
2  [params.video_js]
3    css_url = 'https://unpkg.com/video.js/dist/video-js.min.css'
4    js_url = 'https://unpkg.com/video.js/dist/video.min.js'

hugo.json

1{
2   "params": {
3      "video_js": {
4         "css_url": "https://unpkg.com/video.js/dist/video-js.min.css",
5         "js_url": "https://unpkg.com/video.js/dist/video.min.js"
6      }
7   }
8}

Leave it as is to keep using the latest version, you can also replace it with yours self-hosted assets or other CDNs.

Page Parameters

Name	Type	Default	Description
`video_js`	boolean	`false`	Indicate the current page is using Video.js to load the CSS and JS.

You don’t have to specify the video_js when using shortcode, since this module is able to recognize the pages that using Video.js.

Shortcode

Shortcode Syntax

1{{< video-js >}}

Shortcode Parameters

`src`

Position	Name	Type	Default	Required
`#0`	`src`	`string`	-	Y

The URL of video.

`autoplay`

Position	Name	Type	Default	Required
-	`autoplay`	`string`	`false`	-

Whether to autoplay the video.

`controls`

Position	Name	Type	Default	Required
-	`controls`	`string`	`true`	-

Whether to turn on controls.

`loop`

Position	Name	Type	Default	Required
-	`loop`	`string`	`false`	-

Whether to turn on loop.

`muted`

Position	Name	Type	Default	Required
-	`muted`	`string`	`false`	-

Whether to turn on muted.

`preload`

Position	Name	Type	Default	Required
-	`preload`	`string`	`false`	-

Whether to preload the video.

`type`

Position	Name	Type	Default	Required
-	`type`	`string`	-	-

The media type of video, i.e. application/x-mpegURL for HLS, application/dash+xml for MPEG DASH.

Shortcode Examples

The below example videos are belong to the BLACK MYTH WUKONG.

Default Video.js Example

1{{< video-js "https://heishenhua.com/video/preview/video_PV03_Music.mp4" >}}

Video.js Example Without Controls

1{{< video-js "https://heishenhua.com/video/preview/video_Day2.mp4" >}}

Video.js Example With Muted, Loop, Preload and Autoplay Enable

1{{< video-js
2  src="https://www.heishenhua.com/video/preview/video_Day1.mp4"
3  muted=true
4  loop=true
5  autoplay=true
6>}}

Video.js HLS Example

1{{< video-js
2  src="https://devstreaming-cdn.apple.com/videos/streaming/examples/adv_dv_atmos/main.m3u8"
3  type="application/x-mpegURL"
4>}}

Video.js MPEG DASH Example

1{{< video-js
2  src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.mpd"
3  type="application/dash+xml"
4>}}

Browser docs