Hugo Video.js Module

Add Video.js support for Hugo.

Module
github.com/hugomods/video-js
GitHub Stars Used By Used By Used By Used By

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

NameTypeDefaultDescription
css_urlstringhttps://unpkg.com/video.js/dist/video-js.min.cssThe CSS URL.
js_urlstringhttps://unpkg.com/video.js/dist/video.min.jsThe 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

NameTypeDefaultDescription
video_jsbooleanfalseIndicate 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

PositionNameTypeDefaultRequired
#0srcstring-Y

The URL of video.

autoplay

PositionNameTypeDefaultRequired
-autoplaystringfalse-

Whether to autoplay the video.

controls

PositionNameTypeDefaultRequired
-controlsstringtrue-

Whether to turn on controls.

loop

PositionNameTypeDefaultRequired
-loopstringfalse-

Whether to turn on loop.

muted

PositionNameTypeDefaultRequired
-mutedstringfalse-

Whether to turn on muted.

preload

PositionNameTypeDefaultRequired
-preloadstringfalse-

Whether to preload the video.

type

PositionNameTypeDefaultRequired
-typestring--

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

Shortcode Examples

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>}}