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

Thanks to

• videojs/video.js: Video.js - open source HTML5 video player (github.com)
• ctd1500/videojs-hotkeys: Adds more hotkey support to video.js (github.com)
• mister-ben/videojs-mobile-ui: Mobile UI for Video.js (github.com)
• video.js/zh-CN.json at main · videojs/video.js (github.com)
• sethjeffery/videojs-remember: Remembers the last place the user was at when watching a video, using localStorage. (github.com)
• videojs/videojs-playlist: Playlist plugin for videojs (github.com)
• videojs/videojs-playlist-ui: A playlist video picker for video.js (github.com)

To-do

• [ ] Write workaround as an independent plug-in using document standard to solve the problem of dragging progress bar and toast prompt in videojs.

Issues

Bugs & feature requests: issues page

License

© Licensed under the MIT License.