✨Add Video Default Player(plyr) #22 #38

dependencies-cdn.js

@@ -9,7 +9,6 @@ module.exports = [
   { name: 'js-cookie', library: 'Cookies', js: 'https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js', css: '' },
   { name: 'lowdb', library: 'low', js: 'https://cdn.jsdelivr.net/npm/lowdb@1.0.0/dist/low.min.js', css: '' },
   { name: 'lowdb/adapters/LocalStorage', library: 'LocalStorage', js: 'https://cdn.jsdelivr.net/npm/lowdb@1.0.0/dist/LocalStorage.min.js', css: '' },
-  { name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' },
   { name: '', library: '', js: 'https://at.alicdn.com/t/font_1760192_axq33n6snd.js', css: '' },
   { name: '', library: '', js: '', css: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css' },
   { name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css' },

package-lock.json

@@ -4111,6 +4111,11 @@
         "array-find-index": "^1.0.1"
       }
     },
+    "custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npm.taobao.org/custom-event-polyfill/download/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha1-m8mT3dqTfBowzNM1YUxsWMT4eu4="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz",
@@ -4775,6 +4780,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npm.taobao.org/es6-promise/download/es6-promise-4.2.8.tgz",
+      "integrity": "sha1-TrIVlMlyvEBVPSduUQU5FD21Pgo="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "http://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz",
@@ -5516,6 +5526,15 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "flv.js": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npm.taobao.org/flv.js/download/flv.js-1.5.0.tgz",
+      "integrity": "sha1-+lm+1DkdcENc+odArEDsAHDvmK4=",
+      "requires": {
+        "es6-promise": "^4.2.5",
+        "webworkify": "^1.5.0"
+      }
+    },
     "follow-redirects": {
       "version": "1.11.0",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.11.0.tgz?cache=0&sync_timestamp=1585479417937&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.11.0.tgz",
@@ -6527,6 +6546,22 @@
       "integrity": "sha1-TAb8y0YC/iYCs8k9+C1+fb8aio4=",
       "dev": true
     },
+    "hls.js": {
+      "version": "0.13.2",
+      "resolved": "https://registry.npm.taobao.org/hls.js/download/hls.js-0.13.2.tgz",
+      "integrity": "sha1-Pn3SjjeHxpxqukK2SxHrLDyMKfE=",
+      "requires": {
+        "eventemitter3": "3.1.0",
+        "url-toolkit": "^2.1.6"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.0.tgz?cache=0&sync_timestamp=1589283105849&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-3.1.0.tgz",
+          "integrity": "sha1-CQtNbNvWRe0Qv3UNS1QHlC17oWM="
+        }
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz",
@@ -7702,6 +7737,11 @@
         }
       }
     },
+    "loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npm.taobao.org/loadjs/download/loadjs-4.2.0.tgz",
+      "integrity": "sha1-KgM2N2OXpqQ+35jJ7DIp3dWrtvY="
+    },
     "locate-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-2.0.0.tgz",
@@ -9988,6 +10028,11 @@
       "integrity": "sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE=",
       "dev": true
     },
+    "rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/rangetouch/download/rangetouch-2.0.1.tgz",
+      "integrity": "sha1-wBEFEQ/Tr8oq3LGlgGkoN9iDy3A="
+    },
     "raw-body": {
       "version": "2.4.0",
       "resolved": "https://registry.npm.taobao.org/raw-body/download/raw-body-2.4.0.tgz",
@@ -12152,6 +12197,16 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-polyfill": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npm.taobao.org/url-polyfill/download/url-polyfill-1.1.9.tgz",
+      "integrity": "sha1-LI1CJIiaXJQoAPcI9VhTaAhWA9k="
+    },
+    "url-toolkit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npm.taobao.org/url-toolkit/download/url-toolkit-2.2.0.tgz",
+      "integrity": "sha1-mle4nzFdS33DQOFQvPpUjd9fXOk="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "http://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
@@ -12542,6 +12597,29 @@
         }
       }
     },
