🎨Optimize video player

public/setting.js

@@ -1,41 +1,41 @@
 var authConfig = {
-    version: '1.1.1',
+  version: "1.1.1",
-    roots: [
+  roots: [
-      {
+    {
-        id: "",
+      id: "",
-        name: "TeamDrive",
+      name: "TeamDrive",
-        pass: "",
+      pass: "",
-      },
-      {
-        id: "root",
-        name: "PriveDrive",
-        pass: "",
-      },
-      {
-        id: "",
-        name: "folder1",
-        pass: "",
-      }
-    ],
-  };
-  var themeOptions = {
-    // en/zh-chs/zh-cht
-    languages: 'en',
-    render: {
-      head_md: true,
-      readme_md: true,
-      // 是否显示文件/文件夹描述（默认不显示）
-      // Show file/folder description or not (not shown by default)
-      desc: true,
     },
-    player: {
+    {
-      api: "",
+      id: "root",
-      autoplay: true
+      name: "PriveDrive",
-    }
+      pass: "",
-  }
+    },
-  window.gdconfig = JSON.parse(JSON.stringify({ version: authConfig.version, themeOptions: themeOptions }));
+    {
-  window.themeOptions = themeOptions;
+      id: "",
-  window.gds = JSON.parse(
+      name: "folder1",
-    JSON.stringify(authConfig.roots.map((it) => it.name))
+      pass: "",
-  );
+    },
-  window.current_drive_order = 0;
+  ],
+};
+var themeOptions = {
+  // en/zh-chs/zh-cht
+  languages: "en",
+  render: {
+    head_md: true,
+    readme_md: true,
+    // 是否显示文件/文件夹描述（默认不显示）
+    // Show file/folder description or not (not shown by default)
+    desc: true,
+  },
+  video: {
+    api: "",
+    autoplay: true,
+  },
+};
+window.gdconfig = JSON.parse(
+  JSON.stringify({ version: authConfig.version, themeOptions: themeOptions })
+);
+window.themeOptions = themeOptions;
+window.gds = JSON.parse(JSON.stringify(authConfig.roots.map((it) => it.name)));
+window.current_drive_order = 0;

src/plugin/vplayer/flv.js

@@ -0,0 +1,34 @@
+import flvjs from "flv.js";
+
+function FlvPlayer({
+  src,
+  autoplay = false,
+  media,
+  options = {
+    type: "flv",
+    url: src,
+  },
+  callback = () => ({}),
+}) {
+  if (flvjs.isSupported()) {
+    var player = flvjs.createPlayer(options);
+    player.attachMediaElement(media);
+    player.load();
+    player.on(flvjs.Events.ERROR, (event) => {
+      switch (event) {
+        case flvjs.ErrorTypes.NETWORK_ERROR:
+          player.load();
+          break;
+        default:
+          player.destroy();
+          break;
+      }
+    });
+    if (autoplay) {
+      player.play();
+    }
+    callback(player);
+  }
+}
+
+export default FlvPlayer;

src/plugin/vplayer/hls.js

@@ -0,0 +1,32 @@
+import Hls from "hls.js";
+
+function HlsPlayer({ src, autoplay = false, media, callback = () => ({}) }) {
+  // eslint-disable-next-line no-undef
+  if (Hls.isSupported()) {
+    // For more Hls.js options, see https://github.com/dailymotion/hls.js
+    // eslint-disable-next-line no-undef
+    const hls = new Hls();
+    hls.loadSource(src);
+    hls.attachMedia(media);
+    hls.on(Hls.Events.ERROR, function(event, data) {
+      if (data.fatal) {
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            hls.startLoad();
+            break;
+          default:
+            hls.destroy();
+            break;
+        }
+      }
+    });
+    if (autoplay) {
+      hls.on(Hls.Events.MANIFEST_PARSED, function() {
+        media.play();
+      });
+    }
+    callback(hls);
+  }
+}
+
+export default HlsPlayer;

src/plugin/vplayer/index.js

@@ -0,0 +1,4 @@
+import Flv from "./flv";
+import Hls from "./hls";
+
+export { Flv, Hls };

src/views/page/GoVideo.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="content g2-content">
-    <div v-if="player && player.api" class="video-content">
+    <div v-if="options && options.api" class="video-content">
       <iframe
         width="100%"
         height="100%"
-        :src="apiUrl"
+        :src="apiVideoUrl"
         frameborder="0"
         border="0"
         marginwidth="0"
@@ -15,16 +15,10 @@
       ></iframe>
     </div>
     <div v-else>
-      <vue-plyr ref="plyr" :options="{ autoplay: player.autoplay }">
+      <vue-plyr ref="plyr" :options="options">
-        <video>
+        <video controls crossorigin playsinline>
           <source :src="videoUrl" type="video/mp4" />
