Hexo-tag-videojs2 NPM

hexo-tag-videojs2

Use video.js player in Hexo. Demo.

Installation

npm install --save hexo-tag-videojs2

Features

Basic video-js functions.

Advanced features:

I18N (video.js/lang)
Muti audio and subtitle tracks supported
Toast when changing volume (DIY by myself)
Draggable progress bar (issue)
Save playback progress (videojs-remember)
Show markers for chapters on progress bar
Playlist supported
On mobile:
- Double-tap the left side of the player to rewind ten seconds (videojs-mobile-ui.js)
- Double-tap the right side of the player to fast-forward ten seconds(videojs-mobile-ui.js)
- Single-tap the screen to show a play/pause toggle(videojs-mobile-ui.js)
- Always lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional) (videojs-mobile-ui.js)
- Triple speed playback when long pressing the screen (DIY by myself)
- Slide left and right within the WHOLE video area to adjust the video progress (DIY by myself)
- Swipe up-and-down on the left half of the screen to adjust the brightness (DIY by myself)
- Swipe up-and-down on the right half of the screen to adjust the volume (DIY by myself)

!TIP If advanced features are not needed, use hexo-tag-video-js instead for a faster loading speed.

Usage

Theme color

Please open the file at PATH_TO_BLOG\node_modules\hexo-tag-videojs2\assets\videojs.css. At the beginning of it, you can modify the theme color. The default theme color is: #f8bbd080 #aa818f #50002a80.

div.video-js{
  --vjs-bg-color-light:#f8bbd080;
  --vjs-bg-color-theme:#aa818f;
  --vjs-bg-color-dark:#50002a80;
}

You can modify the above three colors to match the theme color of your website.

Single Video

The full tag format is as follows:

{% vjs2 "key1=value1" "key2=value2" %}

Key	Value	Description
video	`string`Required. Non repeatable.	URL of the video.
audio	`string`Optional. Repeatable.	URL of audio track.
subtitles	`string`Optional. Repeatable.	URL of subtitles.".vtt" format required.Must followed by a `label` k-v pair!
captions	`string`Optional. Repeatable.	URL of captions.".vtt" format required.Must followed by a `label` k-v pair!
label	`string`Optional. Repeatable.	Label text for subtitle.Must follow a `subtitle` or `captions` k-v pair!
chapters	`string`Optional. Non repeatable.	URL of chapters.".vtt" format required.
aspect-ratio	`string`Optional. Non repeatable.	The aspect-ratio of the video.Format: `Width-Height`.
width	`number`Optional. Non repeatable.	Width of DOM.
height	`number`Optional. Non repeatable.	Height of DOM.
poster	`string`Optional. Non repeatable.	URL of the poster picture shown before playing.Note: If `"poster=key"`, a shortcut key guide will be shown on the cover picture.
loop	`null`No `value` required.	If it exists, video plays in a loop.
autoplay	`null`No `value` required.	If it exists, video plays automatically.

More options will be available in future releases.

Simple example:

{% vjs2 "video=file1.mp4" "subtitle=eng.vtt" "label=English" "subtitle=chs-eng.vtt" "label=双语" "poster=cover.png" %}

{% vjs2 "video=file2.mp4" "chapters=touch_chapter.vtt" "aspect-ratio=16-9" "loop" "autoplay" "poster=key" %}

{% vjs2 
"video=https://sbw0104-my.sharepoint.com/:v:/g/personal/013_sbw0104_onmicrosoft_com/ERQD08cGcYhLotmoQ6q-LKEB6bCfHhe865Htq7NvLkHkMA?e=1T1Wu0&download=1"
"chapters=touch_chapter.vtt"
"subtitle=touch.vtt"  "label=English"
"subtitle=touch2.vtt" "label=双语"
"poster=key" %}

!NOTE .vtt file for chapters may be like:

WEBVTT

00:00:00.000 --> 00:00:30.000
Chapter I

00:00:30.000 --> 00:00:56.000
Chapter II

00:00:56.000 --> 00:05:34.000
Chapter III

00:05:34.000 --> 00:07:16.000
Credits

Playlist

{% vjs2list %}
content
{% endvjs2list %}

'content' is a list containing information of all videos. For example:

{% vjs2list %}
[{
  sources: [{
    src: 'url.mp4',
    type: 'video/mp4'
  }],
  poster: 'poster.png',
  name: "Name of the video",
  description: "Description of the video",
  textTracks: [{src:"captions.vtt",label:"text",kind:"captions"}],
}, {
  sources: [{
    src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
    type: 'video/mp4'
  }],
  poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
  sources: [{
    src: 'http://vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }],
  poster: 'http://www.videojs.com/img/poster.jpg'
}, {
  sources: [{
    src: 'http://media.w3.org/2010/05/bunny/movie.mp4',
    type: 'video/mp4'
  }],
  poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
  sources: [{
    src: 'http://media.w3.org/2010/05/video/movie_300.mp4',
    type: 'video/mp4'
  }],
  poster: 'http://media.w3.org/2010/05/video/poster.png'
}]
{% endvjs2list %}