Fix mobile subtitle

packages/artplayer/src/events/hoverInit.js

@@ -11,7 +11,7 @@ export default function hoverInit(art, events) {
         },
         () => {
             removeClass($player, 'art-hover');
-            art.emit('hover');
+            art.emit('hover', false);
         },
     );
 }

packages/artplayer/src/player/fullscreenMix.js

@@ -31,7 +31,7 @@ export default function fullscreenMix(art) {
                     await screenfull.exit();
                     removeClass($player, 'art-fullscreen');
                     art.emit('resize');
-                    art.emit('fullscreen');
+                    art.emit('fullscreen', false);
                     notice.show = '';
                 }
             },
@@ -51,7 +51,7 @@ export default function fullscreenMix(art) {
                     notice.show = '';
                 } else {
                     $video.webkitExitFullscreen();
-                    art.emit('fullscreen');
+                    art.emit('fullscreen', false);
                     notice.show = '';
                 }
             },

packages/artplayer/src/player/fullscreenWebMix.js

@@ -24,7 +24,7 @@ export default function fullscreenWebMix(art) {
                 art.aspectRatioReset = true;
                 art.autoSize = art.option.autoSize;
                 art.emit('resize');
-                art.emit('fullscreenWeb');
+                art.emit('fullscreenWeb', false);
                 notice.show = '';
             }
         },

packages/artplayer/src/player/miniMix.js

@@ -87,7 +87,7 @@ export default function miniMix(art) {
                 art.playbackRate = false;
                 art.autoSize = option.autoSize;
                 art.notice.show = '';
-                art.emit('mini');
+                art.emit('mini', false);
             }
         },
     });

packages/artplayer/src/player/pipMix.js

@@ -34,7 +34,7 @@ function nativePip(art) {
     });
 
     proxy($video, 'leavepictureinpicture', () => {
-        art.emit('pip');
+        art.emit('pip', false);
     });
 }
 
@@ -54,7 +54,7 @@ function webkitPip(art) {
                 art.emit('pip', true);
             } else {
                 $video.webkitSetPresentationMode('inline');
-                art.emit('pip');
+                art.emit('pip', false);
             }
         },
     });

packages/artplayer/src/subtitle.js

@@ -1,4 +1,16 @@
-import { setStyle, setStyles, srtToVtt, vttToBlob, getExt, assToVtt, escape, errorHandle, createElement } from './utils';
+import {
+    setStyle,
+    setStyles,
+    srtToVtt,
+    vttToBlob,
+    getExt,
+    assToVtt,
+    escape,
+    remove,
+    append,
+    isMobile,
+    createElement,
+} from './utils';
 import Component from './utils/component';
 import validator from 'option-validator';
 import scheme from './scheme';
@@ -6,10 +18,19 @@ import scheme from './scheme';
 export default class Subtitle extends Component {
     constructor(art) {
         super(art);
-
         this.name = 'subtitle';
-
+        this.eventDestroy = () => null;
         this.init(art.option.subtitle);
+
+        art.on('fullscreen', (state) => {
+            if (!this.url || !isMobile) return;
+            const { $video } = this.art.template;
+            if (state && $video.webkitDisplayingFullscreen) {
+                this.createTrack('subtitles', this.url);
+            } else {
+                this.createTrack('metadata', this.url);
+            }
+        });
     }
 
     get url() {
@@ -58,32 +79,36 @@ export default class Subtitle extends Component {
         return subUrl;
     }
 
-    init(subtitleOption) {
-        validator(subtitleOption, scheme.subtitle);
-        if (!subtitleOption.url) return;
+    createTrack(kind, url) {
+        const { template, proxy } = this.art;
+        const { $video, $track } = template;
 
+        const $newTrack = createElement('track');
+        $newTrack.default = true;
+        $newTrack.kind = kind;
+        $newTrack.src = url;
+
+        this.eventDestroy();
+        remove($track);
+
+        append($video, $newTrack);
+        template.$track = $newTrack;
+        this.eventDestroy = proxy(this.textTrack, 'cuechange', () => this.update());
+    }
+
+    async init(subtitleOption) {
         const {
             notice,
-            events: { proxy },
-            template: { $subtitle, $video, $track },
+            template: { $subtitle },
         } = this.art;
 
-        if (!$track) {
-            const $track = createElement('track');
-            $track.default = true;
-            $track.kind = 'metadata';
-            $video.appendChild($track);
-            this.art.template.$track = $track;
-            proxy(this.textTrack, 'cuechange', this.update.bind(this));
-        }
-
+        validator(subtitleOption, scheme.subtitle);
+        if (!subtitleOption.url) return;
         this.style(subtitleOption.style);
 
-        errorHandle(window.fetch, 'fetch not support');
         return fetch(subtitleOption.url)
             .then((response) => response.arrayBuffer())
             .then((buffer) => {
-                errorHandle(window.TextDecoder, 'TextDecoder not support');
                 const decoder = new TextDecoder(subtitleOption.encoding);
                 const text = decoder.decode(buffer);
 
@@ -103,7 +128,7 @@ export default class Subtitle extends Component {
                 $subtitle.innerHTML = '';
                 if (this.url === subUrl) return subUrl;
                 URL.revokeObjectURL(this.url);
-                this.art.template.$track.src = subUrl;
+                this.createTrack('metadata', subUrl);
                 this.art.emit('subtitleSwitch', subUrl);
                 return subUrl;
             })

packages/artplayer/src/template.js

@@ -34,7 +34,9 @@ export default class Template {
     static get html() {
         return `
           <div class="art-video-player art-subtitle-show art-layer-show art-control-show art-mask-show">
-            <video class="art-video"></video>
+            <video class="art-video">
+              <track default kind="metadata"></track>
+            </video>
             <div class="art-poster"></div>
             <div class="art-subtitle"></div>
             <div class="art-danmuku"></div>
@@ -108,6 +110,7 @@ export default class Template {
 
         this.$player = this.query('.art-video-player');
         this.$video = this.query('.art-video');
+        this.$track = this.query('track');
         this.$poster = this.query('.art-poster');
         this.$subtitle = this.query('.art-subtitle');
         this.$danmuku = this.query('.art-danmuku');