webvtt subtitle
This commit is contained in:
DIYgod
parent
6ca11a21b3
commit
d9a6de6fbc
|
|
@ -20,7 +20,10 @@
|
|||
video: {
|
||||
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
|
||||
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
|
||||
thumbnails: 'http://devtest.qiniudn.com/thumbnails.jpg'
|
||||
thumbnails: 'http://devtest.qiniudn.com/thumbnails.jpg',
|
||||
},
|
||||
subtitle: {
|
||||
url: 'http://devtest.qiniudn.com/若能绽放光芒2.vtt'
|
||||
},
|
||||
danmaku: {
|
||||
id: '9E2E3368B56CDBB4',
|
||||
|
|
@ -58,6 +61,13 @@
|
|||
type: 'auto',
|
||||
thumbnails: 'http://devtest.qiniudn.com/thumbnails.jpg'
|
||||
},
|
||||
subtitle: {
|
||||
url: 'http://devtest.qiniudn.com/若能绽放光芒2.vtt',
|
||||
type: 'webvtt',
|
||||
fontSize: '25px',
|
||||
bottom: '10%',
|
||||
color: '#b7daff'
|
||||
},
|
||||
danmaku: {
|
||||
id: '9E2E3368B56CDBB4',
|
||||
api: 'https://api.prprpr.me/dplayer/',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "dplayer",
|
||||
"version": "1.11.0",
|
||||
"version": "1.12.0",
|
||||
"description": "Wow, such a lovely HTML5 danmaku video player",
|
||||
"main": "dist/DPlayer.min.js",
|
||||
"style": "dist/DPlayer.min.css",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import Thumbnails from './thumbnails';
|
|||
import Events from './events';
|
||||
import FullScreen from './fullscreen';
|
||||
import User from './user';
|
||||
import Subtitle from './subtitle';
|
||||
|
||||
let index = 0;
|
||||
|
||||
|
|
@ -996,6 +997,10 @@ class DPlayer {
|
|||
}
|
||||
|
||||
this.volume(this.user.get('volume'), true);
|
||||
|
||||
if (this.options.subtitle) {
|
||||
this.subtitle = new Subtitle(this.container.getElementsByClassName('dplayer-subtitle')[0], this.video, this.options.subtitle);
|
||||
}
|
||||
}
|
||||
|
||||
switchQuality (index) {
|
||||
|
|
@ -1011,7 +1016,7 @@ class DPlayer {
|
|||
|
||||
const paused = this.video.paused;
|
||||
this.video.pause();
|
||||
const videoHTML = html.video(false, null, this.options.screenshot, 'auto', this.quality.url);
|
||||
const videoHTML = html.video(false, null, this.options.screenshot, 'auto', this.quality.url, this.options.subtitle);
|
||||
const videoEle = new DOMParser().parseFromString(videoHTML, 'text/html').body.firstChild;
|
||||
const parent = this.container.getElementsByClassName('dplayer-video-wrap')[0];
|
||||
parent.insertBefore(videoEle, parent.getElementsByTagName('div')[0]);
|
||||
|
|
|
|||
|
|
@ -247,6 +247,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dplayer-subtitle {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.dplayer-bezel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
|
|||
19
src/html.js
19
src/html.js
|
|
@ -1,19 +1,17 @@
|
|||
const svg = require('./svg.js');
|
||||
|
||||
const html = {
|
||||
main: (options, index, tran) => {
|
||||
let videos = ``;
|
||||
videos += html.video(true, options.video.pic, options.screenshot, options.preload, options.video.url);
|
||||
return `
|
||||
main: (options, index, tran) => `
|
||||
<div class="dplayer-mask"></div>
|
||||
<div class="dplayer-video-wrap">
|
||||
${videos}
|
||||
${html.video(true, options.video.pic, options.screenshot, options.preload, options.video.url, options.subtitle)}
|
||||
${options.logo ? `
|
||||
<div class="dplayer-logo"><img src="${options.logo}"></div>
|
||||
` : ``}
|
||||
<div class="dplayer-danmaku" style="${options.danmaku ? html.danmakumargin(options.danmaku.margin) : ``}">
|
||||
<div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>
|
||||
</div>
|
||||
<div class="dplayer-subtitle"></div>
|
||||
<div class="dplayer-bezel">
|
||||
<span class="dplayer-bezel-icon"></span>
|
||||
${options.danmaku ? `<span class="dplayer-danloading">${tran('Danmaku is loading')}</span>` : ``}
|
||||
|
|
@ -166,8 +164,7 @@ const html = {
|
|||
</div>
|
||||
</div>
|
||||
${html.contextmenuList(options.contextmenu, tran)}
|
||||
<div class="dplayer-notice"></div>`;
|
||||
},
|
||||
<div class="dplayer-notice"></div>`,
|
||||
|
||||
danmakumargin: (margin) => {
|
||||
let result = '';
|
||||
|
|
@ -199,7 +196,13 @@ const html = {
|
|||
return result;
|
||||
},
|
||||
|
||||
video: (current, pic, screenshot, preload, url) => `<video class="dplayer-video ${current ? `dplayer-video-current"` : ``}" ${pic ? `poster="${pic}"` : ``} webkit-playsinline playsinline ${screenshot ? `crossorigin="anonymous"` : ``} ${preload ? `preload="${preload}"` : ``} src="${url}"></video>`,
|
||||
video: (current, pic, screenshot, preload, url, subtitle) => {
|
||||
const enableSubtitle = subtitle && subtitle.type === 'webvtt';
|
||||
return `
|
||||
<video class="dplayer-video ${current ? `dplayer-video-current"` : ``}" ${pic ? `poster="${pic}"` : ``} webkit-playsinline playsinline ${screenshot || enableSubtitle ? `crossorigin="anonymous"` : ``} ${preload ? `preload="${preload}"` : ``} src="${url}">
|
||||
${enableSubtitle ? `<track kind="metadata" default src="${subtitle.url}"></track>` : ``}
|
||||
</video>`;
|
||||
},
|
||||
|
||||
setting: (tran) => ({
|
||||
'original': `
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ module.exports = (options) => {
|
|||
screenshot: false,
|
||||
hotkey: true,
|
||||
preload: 'auto',
|
||||
volume: '0.7',
|
||||
volume: 0.7,
|
||||
apiBackend: defaultApiBackend,
|
||||
video: {},
|
||||
contextmenu: []
|
||||
|
|
@ -28,11 +28,17 @@ module.exports = (options) => {
|
|||
options[defaultKey] = defaultOption[defaultKey];
|
||||
}
|
||||
}
|
||||
if (options.video && !options.video.hasOwnProperty('type')) {
|
||||
options.video.type = 'auto';
|
||||
if (options.video) {
|
||||
!options.video.type && (options.video.type = 'auto');
|
||||
}
|
||||
if (options.danmaku && !options.danmaku.hasOwnProperty('user')) {
|
||||
options.danmaku.user = 'DIYgod';
|
||||
if (options.danmaku) {
|
||||
!options.danmaku.user && (options.danmaku.user = 'DIYgod');
|
||||
}
|
||||
if (options.subtitle) {
|
||||
!options.subtitle.type && (options.subtitle.type = 'webvtt');
|
||||
!options.subtitle.fontSize && (options.subtitle.fontSize = '20px');
|
||||
!options.subtitle.bottom && (options.subtitle.bottom = '40px');
|
||||
!options.subtitle.color && (options.subtitle.color = '#fff');
|
||||
}
|
||||
|
||||
if (options.video.quality) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
class Subtitle {
|
||||
constructor (container, video, options) {
|
||||
this.container = container;
|
||||
this.video = video;
|
||||
this.options = options;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init () {
|
||||
this.container.style.fontSize = this.options.fontSize;
|
||||
this.container.style.bottom = this.options.bottom;
|
||||
this.container.style.color = this.options.color;
|
||||
|
||||
if (this.video.textTracks && this.video.textTracks[0]) {
|
||||
const track = this.video.textTracks[0];
|
||||
|
||||
track.oncuechange = () => {
|
||||
const cue = track.activeCues[0];
|
||||
if (cue) {
|
||||
this.container.innerHTML = '';
|
||||
const p = document.createElement('p');
|
||||
p.appendChild(cue.getCueAsHTML());
|
||||
this.container.appendChild(p);
|
||||
}
|
||||
else {
|
||||
this.container.innerHTML = '';
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Subtitle;
|
||||
Loading…
Reference in New Issue