修改字幕乱码

packages/artplayer/src/index.js

@@ -148,6 +148,7 @@ export default class Artplayer extends Emitter {
             subtitle: {
                 url: '',
                 style: {},
+                encoding: 'utf-8',
                 bilingual: false,
             },
             moreVideoAttr: {

packages/artplayer/src/plugins/localSubtitle.js

@@ -52,10 +52,10 @@ export default function localSubtitle(art) {
                     <div class="art-upload-value"></div>
                 </div>
             `,
-            mounted: $setting => {
+            mounted: ($setting) => {
                 const $btn = query('.art-upload-btn', $setting);
                 const $value = query('.art-upload-value', $setting);
-                art.on('localSubtitle', file => {
+                art.on('localSubtitle', (file) => {
                     $value.textContent = file.name;
                     $value.title = file.name;
                 });

packages/artplayer/src/scheme/index.js

@@ -90,6 +90,7 @@ export default {
     subtitle: {
         url: 'string',
         style: 'object',
+        encoding: 'string',
         bilingual: 'boolean',
     },
     moreVideoAttr: 'object',

packages/artplayer/src/style/subtitle.scss

@@ -15,11 +15,17 @@
         p {
             word-break: break-all;
             height: fit-content;
-            margin: 10px 0 0;
+            margin: 5px 0 0;
             line-height: 1;
         }
     }
 
+    .art-bilingual {
+        p:nth-child(2) {
+            font-size: 0.6em;
+        }
+    }
+
     &.art-subtitle-show {
         .art-subtitle {
             display: block;

packages/artplayer/src/subtitle.js

@@ -35,6 +35,14 @@ export default class Subtitle extends Component {
         return this.textTrack.activeCues[0];
     }
 
+    get encoding() {
+        return this.art.option.subtitle.encoding;
+    }
+
+    set encoding(value) {
+        this.art.option.subtitle.encoding = value;
+    }
+
     style(key, value) {
         const { $subtitle } = this.art.template;
         if (typeof key === 'object') {
@@ -55,9 +63,9 @@ export default class Subtitle extends Component {
         }
     }
 
-    switch(url, name, ext) {
+    switch(url, name, ext, encoding) {
         const { i18n, notice } = this.art;
-        return this.init(url, ext).then((subUrl) => {
+        return this.init(url, ext, encoding).then((subUrl) => {
             if (name) {
                 notice.show = `${i18n.get('Switch subtitle')}: ${name}`;
             }
@@ -66,10 +74,11 @@ export default class Subtitle extends Component {
         });
     }
 
-    init(url, ext) {
+    init(url, ext, encoding) {
         const {
             notice,
             events: { proxy },
+            option: { subtitle },
             template: { $subtitle, $video, $track },
         } = this.art;
 
@@ -83,8 +92,11 @@ export default class Subtitle extends Component {
         }
 
         return fetch(url)
-            .then((response) => response.text())
-            .then((text) => {
+            .then((response) => response.arrayBuffer())
+            .then((buffer) => {
+                const decoder = new TextDecoder(encoding || subtitle.encoding);
+                const text = decoder.decode(buffer);
+
                 this.art.emit('subtitleLoad', url);
                 switch (ext || getExt(url)) {
                     case 'srt':

packages/artplayer/types/artplayer.d.ts

@@ -70,6 +70,7 @@ export default class Artplayer {
         subtitle?: {
             url: string;
             style: object;
+            encoding: string,
             bilingual: boolean,
         };
         moreVideoAttr?: object;