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 | stringRequired. Non repeatable. | URL of the video. | | audio | stringOptional. Repeatable. | URL of audio track. | | subtitles | stringOptional. Repeatable. | URL of subtitles.".vtt" format required.Must followed by a label k-v pair! | | captions | stringOptional. Repeatable. | URL of captions.".vtt" format required.Must followed by a label k-v pair! | | label | stringOptional. Repeatable. | Label text for subtitle.Must follow a subtitle or captions k-v pair! | | chapters | stringOptional. Non repeatable. | URL of chapters.".vtt" format required. | | aspect-ratio | stringOptional. Non repeatable. | The aspect-ratio of the video.Format: Width-Height. | | width | numberOptional. Non repeatable. | Width of DOM. | | height | numberOptional. Non repeatable. | Height of DOM. | | poster | stringOptional. 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 | nullNo  value required. | If it exists, video plays in a loop. | | autoplay | nullNo  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.