update demo

docs/assets/example/mobile.js

@@ -0,0 +1,92 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    title: 'One More Time One More Chance',
+    poster: '/assets/sample/poster.jpg',
+    autoSize: true,
+    loop: true,
+    mutex: true,
+    setting: true,
+    flip: true,
+    lock: true,
+    fastForward: true,
+    playbackRate: true,
+    aspectRatio: true,
+    theme: '#ff0057',
+    fullscreen: true,
+    fullscreenWeb: true,
+    miniProgressBar: true,
+    autoOrientation: true,
+    airplay: true,
+    moreVideoAttr: {
+        'x5-video-player-type': 'h5',
+        'x5-video-player-fullscreen': false,
+        'x5-video-orientation': 'portraint',
+        preload: "metadata"
+    },
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        style: {
+            color: '#48aff0',
+            fontSize: '16px',
+        },
+    },
+    layers: [
+        {
+            html: `<img width="50" src="/assets/sample/layer.png">`,
+            click: function () {
+                art.notice.show = "你点击了自定义层";
+            },
+            style: {
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                opacity: '.9',
+            },
+        },
+    ],
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
+        indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
+    },
+    settings: [
+        {
+            width: 200,
+            html: '切换字幕',
+            tooltip: '双语',
+            icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
+            selector: [
+                {
+                    html: '开关',
+                    switch: true,
+                    tooltip: '显示',
+                    onSwitch: function (item) {
+                        item.tooltip = item.switch ? '隐藏' : '显示';
+                        art.subtitle.show = !item.switch;
+                        return !item.switch;
+                    },
+                },
+                {
+                    default: true,
+                    html: '双语',
+                    url: '/assets/sample/subtitle.srt'
+                },
+                {
+                    html: '中文',
+                    url: '/assets/sample/subtitle.cn.srt'
+                },
+                {
+                    html: '日文',
+                    url: '/assets/sample/subtitle.jp.srt'
+                },
+            ],
+            onSelect: function (item) {
+                art.subtitle.switch(item.url, {
+                    name: item.html
+                });
+                return item.html;
+            },
+        },
+    ],
+});

docs/assets/js/common.js

@@ -6,7 +6,7 @@
     var isIE = /MSIE|Trident/.test(userAgent);
 
     if (isMobile || isIE) {
-        window.location.href = './mobile.html';
+        window.location.href = './mobile.html' + location.search;
         return;
     }
 

docs/assets/js/mobile.js

@@ -0,0 +1,100 @@
+(function () {
+    Artplayer.DEBUG = true;
+
+    function getURLParameters(url) {
+        return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
+            return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
+        }, {});
+    }
+
+    function getExt(url) {
+        if (url.includes('?')) {
+            return getExt(url.split('?')[0]);
+        }
+
+        if (url.includes('#')) {
+            return getExt(url.split('#')[0]);
+        }
+
+        return url.trim().toLowerCase().split('.').pop();
+    }
+
+    function loadScript(url) {
+        return new Promise(function (resolve, reject) {
+            var define2 = window.define;
+            window.define = undefined;
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = url;
+            script.onload = function () {
+                window.define = define2;
+                resolve(url);
+            };
+            script.onerror = function () {
+                reject(new Error('Loading script failed:' + url));
+            };
+            document.querySelector('head').appendChild(script);
+        });
+    }
+
+    function loadStyle(url) {
+        return new Promise(function (resolve, reject) {
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = url;
+            link.onload = function () {
+                resolve(url);
+            };
+            link.onerror = function () {
+                reject(new Error('Loading style failed:' + url));
+            };
+            document.querySelector('head').appendChild(link);
+        });
+    }
+
+    function loadLib(libs) {
+        var libPromise = [];
+        var libsDecode = decodeURIComponent(libs || '');
+        libsDecode
+            .split(/\r?\n/)
+            .forEach(function (url) {
+                var ext = getExt(url);
+                if (ext === 'js') {
+                    libPromise.push(loadScript(url));
+                } else if (ext === 'css') {
+                    libPromise.push(loadStyle(url));
+                }
+            });
+        return Promise.all(libPromise);
+    }
+
+    function runExample(name) {
+        fetch('./assets/example/' + name + '.js')
+            .then(function (response) {
+                return response.text();
+            })
+            .then(function (text) {
+                eval(text);
+            })
+    }
+
+    function loadCode(code, example) {
+        if (example) {
+            runExample(example);
+        } else if (code) {
+           eval(decodeURIComponent(code).trim());
+        } else {
+            runExample('mobile');
+        }
+    }
+
+    var _getURLParameters = getURLParameters(window.location.href),
+            code = _getURLParameters.code,
+            libs = _getURLParameters.libs;
+        example = _getURLParameters.example;
+
+    loadLib(libs)
+        .then(function () {
+            loadCode(code, example);
+        })
+})();