Use video.js player in Hexo. Demo.
npm install --save hexo-tag-videojs2
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.
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.
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
{% 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 %}
- 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)
- Write workaround as an independent plug-in using document standard to solve the problem of dragging progress bar and toast prompt in videojs.
Bugs & feature requests: issues page
© Licensed under the MIT License.