+    "vue-plyr": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npm.taobao.org/vue-plyr/download/vue-plyr-6.0.4.tgz",
+      "integrity": "sha1-eINNx0U3rjBtGNni5csNQqFxjv0=",
+      "requires": {
+        "plyr": "^3.5.6",
+        "vue": "^2.6.10"
+      },
+      "dependencies": {
+        "plyr": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npm.taobao.org/plyr/download/plyr-3.6.2.tgz",
+          "integrity": "sha1-WlW2CKzRYSYt4cx1yoQ6pkNVoFE=",
+          "requires": {
+            "core-js": "^3.6.5",
+            "custom-event-polyfill": "^1.0.7",
+            "loadjs": "^4.2.0",
+            "rangetouch": "^2.0.1",
+            "url-polyfill": "^1.1.8"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.1.6",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1588196200689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz",
@@ -13033,6 +13111,11 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "webworkify": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npm.taobao.org/webworkify/download/webworkify-1.5.0.tgz",
+      "integrity": "sha1-c0rYendN5uvdVG4dPgJ9pbj0pCw="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz",

package.json

@@ -16,12 +16,15 @@
     "core-js": "^3.6.4",
     "element-ui": "^2.13.1",
     "feb-alive": "^1.0.9",
+    "flv.js": "^1.5.0",
+    "hls.js": "^0.13.2",
     "js-base64": "^2.5.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.15",
     "lowdb": "^1.0.0",
     "marked": "^1.1.0",
     "node-sass": "^4.14.0",
+    "plyr": "^3.6.2",
     "sass-loader": "^8.0.2",
     "v-viewer": "^1.5.1",
     "vue": "^2.6.11",
@@ -31,6 +34,7 @@
     "vue-i18n": "^8.17.3",
     "vue-infinite-loading": "^2.4.5",
     "vue-lazyload": "^1.3.3",
+    "vue-plyr": "^6.0.4",
     "vue-router": "^3.1.6",
     "vuex": "^3.4.0"
   },

public/index.html

@@ -44,7 +44,8 @@
         desc: true,
       },
       player: {
-          api: "https://api.jsonpop.cn/demo/blplyaer/?url="
+        api: "",
+        autoplay: true
       }
     }
     window.gdconfig = JSON.parse(JSON.stringify({ version: authConfig.version, themeOptions: themeOptions }));

src/main.js

@@ -13,9 +13,10 @@ import store from "@/store/index";
 import VueClipboard from "vue-clipboard2";
 import VueLazyload from "vue-lazyload";
 import Viewer from "v-viewer";
+import VuePlyr from "vue-plyr";
 import cdnpath from "./libs/util.cdn";
 // 组件
-import '@/components'
+import "@/components";
 import "viewerjs/dist/viewer.css";
 import "@/assets/style/theme/register.scss";
 
@@ -31,6 +32,7 @@ Vue.use(VueLazyload, {
   loading: cdnpath("images/airplane.gif"),
 });
 Vue.use(Viewer);
