use artplayer

theme/classic.html

@@ -187,7 +187,9 @@
                         <img src="<!--FileEncodeUrl-->" alt="<!--FileName-->" onload="if (this.offsetWidth>document.getElementById('url').offsetWidth) this.style.width='100%';if (this.offsetHeight>document.documentElement.clientHeight) this.style.height=document.documentElement.clientHeight + 'px';" />
 <!--IsimgFileEnd-->
 <!--IsvideoFileStart-->
-                        <div id="video-a0"></div>
+                        <div id="video-a0" class="artplayerdiv" style="width: 100%; height: 100%;"></div>
+                        <!--<script src="https://artplayer.org/uncompiled/artplayer.js"></script>-->
+                        <script src="https://cdn.jsdelivr.net/npm/artplayer@4.0.9/dist/artplayer.min.js"></script>
 <!--IsvideoFileEnd-->
 <!--IsmusicFileStart-->
                         <audio src="<!--FileDownUrl-->" controls="controls" style="width: 100%"></audio>
@@ -548,70 +550,129 @@
     }
 <!--IstxtFileEnd-->
 <!--IsvideoFileStart-->
-    function loadResources(type, src, callback) {
+    document.getElementById('video-a0').style.height = window.innerHeight + 'px';
-        let script = document.createElement(type);
+    var fileurl = "<!--FileEncodeUrl-->";
-        let loaded = false;
+    var filename1 = fileurl.substr(0, fileurl.lastIndexOf('.'));
-        if (typeof callback === 'function') {
+    var art = new Artplayer({
-            script.onload = script.onreadystatechange = () => {
+        //container: '#video-a0',
-                if (!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))) {
+        container: '.artplayerdiv',
-                    script.onload = script.onreadystatechange = null;
+        url: fileurl,
-                    loaded = true;
+        title: fileurl,
-                    callback();
+        autoplay: true,
-                }
+        pip: true,
-            }
+        autoSize: true,
-        }
+        autoMini: true,
-        if (type === 'link') {
+        //loop: true,
-            script.href = src;
+        fullscreen: true,
-            script.rel = 'stylesheet';
+        fullscreenWeb: true,
-        } else {
+        subtitleOffset: true,
-            script.src = src;
+        miniProgressBar: true,
-        }
+        //localVideo: true,
-        document.getElementsByTagName('head')[0].appendChild(script);
+        //localSubtitle: true,
-    }
+        mutex: true,
-    function addVideos(videos) {
+        //backdrop: true,
-        let host = 'https://s0.pstatp.com/cdn/expire-1-M';
+        theme: '#23ade5',
-        let unloadedResourceCount = 4;
+        lang: navigator.language.toLowerCase(),
-        let callback = (() => {
+        /*moreVideoAttr: {
-            return () => {
+            crossOrigin: 'anonymous',
-                if (!--unloadedResourceCount) {
+        },
-                    createDplayers(videos);
+        settings: [
-                }
+            {
-            };
+                index: 1,
-        })(unloadedResourceCount, videos);
+                html: 'Custom setting',
-        loadResources(
+                click: function (setting) {
-            'link',
+                    console.info('You clicked on the custom setting');
-            host + '/dplayer/1.25.0/DPlayer.min.css',
+                    setting.show = false;
-            callback
+                },
-        );
+            },
-        loadResources(
+        ],
-            'script',
+        contextmenu: [
-            host + '/dplayer/1.25.0/DPlayer.min.js',
+            {
-            callback
+                html: 'Custom menu',
-        );
+                click: function (contextmenu) {
-        loadResources(
+                    console.info('You clicked on the custom menu');
-            'script',
+                    contextmenu.show = false;
-            host + '/hls.js/0.12.4/hls.light.min.js',
+                },
-            callback
+            },
-        );
+        ],
-        loadResources(
+        layers: [
-            'script',
+            {
-            host + '/flv.js/1.5.0/flv.min.js',
+                html: '<img style="width: 100px" src="/assets/sample/layer.png">',
-            callback
+                click: function () {
-        );
+                    console.info('You clicked on the custom layer');
-    }
+                },
-    function createDplayers(videos) {
+                style: {
-        for (i = 0; i < videos.length; i++) {
+                    position: 'absolute',
-            console.log(videos[i]);
+                    top: '20px',
-            new DPlayer({
+                    right: '20px',
-                container: document.getElementById('video-a' + i),
+                    opacity: '.9',
-                screenshot: true,
+                },
-                video: {
+            },
-                    url: videos[i]
+        ],
-                }
+        quality: [
+            {
+                default: true,
+                html: 'SD 480P',
+                url: '/assets/sample/video.mp4',
+            },
+            {
+                html: 'HD 720P',
+                url: '/assets/sample/video.mp4',
+            },
+        ],
+        thumbnails: {
+            url: '/assets/sample/thumbnails.png',
+            number: 100,
+            width: 160,
+            height: 90,
+            column: 10,
+        },*/
+        subtitle: {
+            url: filename1+'.srt',
+            type: 'srt',
+            style: {
+                color: '#03A9F4',
+            },
+            encoding: 'utf-8',
+            bilingual: true,
+        },/*
+        highlight: [
+            {
+                time: 60,
+                text: 'One more chance',
+            },
+            {
+                time: 120,
+                text: '谁でもいいはずなのに',
+            },
+            {
+                time: 180,
+                text: '夏の想い出がまわる',
+            },
+            {
+                time: 240,
+                text: 'こんなとこにあるはずもないのに',
+            },
+            {
+                time: 300,
+                text: '终わり',
+            },
+        ],
+        controls: [
+            {
+                position: 'right',
+                html: 'localsubtitle',
+                mounted: ($preview) => {
+                    art.plugins.localSubtitle.attach($preview);
+                },
+            },
+        ],
+        icons: {
+            indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
+            loading: '<img src="/assets/img/ploading.gif">',
+            state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
+        },*/
     });
-        }
-    }
-    addVideos(["<!--FileEncodeUrl-->"]);
 <!--IsvideoFileEnd-->
 <!--IspdfFileStart-->
     pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js';