-          <!-- <track
+          <track kind="captions" :src="subtitle" default />
-          kind="captions"
-          label="English"
-          srclang="en"
-          src="captions-en.vtt"
-          default
-        /> -->
         </video>
       </vue-plyr>
     </div>
@@ -46,7 +40,7 @@
           <div class="field">
             <label class="label">{{ $t("page.video.link") }}</label>
             <div class="control">
-              <input class="input" type="text" :value="videoUrl" />
+              <input class="input" type="text" :value="downloadUrl" />
             </div>
           </div>
           <div class="columns is-mobile is-multiline has-text-centered">
@@ -73,94 +67,84 @@
 
 <script>
 import { decode64 } from "@utils/AcrouUtil";
-import Hls from "hls.js";
+import { Hls, Flv } from "@/plugin/vplayer";
-import flvjs from "flv.js";
 export default {
   data: function() {
     return {
-      apiUrl: "",
+      apiVideoUrl: "",
-      player: window.themeOptions.player,
       videoUrl: "",
+      downloadUrl: "",
+      subtitle: "",
     };
   },
+  mounted() {
+    this.render();
+  },
   methods: {
     render() {
       let path = encodeURI(this.url);
       let index = path.lastIndexOf(".");
       this.suffix = path.substring(index + 1, path.length);
-      this.videoUrl = window.location.origin + encodeURI(this.url);
+      this.loadSub(path, index);
-      this.apiUrl = this.player.api + this.videoUrl;
+      this.videoUrl = path;
-      if (!this.player || !this.player.api) {
+      this.downloadUrl = window.location.origin + path;
-        let options = { src: this.videoUrl, media: this.plyr.media };
+      this.apiVideoUrl = this.options.api + this.videoUrl;
+      if (!this.options.api) {
+        let options = {
+          src: this.videoUrl,
+          autoplay: this.options.autoplay,
+          media: this.player.media,
+        };
         if (this.suffix === "m3u8") {
-          this.hls(options);
+          Hls({
-        } else if (this.suffix === "flv") {
+            ...options,
-          this.flv(options);
+            callback: (hls) => {
-        }
+              // Handle changing captions
-      }
+              this.player.on("languagechange", () => {
-    },
+                // Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
-    hls({ src, media }) {
+                setTimeout(
-      // eslint-disable-next-line no-undef
+                  () => (hls.subtitleTrack = this.player.currentTrack),
-      if (Hls.isSupported()) {
+                  50
-        // For more Hls.js options, see https://github.com/dailymotion/hls.js
+                );
-        // eslint-disable-next-line no-undef
+              });
-        const hls = new Hls();
+            },
-        hls.loadSource(src);
-        hls.attachMedia(media);
-        hls.on(Hls.Events.ERROR, function(event, data) {
-          if (data.fatal) {
-            switch (data.type) {
-              case Hls.ErrorTypes.NETWORK_ERROR:
-                hls.startLoad();
-                break;
-              default:
-                hls.destroy();
-                break;
-            }
-          }
-        });
-        if (this.player.autoplay) {
-          hls.on(Hls.Events.MANIFEST_PARSED, function() {
-            media.play();
           });
-        }
+        } else if (this.suffix === "flv") {
-        window.hls = hls;
+          Flv(options);
-        // Handle changing captions
-        this.plyr.on("languagechange", () => {
-          // Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
-          setTimeout(() => (hls.subtitleTrack = this.plyr.currentTrack), 50);
-        });
-      }
-    },
-    flv({ src, media }) {
-      if (flvjs.isSupported()) {
-        var flvPlayer = flvjs.createPlayer({
-          type: "flv",
-          url: src,
-        });
-        flvPlayer.attachMediaElement(media);
-        flvPlayer.load();
-        flvPlayer.on(flvjs.Events.ERROR, (event) => {
-          switch (event) {
-            case flvjs.ErrorTypes.NETWORK_ERROR:
-              flvPlayer.load();
-              break;
-            default:
-              flvPlayer.destroy();
-              break;
-          }
-        });
-        if (this.player.autoplay) {
-          flvPlayer.play();
         }
       }
     },
-  },
+    loadSub(path, index) {
-  activated() {
+      this.subtitle = path.substring(0, index) + ".vtt";
-    this.render();
+    },
   },
   computed: {
-    plyr() {
+    options() {
+      var options = window.themeOptions.video;
+      return {
+        ...options,
+        autoplay: options.autoplay || false,
+        invertTime: options.invertTime || false,
+        controls: options.controls || [
+          "play-large",
+          "restart",
+          "play",
+          "progress",
+          "current-time",
+          "duration",
+          "mute",
+          "volume",
+          "captions",
+          "settings",
+          "pip",
+          "airplay",
+          "download",
+          "fullscreen",
+        ],
+        settings: options.settings || ["quality", "speed", "loop"]
+      };
+    },
+    player() {
       return this.$refs.plyr.player;
     },
     url() {