+Vue.use(VuePlyr);
 
 new Vue({
   router,

src/utils/AcrouUtil.js

@@ -13,7 +13,7 @@ const text_exts = [
   "sh",
   "md",
 ];
-const video_exts = ["mp4", "webm", "mkv", "m3u8"];
+const video_exts = ["mp4", "webm", "mkv", "m3u8", "flv"];
 const image_exts = ["bmp", "jpg", "jpeg", "png", "gif"];
 const pdf_exts = ["pdf"];
 

src/views/page/GoVideo.vue

@@ -14,9 +14,20 @@
         allowfullscreen="true"
       ></iframe>
     </div>
-    <video v-else style="width:100%;" preload controls>
+    <div v-else>
-      <source :src="videoUrl" type="video/mp4" />
+      <vue-plyr ref="plyr" :options="{ autoplay: player.autoplay }">
-    </video>
+        <video>
+          <source :src="videoUrl" type="video/mp4" />
+          <!-- <track
+          kind="captions"
+          label="English"
+          srclang="en"
+          src="captions-en.vtt"
+          default
+        /> -->
+        </video>
+      </vue-plyr>
+    </div>
     <div class="card">
       <header class="card-header">
         <p class="card-header-title">
@@ -62,6 +73,8 @@
 
 <script>
 import { decode64 } from "@utils/AcrouUtil";
+import Hls from "hls.js";
+import flvjs from "flv.js";
 export default {
   data: function() {
     return {
@@ -72,15 +85,84 @@ export default {
   },
   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.apiUrl = this.player.api + this.videoUrl;
+      if (!this.player || !this.player.api) {
+        let options = { src: this.videoUrl, media: this.plyr.media };
+        if (this.suffix === "m3u8") {
+          this.hls(options);
+        } else if (this.suffix === "flv") {
+          this.flv(options);
+        }
+      }
+    },
+    hls({ src, media }) {
+      // 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 (this.player.autoplay) {
+          hls.on(Hls.Events.MANIFEST_PARSED, function() {
+            media.play();
+          });
+        }
+        window.hls = hls;
+        // 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();
+        }
+      }
     },
   },
   activated() {
     this.render();
   },
   computed: {
+    plyr() {
+      return this.$refs.plyr.player;
+    },
     url() {
       if (this.$route.params.path) {
         return decode64(this.$route.params.path);

yarn.lock

@@ -2943,6 +2943,11 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npm.taobao.org/custom-event-polyfill/download/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha1-m8mT3dqTfBowzNM1YUxsWMT4eu4=
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -5301,6 +5306,11 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loadjs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npm.taobao.org/loadjs/download/loadjs-4.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floadjs%2Fdownload%2Floadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
+  integrity sha1-KgM2N2OXpqQ+35jJ7DIp3dWrtvY=
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -6511,6 +6521,17 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+plyr@^3.5.6, plyr@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.npm.taobao.org/plyr/download/plyr-3.6.2.tgz#5a55b608acd161262de1cc75ca843aa64355a051"
+  integrity sha1-WlW2CKzRYSYt4cx1yoQ6pkNVoFE=
+  dependencies:
+    core-js "^3.6.5"
+    custom-event-polyfill "^1.0.7"
+    loadjs "^4.2.0"
+    rangetouch "^2.0.1"
+    url-polyfill "^1.1.8"
+
 pnp-webpack-plugin@^1.6.4:
   version "1.6.4"
   resolved "https://registry.npm.taobao.org/pnp-webpack-plugin/download/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
@@ -7048,6 +7069,11 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.npm.taobao.org/range-parser/download/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE=
 
+rangetouch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/rangetouch/download/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
+  integrity sha1-wBEFEQ/Tr8oq3LGlgGkoN9iDy3A=
+
 raw-body@2.4.0:
   version "2.4.0"
   resolved "https://registry.npm.taobao.org/raw-body/download/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
@@ -8594,6 +8620,11 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-polyfill@^1.1.8:
+  version "1.1.9"
+  resolved "https://registry.npm.taobao.org/url-polyfill/download/url-polyfill-1.1.9.tgz#2c8d4224889a5c942800f708f5585368085603d9"
+  integrity sha1-LI1CJIiaXJQoAPcI9VhTaAhWA9k=
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npm.taobao.org/url/download/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -8798,6 +8829,14 @@ vue-loader@^15.9.1:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-plyr@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.npm.taobao.org/vue-plyr/download/vue-plyr-6.0.4.tgz#78834dc74537ae306d18d9e2e5cb0d42a1718efd"
+  integrity sha1-eINNx0U3rjBtGNni5csNQqFxjv0=
+  dependencies:
+    plyr "^3.5.6"
+    vue "^2.6.10"
+
 vue-router@^3.1.6:
   version "3.3.1"
   resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.3.1.tgz?cache=0&sync_timestamp=1590599727341&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.3.1.tgz#7d0545dd8ebf4f45494ca185b7eccb38d67689c1"
@@ -8824,7 +8863,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
 
-vue@^2.6.11:
+vue@^2.6.10, vue@^2.6.11:
   version "2.6.11"
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha1-dllNh31LEiNEBuhONSdcbVFBJcU=