优化手机端UI

docs/assets/css/mobile.css

@@ -4,11 +4,11 @@ html, body {
 
 .container {
     height: 100%;
-    padding: 20px;
+    padding: 10px;
     box-sizing: border-box;
 }
 
 .artplayer-app {
     width: 100%;
-    height: 100%;
+    height: 50%;
 }

docs/assets/js/mobile.js

@@ -3,10 +3,45 @@ var url = 'https://zhw2590582.github.io/assets-cdn';
 var art = new Artplayer({
     container: '.artplayer-app',
     url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
+    autoSize: true,
+    loop: true,
+    mutex: true,
+    theme: '#ffad00',
+    fullscreenWeb: true,
+    miniProgressBar: true,
+    lang: navigator.language.toLowerCase(),
     moreVideoAttr: {
         'webkit-playsinline': true,
         playsInline: true,
+        crossOrigin: 'anonymous',
     },
+    subtitle: {
+        url: url + '/subtitle/one-more-time-one-more-chance.srt',
+        style: {
+            color: '#03A9F4',
+            fontSize: '14px',
+        },
+    },
+    layers: [
+        {
+            html: `<img style="width: 50px" src="${url}/image/your-name.png">`,
+            click: function () {
+                console.info('You clicked on the custom layer');
+            },
+            style: {
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                opacity: '.9',
+            },
+        },
+    ],
+    icons: {
+        loading: '<img src="./assets/img/ploading.gif">',
+        state: '<img src="./assets/img/state.png">',
+    },
+    whitelist: ['*'],
     // whitelist: ['iPhone'],
     // whitelist: [(ua)=>{ return /iPhone OS 11/gi.test(ua); }],
     // whitelist: [/iPhone OS 11/gi]

docs/document/README.md

@@ -123,7 +123,7 @@ var art = new Artplayer({
     url: url + '/video/one-more-time-one-more-chance-480p.flv',
     type: 'flv',
     customType: {
-        flv: function(video, url, art) {
+        flv: function (video, url, art) {
             // video: The video element
             // url: The video url
             // art: The Artplayer instance
@@ -625,7 +625,7 @@ var art = new Artplayer({
             name: 'preview',
             position: 'right',
             html: 'OPEN VIDEO',
-            mounted: $preview => {
+            mounted: ($preview) => {
                 art.plugins.localVideo.attach($preview);
             },
         },
@@ -653,7 +653,7 @@ var art = new Artplayer({
             name: 'preview',
             position: 'right',
             html: 'OPEN SUBTITLE',
-            mounted: $preview => {
+            mounted: ($preview) => {
                 art.plugins.localSubtitle.attach($preview);
             },
         },
@@ -682,7 +682,7 @@ var art = new Artplayer({
 // For example, when the ratio is equal to 0.3, it means that every 10 seconds of sampling time, it is blocked for three seconds.
 
 let notice = false;
-art.on('networkMonitor', ratio => {
+art.on('networkMonitor', (ratio) => {
     if (ratio >= 0.5 && !notice) {
         notice = true;
         console.log('Current network condition is not good');
@@ -920,7 +920,7 @@ var art = new Artplayer({
     contextmenu: [
         {
             html: 'Custom menu',
-            click: function(contextmenu) {
+            click: function (contextmenu) {
                 console.info('You clicked on the custom menu');
                 contextmenu.show = false;
             },
@@ -962,7 +962,7 @@ var art = new Artplayer({
             index: 10,
             html: 'myController',
             tooltip: 'This is my controller',
-            click: function() {
+            click: function () {
                 console.log('myController');
             },
         },
@@ -992,7 +992,7 @@ var art = new Artplayer({
             return {
                 // This exposes plugin properties or methods for others to use. Like:
                 something: 'something',
-                doSomething: function() {
+                doSomething: function () {
                     console.info('Do something here...');
                 },
             };
@@ -1011,6 +1011,8 @@ art.plugins.myPlugin.doSomething();
 | propertie   | type       | Description                                      |
 | ----------- | ---------- | ------------------------------------------------ |
 | `isFocus`   | `Boolean`  | Return the focus state                           |
+| `ua`        | `String`   | The user agent                                   |
+| `isMobile`  | `boolean`  | Whether mobile access                            |
 | `isDestroy` | `Boolean`  | Return the destroy state                         |
 | `option`    | `Object`   | Return the merge option                          |
 | `destroy`   | `Function` | Destroy instance, will not remove dom by default |
@@ -1028,7 +1030,7 @@ console.log('isFocus', art.isFocus);
 console.log('isDestroy', art.isDestroy);
 console.log('option', art.option);
 
-setTimeout(function() {
+setTimeout(function () {
     // remove dom
     art.destroy();
 
@@ -1170,17 +1172,16 @@ var art = new Artplayer({
 });
 
 // Add a hotkey
-art.hotkey.add(27, function(event) {
+art.hotkey.add(27, function (event) {
     console.log('You pressed esc button');
 });
 ```
 
 ## whitelist
 
-| propertie  | type      | Description           |
-| ---------- | --------- | --------------------- |
-| `ua`       | `string`  | The userAgent         |
-| `isMobile` | `boolean` | Whether mobile access |
+| propertie | type      | Description                           |
+| --------- | --------- | ------------------------------------- |
+| `state`   | `Boolean` | Whether to enable the UI on the phone |
 
 ## notice
 
@@ -1226,7 +1227,7 @@ var art = new Artplayer({
 });
 
 var target = document.querySelector('body');
-art.events.proxy(target, 'click', function(e) {
+art.events.proxy(target, 'click', function (e) {
     console.log('body click');
 });
 ```
@@ -1288,7 +1289,7 @@ art.controls.add({
     index: 10,
     html: 'myController',
     tooltip: 'This is my controller',
-    click: function() {
+    click: function () {
         console.log('myController');
     },
 });
@@ -1316,7 +1317,7 @@ var art = new Artplayer({
 
 art.contextmenu.add({
     html: 'Custom menu',
-    click: function(contextmenu) {
+    click: function (contextmenu) {
         console.info('You clicked on the custom menu');
         contextmenu.show = false;
     },
@@ -1349,7 +1350,7 @@ var art = new Artplayer({
             position: 'right',
             index: 10,
             html: 'subtitle 01',
-            click: function() {
+            click: function () {
                 art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt subtitle name');
             },
         },
@@ -1357,7 +1358,7 @@ var art = new Artplayer({
             position: 'right',
             index: 20,
             html: 'subtitle 02',
-            click: function() {
+            click: function () {
                 art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt', 'vtt subtitle name');
             },
         },
@@ -1382,10 +1383,10 @@ var art = new Artplayer({
     url: url + '/video/one-more-time-one-more-chance-480p.mp4',
 });
 
-art.on('ready', function() {
+art.on('ready', function () {
     // Show the loading
     art.loading.show = true;
-    setTimeout(function() {
+    setTimeout(function () {
         // Hide the loading
         art.loading.show = false;
     }, 5000);
@@ -1409,10 +1410,10 @@ var art = new Artplayer({
     url: url + '/video/one-more-time-one-more-chance-480p.mp4',
 });
 
-art.on('ready', function() {
+art.on('ready', function () {
     // Show the mask
     art.mask.show = true;
-    setTimeout(function() {
+    setTimeout(function () {
         // Hide the mask
         art.mask.show = false;
     }, 5000);
@@ -1440,7 +1441,7 @@ var art = new Artplayer({
     setting: true,
 });
 
-art.on('ready', function() {
+art.on('ready', function () {
     // Add a setting
     art.setting.add({
         html: 'Your Setting',
@@ -1449,7 +1450,7 @@ art.on('ready', function() {
 
     // Show the setting
     art.setting.show = true;
-    setTimeout(function() {
+    setTimeout(function () {
         // Hide the setting
         art.setting.show = false;
     }, 5000);
@@ -1482,7 +1483,7 @@ art.plugins.add(function myPlugin(art) {
     return {
         // This exposes plugin properties or methods for others to use. Like:
         something: 'something',
-        doSomething: function() {
+        doSomething: function () {
             console.info('Do something here...');
         },
     };
@@ -1513,7 +1514,7 @@ All properties are read only
 # Event
 
 ```js
-art.on('ready', function(args) {
+art.on('ready', function (args) {
     console.log('The player can play');
 });
 ```
@@ -1559,7 +1560,7 @@ You can use all the native events of video directly: [MDN web docs - Media event
 But be careful to add the `video` prefix in front of the event:
 
 ```js
-art.on('video:canplay', function(event) {
+art.on('video:canplay', function (event) {
     console.log(event);
 });
 ```
@@ -1653,7 +1654,7 @@ var art = new Artplayer({
     autoplay: true,
     url: url + '/video/one-more-time-one-more-chance-480p.flv',
     customType: {
-        flv: function(video, url) {
+        flv: function (video, url) {
             const flvPlayer = flvjs.createPlayer({
                 type: 'flv',
                 url: url,
@@ -1677,7 +1678,7 @@ var art = new Artplayer({
     autoplay: true,
     url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
     customType: {
-        m3u8: function(video, url) {
+        m3u8: function (video, url) {
             var hls = new Hls();
             hls.loadSource(url);
             hls.attachMedia(video);
@@ -1698,7 +1699,7 @@ var art = new Artplayer({
     autoplay: true,
     url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
     customType: {
-        mpd: function(video, url) {
+        mpd: function (video, url) {
             var player = dashjs.MediaPlayer().create();
             player.initialize(video, url, true);
         },
@@ -1718,7 +1719,7 @@ var art = new Artplayer({
     autoplay: true,
     url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
     customType: {
-        mpd: function(video, url) {
+        mpd: function (video, url) {
             shaka.polyfill.installAll();
             var player = new shaka.Player(video);
             player.load(url);
@@ -1741,10 +1742,10 @@ var art = new Artplayer({
         'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
     type: 'torrent',
     customType: {
-        torrent: function(video, url, art) {
+        torrent: function (video, url, art) {
             var client = new WebTorrent();
             art.loading.show = true;
-            client.add(url, function(torrent) {
+            client.add(url, function (torrent) {
                 var file = torrent.files[0];
                 file.renderTo(video, {
                     autoplay: true,

docs/uncompiled/artplayer.js

@@ -150,7 +150,7 @@
   var css$1 = ".art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZpZGVvLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsNkJBQ0UsaUJBQWtCLENBQ2xCLFVBQVcsQ0FDWCxNQUFPLENBQ1AsS0FBTSxDQUNOLE9BQVEsQ0FDUixRQUFTLENBQ1QsVUFBVyxDQUNYLFdBQVksQ0FDWixxQkFBc0IsQ0FDdEIsY0FBaUIiLCJmaWxlIjoidmlkZW8uc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5hcnQtdmlkZW8tcGxheWVyIC5hcnQtdmlkZW8ge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHotaW5kZXg6IDEwO1xuICBsZWZ0OiAwO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICMwMDA7XG4gIGN1cnNvcjogcG9pbnRlcjsgfVxuIl19 */";
   styleInject(css$1);
 
-  var css$2 = ".art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0}.art-video-player.art-subtitle-show .art-subtitle{display:block}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN1YnRpdGxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0NBQ0UsWUFBYSxDQUNiLGlCQUFrQixDQUNsQixVQUFXLENBQ1gsV0FBWSxDQUNaLFVBQVcsQ0FDWCxjQUFlLENBQ2YsaUJBQWtCLENBQ2xCLFVBQVcsQ0FDWCxjQUFlLENBQ2YsbUJBQW9CLENBQ3BCLHlDQUFtRCxDQUNuRCxrQ0FDRSxvQkFBcUIsQ0FDckIsMEJBQW1CLENBQW5CLHVCQUFtQixDQUFuQixrQkFBbUIsQ0FDbkIsWUFBZSxDQUVuQixrREFDRSxhQUFnQiIsImZpbGUiOiJzdWJ0aXRsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFydC12aWRlby1wbGF5ZXIgLmFydC1zdWJ0aXRsZSB7XG4gIGRpc3BsYXk6IG5vbmU7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogMjA7XG4gIGJvdHRvbTogNDBweDtcbiAgd2lkdGg6IDEwMCU7XG4gIHBhZGRpbmc6IDAgMjBweDtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAyMHB4O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgdGV4dC1zaGFkb3c6IDAuNXB4IDAuNXB4IDAuNXB4IHJnYmEoMCwgMCwgMCwgMC41KTsgfVxuICAuYXJ0LXZpZGVvLXBsYXllciAuYXJ0LXN1YnRpdGxlIHAge1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLWFsbDtcbiAgICBoZWlnaHQ6IGZpdC1jb250ZW50O1xuICAgIG1hcmdpbjogNXB4IDA7IH1cblxuLmFydC12aWRlby1wbGF5ZXIuYXJ0LXN1YnRpdGxlLXNob3cgLmFydC1zdWJ0aXRsZSB7XG4gIGRpc3BsYXk6IGJsb2NrOyB9XG4iXX0= */";
+  var css$2 = ".art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:10px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:40px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN1YnRpdGxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0NBQ0UsWUFBYSxDQUNiLGlCQUFrQixDQUNsQixVQUFXLENBQ1gsV0FBWSxDQUNaLFVBQVcsQ0FDWCxjQUFlLENBQ2YsaUJBQWtCLENBQ2xCLFVBQVcsQ0FDWCxjQUFlLENBQ2YsbUJBQW9CLENBQ3BCLHlDQUFtRCxDQUNuRCxrQ0FDRSxvQkFBcUIsQ0FDckIsMEJBQW1CLENBQW5CLHVCQUFtQixDQUFuQixrQkFBbUIsQ0FDbkIsWUFBZSxDQUVuQixrREFDRSxhQUFnQixDQUVsQixpREFDRSxXQUFjIiwiZmlsZSI6InN1YnRpdGxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuYXJ0LXZpZGVvLXBsYXllciAuYXJ0LXN1YnRpdGxlIHtcbiAgZGlzcGxheTogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiAyMDtcbiAgYm90dG9tOiAxMHB4O1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogMCAyMHB4O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGNvbG9yOiAjZmZmO1xuICBmb250LXNpemU6IDIwcHg7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB0ZXh0LXNoYWRvdzogMC41cHggMC41cHggMC41cHggcmdiYSgwLCAwLCAwLCAwLjUpOyB9XG4gIC5hcnQtdmlkZW8tcGxheWVyIC5hcnQtc3VidGl0bGUgcCB7XG4gICAgd29yZC1icmVhazogYnJlYWstYWxsO1xuICAgIGhlaWdodDogZml0LWNvbnRlbnQ7XG4gICAgbWFyZ2luOiA1cHggMDsgfVxuXG4uYXJ0LXZpZGVvLXBsYXllci5hcnQtc3VidGl0bGUtc2hvdyAuYXJ0LXN1YnRpdGxlIHtcbiAgZGlzcGxheTogYmxvY2s7IH1cblxuLmFydC12aWRlby1wbGF5ZXIuYXJ0LWNvbnRyb2wtc2hvdyAuYXJ0LXN1YnRpdGxlIHtcbiAgYm90dG9tOiA0MHB4OyB9XG4iXX0= */";
   styleInject(css$2);
 
   var css$3 = ".art-video-player .art-danmuku{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRhbm11a3Uuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSwrQkFDRSxpQkFBa0IsQ0FDbEIsVUFBVyxDQUNYLE1BQU8sQ0FDUCxLQUFNLENBQ04sT0FBUSxDQUNSLFFBQVMsQ0FDVCxVQUFXLENBQ1gsV0FBWSxDQUNaLGVBQWdCLENBQ2hCLG1CQUFzQiIsImZpbGUiOiJkYW5tdWt1LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuYXJ0LXZpZGVvLXBsYXllciAuYXJ0LWRhbm11a3Uge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHotaW5kZXg6IDMwO1xuICBsZWZ0OiAwO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvaW50ZXItZXZlbnRzOiBub25lOyB9XG4iXX0= */";
@@ -834,24 +834,20 @@
   };
 
   var Whitelist = function Whitelist(art) {
-    var _this = this;
-
     classCallCheck(this, Whitelist);
 
     var kindOf = art.constructor.kindOf,
         whitelist = art.option.whitelist;
-    this.ua = userAgent;
-    this.isMobile = isMobile();
-    this.state = !this.isMobile || whitelist.some(function (item) {
+    this.state = !art.isMobile || whitelist.some(function (item) {
       switch (kindOf(item)) {
         case 'string':
-          return _this.ua.indexOf(item) > -1;
+          return item === '*' || art.ua.indexOf(item) > -1;
 
         case 'function':
-          return item(_this.ua);
+          return item(art.ua);
 
         case 'regexp':
-          return item.test(_this.ua);
+          return item.test(art.ua);
 
         default:
           return false;
@@ -899,11 +895,10 @@
         var _this$art$option = this.art.option,
             theme = _this$art$option.theme,
             backdrop = _this$art$option.backdrop;
-        this.$container.innerHTML = "\n          <div class=\"art-undercover\"></div>\n          <div class=\"art-video-player art-subtitle-show art-layer-show\" style=\"--theme: ".concat(theme, "\">\n            <video class=\"art-video\">\n              <track default kind=\"metadata\"></track>\n            </video>\n            <div class=\"art-subtitle\"></div>\n            <div class=\"art-danmuku\"></div>\n            <div class=\"art-layers\"></div>\n            <div class=\"art-mask\">\n              <div class=\"art-state\"></div>\n            </div>\n            <div class=\"art-bottom\">\n              <div class=\"art-progress\"></div>\n              <div class=\"art-controls\">\n                <div class=\"art-controls-left\"></div>\n                <div class=\"art-controls-right\"></div>\n              </div>\n            </div>\n            <div class=\"art-loading\"></div>\n            <div class=\"art-notice\">\n              <div class=\"art-notice-inner\"></div>\n            </div>\n            <div class=\"art-settings\">\n              <div class=\"art-setting-inner\">\n                <div class=\"art-setting-body\"></div>\n              </div>\n            </div>\n            <div class=\"art-info\">\n              <div class=\"art-info-panel\">\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Player version:</div>\n                  <div class=\"art-info-content\">3.5.4</div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video url:</div>\n                  <div class=\"art-info-content\" data-video=\"src\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video volume:</div>\n                  <div class=\"art-info-content\" data-video=\"volume\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video time:</div>\n                  <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video duration:</div>\n                  <div class=\"art-info-content\" data-video=\"duration\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video resolution:</div>\n                  <div class=\"art-info-content\">\n                    <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"art-info-close\">[x]</div>\n            </div>\n            <div class=\"art-pip-header\">\n              <div class=\"art-pip-title\"></div>\n              <div class=\"art-pip-close\">\xD7</div>\n            </div>\n            <div class=\"art-contextmenus\"></div>\n          </div>\n        ");
+        this.$container.innerHTML = "\n          <div class=\"art-undercover\"></div>\n          <div class=\"art-video-player art-subtitle-show art-layer-show\" style=\"--theme: ".concat(theme, "\">\n            <video class=\"art-video\"></video>\n            <div class=\"art-subtitle\"></div>\n            <div class=\"art-danmuku\"></div>\n            <div class=\"art-layers\"></div>\n            <div class=\"art-mask\">\n              <div class=\"art-state\"></div>\n            </div>\n            <div class=\"art-bottom\">\n              <div class=\"art-progress\"></div>\n              <div class=\"art-controls\">\n                <div class=\"art-controls-left\"></div>\n                <div class=\"art-controls-right\"></div>\n              </div>\n            </div>\n            <div class=\"art-loading\"></div>\n            <div class=\"art-notice\">\n              <div class=\"art-notice-inner\"></div>\n            </div>\n            <div class=\"art-settings\">\n              <div class=\"art-setting-inner\">\n                <div class=\"art-setting-body\"></div>\n              </div>\n            </div>\n            <div class=\"art-info\">\n              <div class=\"art-info-panel\">\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Player version:</div>\n                  <div class=\"art-info-content\">3.5.4</div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video url:</div>\n                  <div class=\"art-info-content\" data-video=\"src\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video volume:</div>\n                  <div class=\"art-info-content\" data-video=\"volume\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video time:</div>\n                  <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video duration:</div>\n                  <div class=\"art-info-content\" data-video=\"duration\"></div>\n                </div>\n                <div class=\"art-info-item\">\n                  <div class=\"art-info-title\">Video resolution:</div>\n                  <div class=\"art-info-content\">\n                    <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"art-info-close\">[x]</div>\n            </div>\n            <div class=\"art-pip-header\">\n              <div class=\"art-pip-title\"></div>\n              <div class=\"art-pip-close\">\xD7</div>\n            </div>\n            <div class=\"art-contextmenus\"></div>\n          </div>\n        ");
         this.$undercover = this.query('.art-undercover');
         this.$player = this.query('.art-video-player');
         this.$video = this.query('.art-video');
-        this.$track = this.query('.art-video track');
         this.$subtitle = this.query('.art-subtitle');
         this.$danmuku = this.query('.art-danmuku');
         this.$bottom = this.query('.art-bottom');
@@ -1173,6 +1168,7 @@
         $video = _art$template.$video,
         i18n = art.i18n,
         notice = art.notice;
+    var isReady = false;
     var reconnectTime = 0;
     var maxReconnectTime = 5;
     proxy($video, 'click', function () {
@@ -1190,9 +1186,14 @@
       art.loading.show = false;
     });
     art.once('video:canplay', function () {
+      art.loading.show = false;
       art.controls.show = true;
       art.mask.show = true;
-      art.emit('ready');
+
+      if (!isReady) {
+        art.emit('ready');
+        isReady = true;
+      }
     }); // art.on('video:canplaythrough', () => {
     // });
     // art.on('video:durationchange', () => {
@@ -1230,10 +1231,21 @@
     }); // art.on('video:loadeddata', () => {
     // });
 
-    art.on('video:loadedmetadata', function () {
+    art.once('video:loadedmetadata', function () {
       if (option.autoSize) {
         player.autoSize = true;
       }
+
+      if (art.isMobile) {
+        art.loading.show = false;
+        art.controls.show = true;
+        art.mask.show = true;
+
+        if (!isReady) {
+          art.emit('ready');
+          isReady = true;
+        }
+      }
     });
     art.on('video:loadstart', function () {
       art.loading.show = true;
@@ -2632,6 +2644,10 @@
           tooltip($volume, i18n.get('Mute'));
           setStyle($volumeClose, 'display', 'none');
 
+          if (art.isMobile) {
+            setStyle($volumePanel, 'display', 'none');
+          }
+
           function volumeChangeFromEvent(event) {
             var _$volumePanel$getBoun = $volumePanel.getBoundingClientRect(),
                 panelLeft = _$volumePanel$getBoun.left;
@@ -2849,7 +2865,17 @@
 
       _this = possibleConstructorReturn(this, getPrototypeOf(Control).call(this, art));
       _this.name = 'control';
-      var option = art.option;
+      var option = art.option,
+          player = art.player,
+          $player = art.template.$player;
+      _this.delayHide = debounce(function () {
+        if (player.playing && _this.show) {
+          addClass($player, 'art-hide-cursor');
+          removeClass($player, 'art-hover');
+          _this.show = false;
+        }
+      }, 3000);
+      _this.cancelDelayHide = _this.delayHide.clearTimeout;
       art.on('ready', function () {
         _this.add(progress({
           name: 'progress',
@@ -3277,11 +3303,9 @@
 
       _this = possibleConstructorReturn(this, getPrototypeOf(Subtitle).call(this, art));
       _this.name = 'subtitle';
-      var proxy = art.events.proxy,
-          subtitle = art.option.subtitle,
+      var subtitle = art.option.subtitle,
           $subtitle = art.template.$subtitle;
       setStyles($subtitle, subtitle.style);
-      proxy(_this.textTrack, 'cuechange', _this.update.bind(assertThisInitialized(_this)));
 
       if (subtitle.url) {
         _this.init(subtitle.url);
@@ -3328,9 +3352,20 @@
 
         var _this$art2 = this.art,
             notice = _this$art2.notice,
+            proxy = _this$art2.events.proxy,
             _this$art2$template = _this$art2.template,
             $subtitle = _this$art2$template.$subtitle,
-            $track = _this$art2$template.$track;
+            $video = _this$art2$template.$video;
+
+        if (!this.$track) {
+          var $track = document.createElement('track');
+          $track.default = true;
+          $track.kind = 'metadata';
+          $video.appendChild($track);
+          this.$track = $track;
+          proxy(this.textTrack, 'cuechange', this.update.bind(this));
+        }
+
         return fetch(url).then(function (response) {
           return response.text();
         }).then(function (text) {
@@ -3353,7 +3388,7 @@
           $subtitle.innerHTML = '';
           if (_this3.url === subUrl) return subUrl;
           URL.revokeObjectURL(_this3.url);
-          $track.src = subUrl;
+          _this3.$track.src = subUrl;
           return subUrl;
         }).catch(function (err) {
           notice.show = err;
@@ -3366,7 +3401,7 @@
     }, {
       key: "url",
       get: function get() {
-        return this.art.template.$track.src;
+        return this.$track.src;
       }
     }, {
       key: "textTrack",
@@ -3384,20 +3419,25 @@
   }(Component);
 
   function clickInit(art, events) {
-    var $player = art.template.$player;
+    var controls = art.controls,
+        $player = art.template.$player;
     events.proxy(document, ['click', 'contextmenu'], function (event) {
       if (event.composedPath && event.composedPath().indexOf($player) > -1) {
         art.isFocus = true;
         art.emit('focus');
-      } else if (art.isFocus) {
+      } else {
         art.isFocus = false;
         art.emit('blur');
       }
     });
+    art.on('blur', function () {
+      controls.delayHide();
+    });
   }
 
   function hoverInit(art, events) {
-    var $player = art.template.$player;
+    var controls = art.controls,
+        $player = art.template.$player;
     events.hover($player, function () {
       addClass($player, 'art-hover');
       art.emit('hoverenter');
@@ -3405,6 +3445,9 @@
       removeClass($player, 'art-hover');
       art.emit('hoverleave');
     });
+    art.on('hoverleave', function () {
+      controls.delayHide();
+    });
   }
 
   function mousemoveInitInit(art, events) {
@@ -3413,26 +3456,17 @@
         $video = _art$template.$video,
         player = art.player,
         controls = art.controls;
-    var autoHide = debounce(function () {
-      addClass($player, 'art-hide-cursor');
-      removeClass($player, 'art-hover');
-      controls.show = false;
-    }, 3000);
-    art.on('hoverleave', function () {
-      if (player.playing) {
-        autoHide();
-      }
-    });
     events.proxy($player, 'mousemove', function (event) {
-      autoHide.clearTimeout();
+      art.emit('mousemove', event);
+    });
+    art.on('mousemove', function (event) {
+      controls.cancelDelayHide();
       removeClass($player, 'art-hide-cursor');
       controls.show = true;
 
-      if (!player.pip && player.playing && event.target === $video) {
-        autoHide();
+      if (!player.pip && event.target === $video) {
+        controls.delayHide();
       }
-
-      art.emit('mousemove');
     });
   }
 
@@ -4390,6 +4424,8 @@
       _this.option = optionValidator(mergeDeep(Artplayer.option, option), scheme);
       _this.isFocus = false;
       _this.isDestroy = false;
+      _this.ua = userAgent;
+      _this.isMobile = isMobile();
       _this.whitelist = new Whitelist(assertThisInitialized(_this));
       _this.template = new Template(assertThisInitialized(_this));
       _this.events = new Events(assertThisInitialized(_this));

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layer.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../pacLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layer.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../pacLine truncated

packages/artplayer/src/control/index.js

@@ -1,4 +1,4 @@
-import { errorHandle, addClass } from '../utils';
+import { errorHandle, addClass, debounce, removeClass } from '../utils';
 import Component from '../utils/component';
 import fullscreen from './fullscreen';
 import fullscreenWeb from './fullscreenWeb';
@@ -19,7 +19,21 @@ export default class Control extends Component {
 
         this.name = 'control';
 
-        const { option } = art;
+        const {
+            option,
+            player,
+            template: { $player },
+        } = art;
+
+        this.delayHide = debounce(() => {
+            if (player.playing && this.show) {
+                addClass($player, 'art-hide-cursor');
+                removeClass($player, 'art-hover');
+                this.show = false;
+            }
+        }, 3000);
+
+        this.cancelDelayHide = this.delayHide.clearTimeout;
 
         art.on('ready', () => {
             this.add(
@@ -130,7 +144,7 @@ export default class Control extends Component {
                 }),
             );
 
-            option.controls.forEach(item => {
+            option.controls.forEach((item) => {
                 this.add(item);
             });
         });
@@ -158,7 +172,7 @@ export default class Control extends Component {
                 break;
         }
 
-        super.add(option, $ref => {
+        super.add(option, ($ref) => {
             if (
                 !option.disable &&
                 option.position !== 'top' &&

packages/artplayer/src/control/volume.js

@@ -1,9 +1,9 @@
 import { append, clamp, tooltip, setStyle } from '../utils';
 
 export default function volume(option) {
-    return art => ({
+    return (art) => ({
         ...option,
-        mounted: $control => {
+        mounted: ($control) => {
             const {
                 events: { proxy },
                 icons,
@@ -21,6 +21,10 @@ export default function volume(option) {
             tooltip($volume, i18n.get('Mute'));
             setStyle($volumeClose, 'display', 'none');
 
+            if (art.isMobile) {
+                setStyle($volumePanel, 'display', 'none');
+            }
+
             function volumeChangeFromEvent(event) {
                 const { left: panelLeft } = $volumePanel.getBoundingClientRect();
                 const percentage =
@@ -55,7 +59,7 @@ export default function volume(option) {
                 player.muted = false;
             });
 
-            proxy($volumePanel, 'click', event => {
+            proxy($volumePanel, 'click', (event) => {
                 player.muted = false;
                 player.volume = volumeChangeFromEvent(event);
             });
@@ -64,7 +68,7 @@ export default function volume(option) {
                 isDroging = true;
             });
 
-            proxy($control, 'mousemove', event => {
+            proxy($control, 'mousemove', (event) => {
                 if (isDroging) {
                     player.muted = false;
                     player.volume = volumeChangeFromEvent(event);

packages/artplayer/src/events/clickInit.js

@@ -1,12 +1,20 @@
 export default function clickInit(art, events) {
-    const { $player } = art.template;
+    const {
+        controls,
+        template: { $player },
+    } = art;
+
     events.proxy(document, ['click', 'contextmenu'], (event) => {
         if (event.composedPath && event.composedPath().indexOf($player) > -1) {
             art.isFocus = true;
             art.emit('focus');
-        } else if (art.isFocus) {
+        } else {
             art.isFocus = false;
             art.emit('blur');
         }
     });
+
+    art.on('blur', () => {
+        controls.delayHide();
+    });
 }

packages/artplayer/src/events/hoverInit.js

@@ -1,7 +1,11 @@
 import { addClass, removeClass } from '../utils';
 
 export default function hoverInit(art, events) {
-    const { $player } = art.template;
+    const {
+        controls,
+        template: { $player },
+    } = art;
+
     events.hover(
         $player,
         () => {
@@ -13,4 +17,8 @@ export default function hoverInit(art, events) {
             art.emit('hoverleave');
         },
     );
+
+    art.on('hoverleave', () => {
+        controls.delayHide();
+    });
 }

packages/artplayer/src/events/mousemoveInit.js

@@ -1,4 +1,4 @@
-import { debounce, addClass, removeClass } from '../utils';
+import { removeClass } from '../utils';
 
 export default function mousemoveInitInit(art, events) {
     const {
@@ -7,25 +7,16 @@ export default function mousemoveInitInit(art, events) {
         controls,
     } = art;
 
-    const autoHide = debounce(() => {
-        addClass($player, 'art-hide-cursor');
-        removeClass($player, 'art-hover');
-        controls.show = false;
-    }, 3000);
-
-    art.on('hoverleave', () => {
-        if (player.playing) {
-            autoHide();
-        }
+    events.proxy($player, 'mousemove', (event) => {
+        art.emit('mousemove', event);
     });
 
-    events.proxy($player, 'mousemove', event => {
-        autoHide.clearTimeout();
+    art.on('mousemove', (event) => {
+        controls.cancelDelayHide();
         removeClass($player, 'art-hide-cursor');
         controls.show = true;
-        if (!player.pip && player.playing && event.target === $video) {
-            autoHide();
+        if (!player.pip && event.target === $video) {
+            controls.delayHide();
         }
-        art.emit('mousemove');
     });
 }

packages/artplayer/src/index.js

@@ -32,6 +32,8 @@ class Artplayer extends Emitter {
         this.option = validator(utils.mergeDeep(Artplayer.option, option), scheme);
         this.isFocus = false;
         this.isDestroy = false;
+        this.ua = utils.userAgent;
+        this.isMobile = utils.isMobile();
         this.whitelist = new Whitelist(this);
         this.template = new Template(this);
         this.events = new Events(this);

packages/artplayer/src/player/eventInit.js

@@ -10,6 +10,7 @@ export default function eventInit(art, player) {
         notice,
     } = art;
 
+    let isReady = false;
     let reconnectTime = 0;
     const maxReconnectTime = 5;
 
@@ -17,8 +18,8 @@ export default function eventInit(art, player) {
         player.toggle = true;
     });
 
-    config.events.forEach(eventName => {
-        proxy($video, eventName, event => {
+    config.events.forEach((eventName) => {
+        proxy($video, eventName, (event) => {
             art.emit(`video:${event.type}`, event);
         });
     });
@@ -33,9 +34,13 @@ export default function eventInit(art, player) {
     });
 
     art.once('video:canplay', () => {
+        art.loading.show = false;
         art.controls.show = true;
         art.mask.show = true;
-        art.emit('ready');
+        if (!isReady) {
+            art.emit('ready');
+            isReady = true;
+        }
     });
 
     // art.on('video:canplaythrough', () => {
@@ -84,10 +89,19 @@ export default function eventInit(art, player) {
 
     // });
 
-    art.on('video:loadedmetadata', () => {
+    art.once('video:loadedmetadata', () => {
         if (option.autoSize) {
             player.autoSize = true;
         }
+        if (art.isMobile) {
+            art.loading.show = false;
+            art.controls.show = true;
+            art.mask.show = true;
+            if (!isReady) {
+                art.emit('ready');
+                isReady = true;
+            }
+        }
     });
 
     art.on('video:loadstart', () => {

packages/artplayer/src/style/subtitle.scss

@@ -3,7 +3,7 @@
         display: none;
         position: absolute;
         z-index: 20;
-        bottom: 40px;
+        bottom: 10px;
         width: 100%;
         padding: 0 20px;
         text-align: center;
@@ -24,4 +24,10 @@
             display: block;
         }
     }
+
+    &.art-control-show {
+        .art-subtitle {
+            bottom: 40px;
+        }
+    }
 }

packages/artplayer/src/subtitle.js

@@ -8,13 +8,11 @@ export default class Subtitle extends Component {
         this.name = 'subtitle';
 
         const {
-            events: { proxy },
             option: { subtitle },
             template: { $subtitle },
         } = art;
 
         setStyles($subtitle, subtitle.style);
-        proxy(this.textTrack, 'cuechange', this.update.bind(this));
 
         if (subtitle.url) {
             this.init(subtitle.url);
@@ -22,7 +20,7 @@ export default class Subtitle extends Component {
     }
 
     get url() {
-        return this.art.template.$track.src;
+        return this.$track.src;
     }
 
     get textTrack() {
@@ -39,7 +37,7 @@ export default class Subtitle extends Component {
         if (this.activeCue) {
             $subtitle.innerHTML = this.activeCue.text
                 .split(/\r?\n/)
-                .map(item => `<p>${escape(item)}</p>`)
+                .map((item) => `<p>${escape(item)}</p>`)
                 .join('');
             this.art.emit('subtitle:update', this.activeCue.text);
         }
@@ -47,7 +45,7 @@ export default class Subtitle extends Component {
 
     switch(url, name, ext) {
         const { i18n, notice } = this.art;
-        return this.init(url, ext).then(subUrl => {
+        return this.init(url, ext).then((subUrl) => {
             if (name) {
                 notice.show = `${i18n.get('Switch subtitle')}: ${name}`;
             }
@@ -59,14 +57,24 @@ export default class Subtitle extends Component {
     init(url, ext) {
         const {
             notice,
-            template: { $subtitle, $track },
+            events: { proxy },
+            template: { $subtitle, $video },
         } = this.art;
 
+        if (!this.$track) {
+            const $track = document.createElement('track');
+            $track.default = true;
+            $track.kind = 'metadata';
+            $video.appendChild($track);
+            this.$track = $track;
+            proxy(this.textTrack, 'cuechange', this.update.bind(this));
+        }
+
         return fetch(url)
-            .then(response => {
+            .then((response) => {
                 return response.text();
             })
-            .then(text => {
+            .then((text) => {
                 this.art.emit('subtitle:load', url);
                 switch (ext || getExt(url)) {
                     case 'srt':
@@ -79,14 +87,14 @@ export default class Subtitle extends Component {
                         return url;
                 }
             })
-            .then(subUrl => {
+            .then((subUrl) => {
                 $subtitle.innerHTML = '';
                 if (this.url === subUrl) return subUrl;
                 URL.revokeObjectURL(this.url);
-                $track.src = subUrl;
+                this.$track.src = subUrl;
                 return subUrl;
             })
-            .catch(err => {
+            .catch((err) => {
                 notice.show = err;
                 this.art.emit('subtitle:err', err);
                 throw err;

packages/artplayer/src/template.js

@@ -37,9 +37,7 @@ export default class Template {
         this.$container.innerHTML = `
           <div class="art-undercover"></div>
           <div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${theme}">
-            <video class="art-video">
-              <track default kind="metadata"></track>
-            </video>
+            <video class="art-video"></video>
             <div class="art-subtitle"></div>
             <div class="art-danmuku"></div>
             <div class="art-layers"></div>
@@ -104,7 +102,6 @@ export default class Template {
         this.$undercover = this.query('.art-undercover');
         this.$player = this.query('.art-video-player');
         this.$video = this.query('.art-video');
-        this.$track = this.query('.art-video track');
         this.$subtitle = this.query('.art-subtitle');
         this.$danmuku = this.query('.art-danmuku');
         this.$bottom = this.query('.art-bottom');

packages/artplayer/src/whitelist.js

@@ -1,23 +1,19 @@
-import { isMobile, userAgent } from './utils/compatibility';
-
 export default class Whitelist {
     constructor(art) {
         const {
             constructor: { kindOf },
             option: { whitelist },
         } = art;
-        this.ua = userAgent;
-        this.isMobile = isMobile();
         this.state =
-            !this.isMobile ||
+            !art.isMobile ||
             whitelist.some((item) => {
                 switch (kindOf(item)) {
                     case 'string':
-                        return this.ua.indexOf(item) > -1;
+                        return item === '*' || art.ua.indexOf(item) > -1;
                     case 'function':
-                        return item(this.ua);
+                        return item(art.ua);
                     case 'regexp':
-                        return item.test(this.ua);
+                        return item.test(art.ua);
                     default:
                         return false;
                 }