webvtt subtitle

demo/index.html

@@ -22,7 +22,10 @@ <h2 id="quick-start">Quick Start</h2>
                 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',
@@ -60,6 +63,13 @@ <h2 id="options">Options</h2>
                     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/',

package.json

@@ -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",

src/DPlayer.js

@@ -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;
 
@@ -998,6 +999,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) {
@@ -1013,7 +1018,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]);

src/DPlayer.scss

@@ -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;

src/html.js

@@ -1,17 +1,15 @@
 const html = {
-    main: (options, index, tran, icons) => {
-        let videos = ``;
-        videos += html.video(true, options.video.pic, options.screenshot, options.preload, options.video.url);
-        return `
+    main: (options, index, tran, icons) => `
         <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>` : ``}
@@ -164,8 +162,7 @@ const html = {
             </div>
         </div>
         ${html.contextmenuList(options.contextmenu, tran)}
-        <div class="dplayer-notice"></div>`;
-    },
+        <div class="dplayer-notice"></div>`,
 
     danmakumargin: (margin) => {
         let result = '';
@@ -197,7 +194,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, icons) => ({
         'original': `

src/options.js

@@ -18,7 +18,7 @@ module.exports = (options) => {
         screenshot: false,
         hotkey: true,
         preload: 'auto',
-        volume: '0.7',
+        volume: 0.7,
         apiBackend: defaultApiBackend,
         video: {},
         icons: {
@@ -91,11 +91,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) {

src/subtitle.js

@@ -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;