subtitle button; subtitle events
This commit is contained in:
DIYgod
parent
6c36e1afd9
commit
c145ecfe90
|
|
@ -129,7 +129,8 @@
|
|||
'quality_start', 'quality_end',
|
||||
'destroy',
|
||||
'resize',
|
||||
'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
|
||||
'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel',
|
||||
'subtitle_show', 'subtitle_hide', 'subtitle_change'
|
||||
];
|
||||
var eventsEle = document.getElementById('events');
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "dplayer",
|
||||
"version": "1.12.0",
|
||||
"version": "1.13.0",
|
||||
"description": "Wow, such a lovely HTML5 danmaku video player",
|
||||
"main": "dist/DPlayer.min.js",
|
||||
"style": "dist/DPlayer.min.css",
|
||||
|
|
|
|||
|
|
@ -762,6 +762,29 @@ class DPlayer {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle subtitle
|
||||
*/
|
||||
if (this.options.subtitle) {
|
||||
const subtitleIcon = this.container.getElementsByClassName('dplayer-subtitle-icon')[0];
|
||||
const subtitleIn = subtitleIcon.getElementsByClassName('dplayer-icon-content')[0];
|
||||
|
||||
this.events.on('subtitle_show', () => {
|
||||
subtitleIcon.dataset.balloon = this.tran('Hide subtitle');
|
||||
subtitleIn.style.opacity = '';
|
||||
this.user.set('subtitle', 1);
|
||||
});
|
||||
this.events.on('subtitle_hide', () => {
|
||||
subtitleIcon.dataset.balloon = this.tran('Show subtitle');
|
||||
subtitleIn.style.opacity = '0.4';
|
||||
this.user.set('subtitle', 0);
|
||||
});
|
||||
|
||||
subtitleIcon.addEventListener('click', () => {
|
||||
this.subtitle.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
this.initVideo(this.video, this.quality && this.quality.type || this.options.video.type);
|
||||
|
||||
index++;
|
||||
|
|
@ -1001,7 +1024,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);
|
||||
this.subtitle = new Subtitle(this.container.getElementsByClassName('dplayer-subtitle')[0], this.video, this.options.subtitle, this.events);
|
||||
if (!this.user.get('subtitle')) {
|
||||
this.subtitle.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -256,6 +256,10 @@
|
|||
color: #fff;
|
||||
text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
|
||||
font-size: 20px;
|
||||
|
||||
&.dplayer-subtitle-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dplayer-bezel {
|
||||
|
|
@ -607,6 +611,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dplayer-subtitle-btn {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dplayer-setting {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ class Events {
|
|||
'quality_start', 'quality_end',
|
||||
'destroy',
|
||||
'resize',
|
||||
'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
|
||||
'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel',
|
||||
'subtitle_show', 'subtitle_hide', 'subtitle_change'
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,6 +135,13 @@ const html = {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
${options.subtitle ? `
|
||||
<div class="dplayer-subtitle-btn">
|
||||
<button class="dplayer-icon dplayer-subtitle-icon" data-balloon="${tran('Hide subtitle')}" data-balloon-pos="up">
|
||||
<span class="dplayer-icon-content">${icons.get('subtitle')}</span>
|
||||
</button>
|
||||
</div>
|
||||
` : ``}
|
||||
<div class="dplayer-setting">
|
||||
<button class="dplayer-icon dplayer-setting-icon" data-balloon="${tran('Setting')}" data-balloon-pos="up">
|
||||
<span class="dplayer-icon-content">${icons.get('setting')}</span>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,9 @@ const tranTxt = {
|
|||
'Web full screen': '页面全屏',
|
||||
'Send': '发送',
|
||||
'Screenshot': '截图',
|
||||
's': '秒'
|
||||
's': '秒',
|
||||
'Show subtitle': '显示字幕',
|
||||
'Hide subtitle': '隐藏字幕'
|
||||
},
|
||||
"zh-tw" : {
|
||||
'Danmaku is loading': '彈幕加載中',
|
||||
|
|
@ -83,6 +85,8 @@ const tranTxt = {
|
|||
'Web full screen': '頁面全屏',
|
||||
'Send': '發送',
|
||||
'Screenshot': '截圖',
|
||||
's': '秒'
|
||||
's': '秒',
|
||||
'Show subtitle': '顯示字幕',
|
||||
'Hide subtitle': '隱藏字幕'
|
||||
}
|
||||
};
|
||||
|
|
@ -81,6 +81,10 @@ module.exports = (options) => {
|
|||
camera: [
|
||||
'0 0 32 32',
|
||||
'M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z'
|
||||
],
|
||||
subtitle: [
|
||||
'0 0 32 32',
|
||||
'M26.667 5.333h-21.333c-0 0-0.001 0-0.001 0-1.472 0-2.666 1.194-2.666 2.666 0 0 0 0.001 0 0.001v-0 16c0 0 0 0.001 0 0.001 0 1.472 1.194 2.666 2.666 2.666 0 0 0.001 0 0.001 0h21.333c0 0 0.001 0 0.001 0 1.472 0 2.666-1.194 2.666-2.666 0-0 0-0.001 0-0.001v0-16c0-0 0-0.001 0-0.001 0-1.472-1.194-2.666-2.666-2.666-0 0-0.001 0-0.001 0h0zM5.333 16h5.333v2.667h-5.333v-2.667zM18.667 24h-13.333v-2.667h13.333v2.667zM26.667 24h-5.333v-2.667h5.333v2.667zM26.667 18.667h-13.333v-2.667h13.333v2.667z'
|
||||
]
|
||||
},
|
||||
iconsColor: '#ffffff',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
class Subtitle {
|
||||
constructor (container, video, options) {
|
||||
constructor (container, video, options, events) {
|
||||
this.container = container;
|
||||
this.video = video;
|
||||
this.options = options;
|
||||
this.events = events;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
|
@ -26,9 +27,29 @@ class Subtitle {
|
|||
else {
|
||||
this.container.innerHTML = '';
|
||||
}
|
||||
this.events.trigger('subtitle_change');
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
show () {
|
||||
this.container.classList.remove('dplayer-subtitle-hide');
|
||||
this.events.trigger('subtitle_show');
|
||||
}
|
||||
|
||||
hide () {
|
||||
this.container.classList.add('dplayer-subtitle-hide');
|
||||
this.events.trigger('subtitle_hide');
|
||||
}
|
||||
|
||||
toggle () {
|
||||
if (this.container.classList.contains('dplayer-subtitle-hide')) {
|
||||
this.show();
|
||||
}
|
||||
else {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Subtitle;
|
||||
|
|
@ -6,13 +6,15 @@ class User {
|
|||
opacity: 'dplayer-danmaku-opacity',
|
||||
volume: 'dplayer-volume',
|
||||
unlimited: 'dplayer-danmaku-unlimited',
|
||||
danmaku: 'dplayer-danmaku-show'
|
||||
danmaku: 'dplayer-danmaku-show',
|
||||
subtitle: 'dplayer-subtitle-show'
|
||||
};
|
||||
this.default = {
|
||||
opacity: 0.7,
|
||||
volume: player.options.volume || 0.7,
|
||||
unlimited: (player.options.danmaku && player.options.danmaku.unlimited ? 1 : 0) || 0,
|
||||
danmaku: 1
|
||||
danmaku: 1,
|
||||
subtitle: 1
|
||||
};
|
||||
this.data = {};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue