diff --git a/README.md b/README.md index 8163d17..2dd1417 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ var option = { autoplay: false, // Optional, autoplay video, not supported by mobile browsers theme: '#FADFA3', // Optional, theme color, default: #b7daff loop: true, // Optional, loop play music, default: true + lang: zh, // Optional, language, `zh` for Chinese, `en` for English, default: en video: { // Required, video info url: '若能绽放光芒.mp4', // Required, video url pic: '若能绽放光芒.png' // Optional, music picture diff --git a/demo/index.html b/demo/index.html index 57bec0d..aa27f0d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -61,6 +61,7 @@ autoplay: false, theme: '#FADFA3', loop: true, + lang: 'zh', video: { url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4', pic: 'http://devtest.qiniudn.com/若能绽放光芒.png' diff --git a/src/DPlayer.js b/src/DPlayer.js index 5656788..6773284 100644 --- a/src/DPlayer.js +++ b/src/DPlayer.js @@ -20,7 +20,8 @@ class DPlayer { 'right': ['0 0 32 32', 'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z'], 'comment': ['0 0 32 32', 'M27.128 0.38h-22.553c-2.336 0-4.229 1.825-4.229 4.076v16.273c0 2.251 1.893 4.076 4.229 4.076h4.229v-2.685h8.403l-8.784 8.072 1.566 1.44 7.429-6.827h9.71c2.335 0 4.229-1.825 4.229-4.076v-16.273c0-2.252-1.894-4.076-4.229-4.076zM28.538 19.403c0 1.5-1.262 2.717-2.819 2.717h-8.36l-0.076-0.070-0.076 0.070h-11.223c-1.557 0-2.819-1.217-2.819-2.717v-13.589c0-1.501 1.262-2.718 2.819-2.718h19.734c1.557 0 2.819-0.141 2.819 1.359v14.947zM9.206 10.557c-1.222 0-2.215 0.911-2.215 2.036s0.992 2.035 2.215 2.035c1.224 0 2.216-0.911 2.216-2.035s-0.992-2.036-2.216-2.036zM22.496 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.224 0 2.215-0.911 2.215-2.035s-0.991-2.036-2.215-2.036zM15.852 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.222 0 2.215-0.911 2.215-2.035s-0.992-2.036-2.215-2.036z'], 'comment-off': ['0 0 32 32', 'M27.090 0.131h-22.731c-2.354 0-4.262 1.839-4.262 4.109v16.401c0 2.269 1.908 4.109 4.262 4.109h4.262v-2.706h8.469l-8.853 8.135 1.579 1.451 7.487-6.88h9.787c2.353 0 4.262-1.84 4.262-4.109v-16.401c0-2.27-1.909-4.109-4.262-4.109v0zM28.511 19.304c0 1.512-1.272 2.738-2.841 2.738h-8.425l-0.076-0.070-0.076 0.070h-11.311c-1.569 0-2.841-1.226-2.841-2.738v-13.696c0-1.513 1.272-2.739 2.841-2.739h19.889c1.569 0 2.841-0.142 2.841 1.37v15.064z'], - 'send': ['0 0 32 32', 'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z'] + 'send': ['0 0 32 32', 'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z'], + 'menu': ['0 0 22 32', 'M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z'] }; this.getSVG = (type) => { return ` @@ -42,7 +43,8 @@ class DPlayer { element: document.getElementsByClassName('dplayer')[0], autoplay: false, theme: '#b7daff', - loop: false + loop: false, + lang: 'en' }; for (let defaultKey in defaultOption) { if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) { @@ -53,6 +55,30 @@ class DPlayer { this.option = option; this.loop = option.loop; + this.tranZH = { + 'Danmaku is loading': '弹幕加载中', + 'Top': '顶部', + 'Bottom': '底部', + 'Rolling': '滚动', + 'Input danmaku, hit Enter': '输入弹幕，回车发送', + 'About author': '关于作者', + 'DPlayer feedback': '播放器意见反馈', + 'About DPlayer': '关于 DPlay 播放器', + 'Loop': '洗脑循环', + 'Speed': '速度', + 'Opacity for danmaku': '弹幕透明度', + 'Normal': '正常', + 'Please input danmaku!': '要输入弹幕内容啊喂！' + }; + this.getTran = (text) => { + if (this.option.lang === 'en') { + return text; + } + else if (this.option.lang === 'zh') { + return this.tranZH[text]; + } + }; + /** * Parse second to 00:00 format * @@ -112,7 +138,7 @@ class DPlayer {
- ${this.option.danmaku ? `弹幕加载中` : ``} + ${this.option.danmaku ? `${this.getTran('Danmaku is loading')}` : ``} @@ -170,24 +196,11 @@ class DPlayer { + `
-
- - - -
+
设置弹幕颜色
- +
+
+
设置弹幕类型
+ +
- + @@ -248,9 +268,9 @@ class DPlayer {
-
关于作者
-
播放器意见反馈
-
关于 DPlayer 播放器
+
${this.getTran('About author')}
+
${this.getTran('DPlayer feedback')}
+
${this.getTran('About DPlayer')}
`; @@ -513,20 +533,20 @@ class DPlayer { const settingHTML = { 'original': `
- 洗脑循环 + ${this.getTran('Loop')}
- 速度 + ${this.getTran('Speed')}
` + this.getSVG('right') + `
- 弹幕透明度 + ${this.getTran('Opacity for danmaku')}
@@ -543,7 +563,7 @@ class DPlayer { 0.75
- 正常 + ${this.getTran('Normal')}
1.25 @@ -900,7 +920,7 @@ class DPlayer { // text can't be empty if (!commentInput.value.replace(/^\s+|\s+$/g, '')) { - alert('要输入弹幕内容啊喂！'); + alert(this.getTran('Please input danmaku!')); return; } diff --git a/src/DPlayer.scss b/src/DPlayer.scss index f04c5ce..6024c44 100644 --- a/src/DPlayer.scss +++ b/src/DPlayer.scss @@ -373,6 +373,11 @@ } } + #dplayer-menu { + stroke: #ddd; + stroke-width: 1px; + } + .dplayer-time { line-height: 38px; color: #eee; @@ -629,12 +634,12 @@ position: absolute; background: #fff; bottom: 40px; - left: -82.5px; + left: -93px; box-shadow: 0 0 25px rgba(0,0,0,.3); border-radius: 4px; - padding: 5px; + padding: 10px 10px 16px; font-size: 14px; - width: 193px; + width: 204px; transition: all .3s ease-in-out; transform: scale(0); @@ -661,25 +666,44 @@ cursor: pointer; } + .dplayer-comment-setting-title { + font-size: 14px; + color: #555; + padding: 6px; + } + .dplayer-comment-setting-type { - width: 44px; - float: left; - margin-right: 5px; + font-size: 0; - span { - padding: 4px 6px; - line-height: 16px; - display: inline-block; - border-radius: 4px; - - &:hover { - animation: my-face 5s infinite ease-in-out; + label { + &:nth-child(2) { + span { + border-radius: 4px 0 0 4px; + } + } + &:nth-child(4) { + span { + border-radius: 0 4px 4px 0; + } } } + span { + width: 33%; + padding: 4px 6px; + line-height: 16px; + display: inline-block; + font-size: 12px; + color: #555; + border: 1px solid #E4E4E6; + margin-right: -1px; + box-sizing: border-box; + text-align: center; + cursor: pointer; + } + input:checked+span { - background: #aaa; - color: #FFF; + background: #E4E4E6; } } @@ -693,10 +717,10 @@ } span { - width: 24px; - height: 24px; + width: 22px; + height: 22px; display: inline-block; - border-radius: 7px; + border-radius: 50%; box-sizing: border-box; cursor: pointer;