使用 xgplayer

package-lock.json

@@ -2212,6 +2212,11 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "http://registry.npm.taobao.org/amdefine/download/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npm.taobao.org/ansi-colors/download/ansi-colors-3.2.4.tgz",
@@ -2251,7 +2256,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
       "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -3184,7 +3188,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1591687042638&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
       "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -3508,7 +3511,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
       "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -3516,8 +3518,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.3",
@@ -3547,8 +3548,7 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npm.taobao.org/commander/download/commander-2.20.3.tgz?cache=0&sync_timestamp=1598576136669&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.20.3.tgz",
-      "integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM=",
-      "dev": true
+      "integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM="
     },
     "commondir": {
       "version": "1.0.1",
@@ -4146,6 +4146,23 @@
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
       "dev": true
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/d/download/d-1.0.1.tgz",
+      "integrity": "sha1-hpgJU3LVjb7jRv/Qxwk/mfj561o=",
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
+    "danmu.js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmmirror.com/danmu.js/download/danmu.js-0.5.10.tgz",
+      "integrity": "sha1-YW8wjzU+78H3ucaKhVEwscOIjL8=",
+      "requires": {
+        "event-emitter": "^0.3.5"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npm.taobao.org/dashdash/download/dashdash-1.14.1.tgz?cache=0&sync_timestamp=1601073381998&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdashdash%2Fdownload%2Fdashdash-1.14.1.tgz",
@@ -4620,6 +4637,11 @@
       "integrity": "sha1-P7rwIL/XlIhAcuomsel5HUWmKfA=",
       "dev": true
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npm.taobao.org/downloadjs/download/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "dplayer": {
       "version": "1.26.0",
       "resolved": "https://registry.npm.taobao.org/dplayer/download/dplayer-1.26.0.tgz",
@@ -4630,6 +4652,15 @@
         "promise-polyfill": "8.1.3"
       }
     },
+    "draggabilly": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/draggabilly/download/draggabilly-2.4.1.tgz",
+      "integrity": "sha512-HHHLPEPZqRXIDQDFRFdK7RONZausNlJ4WkA73ST7Z6O2HPWttxFHVwHo8nccuDLzXWwiVKRVuc6fTkW+CQA++A==",
+      "requires": {
+        "get-size": "^2.0.2",
+        "unidragger": "^2.4.0"
+      }
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fduplexer%2Fdownload%2Fduplexer-0.1.2.tgz",
@@ -4837,11 +4868,40 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-ext": {
+      "version": "0.10.53",
+      "resolved": "https://registry.npm.taobao.org/es5-ext/download/es5-ext-0.10.53.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fes5-ext%2Fdownload%2Fes5-ext-0.10.53.tgz",
+      "integrity": "sha1-k8WjrP2+8nUiCtcmRK0C7hg2jeE=",
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "http://registry.npm.taobao.org/es6-iterator/download/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
     "es6-promise": {
       "version": "4.2.8",
       "resolved": "https://registry.npm.taobao.org/es6-promise/download/es6-promise-4.2.8.tgz",
       "integrity": "sha1-TrIVlMlyvEBVPSduUQU5FD21Pgo="
     },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npm.taobao.org/es6-symbol/download/es6-symbol-3.1.3.tgz",
+      "integrity": "sha1-utXTwbzawoJp9MszHkMceKxwXRg=",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "escalade": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/escalade/download/escalade-3.1.0.tgz?cache=0&sync_timestamp=1600103337623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescalade%2Fdownload%2Fescalade-3.1.0.tgz",
@@ -4857,8 +4917,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint": {
       "version": "6.8.0",
@@ -5089,6 +5148,20 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.nlark.com/ev-emitter/download/ev-emitter-1.1.1.tgz",
+      "integrity": "sha1-jxiwzlx2pdGAF/ccCnlcZbkTjyo="
+    },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "http://registry.npm.taobao.org/event-emitter/download/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
     "event-pubsub": {
       "version": "4.3.0",
       "resolved": "https://registry.npm.taobao.org/event-pubsub/download/event-pubsub-4.3.0.tgz",
@@ -5251,6 +5324,21 @@
         }
       }
     },
+    "ext": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/ext/download/ext-1.6.0.tgz",
+      "integrity": "sha1-OHHVBkHodMwXLitT+RmELRnbTFI=",
+      "requires": {
+        "type": "^2.5.0"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npm.taobao.org/type/download/type-2.5.0.tgz",
+          "integrity": "sha1-Ci54wud5B7JSq+XymMGwHGPw2z0="
+        }
+      }
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
@@ -5740,6 +5828,30 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "generate-source-map": {
+      "version": "0.0.5",
+      "resolved": "https://registry.nlark.com/generate-source-map/download/generate-source-map-0.0.5.tgz",
+      "integrity": "sha1-8SVfMWU8sCMeZxOn3IN1r08zpQk=",
+      "requires": {
+        "esprima": "~1.2.2",
+        "source-map": "~0.1.34"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "1.2.5",
+          "resolved": "http://registry.npm.taobao.org/esprima/download/esprima-1.2.5.tgz",
+          "integrity": "sha1-CZNQL+r2aBODJXVvMPmlH+7sEek="
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.1.43.tgz",
+          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
     "gensync": {
       "version": "1.0.0-beta.1",
       "resolved": "https://registry.npm.taobao.org/gensync/download/gensync-1.0.0-beta.1.tgz",
@@ -5752,6 +5864,11 @@
       "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=",
       "dev": true
     },
+    "get-size": {
+      "version": "2.0.3",
+      "resolved": "https://registry.nlark.com/get-size/download/get-size-2.0.3.tgz",
+      "integrity": "sha1-VKHQJWsg6nrGRlFnViAnaZQa0u8="
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npm.taobao.org/get-stream/download/get-stream-4.1.0.tgz?cache=0&sync_timestamp=1597056535605&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fget-stream%2Fdownload%2Fget-stream-4.1.0.tgz",
@@ -5830,8 +5947,7 @@
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz?cache=0&sync_timestamp=1588086924019&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.4.tgz",
-      "integrity": "sha1-Ila94U02MpWMRl68ltxGfKB6Kfs=",
-      "dev": true
+      "integrity": "sha1-Ila94U02MpWMRl68ltxGfKB6Kfs="
     },
     "gzip-size": {
       "version": "5.1.1",
@@ -5894,8 +6010,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -7008,7 +7123,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -7691,6 +7805,11 @@
       "integrity": "sha1-tKr7k+OustgXTKU88WOrfXMIMF8=",
       "dev": true
     },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/next-tick/download/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
@@ -9937,11 +10056,11 @@
       }
     },
     "shaka-player": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmmirror.com/shaka-player/download/shaka-player-3.2.1.tgz",
-      "integrity": "sha1-vHo8NADrggTEqixhvEL/obCLIo8=",
+      "version": "2.5.23",
+      "resolved": "https://registry.npmmirror.com/shaka-player/download/shaka-player-2.5.23.tgz",
+      "integrity": "sha1-25LRxs8jFPAYCizsEbDi8lYDNvU=",
       "requires": {
-        "eme-encryption-scheme-polyfill": "^2.0.3"
+        "eme-encryption-scheme-polyfill": "^2.0.1"
       }
     },
     "shallow-clone": {
@@ -10611,7 +10730,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1598611878833&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
       "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -10951,6 +11069,11 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
       "dev": true
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/type/download/type-1.2.0.tgz",
+      "integrity": "sha1-hI3XaY2vo+VKbEeedZxLw/GIR6A="
+    },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npm.taobao.org/type-check/download/type-check-0.3.2.tgz?cache=0&sync_timestamp=1585882977555&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftype-check%2Fdownload%2Ftype-check-0.3.2.tgz",
@@ -11034,6 +11157,14 @@
       "integrity": "sha1-3Vepn2IHvt/0Yoq++5TFDblByPQ=",
       "dev": true
     },
+    "unidragger": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/unidragger/download/unidragger-2.4.0.tgz",
+      "integrity": "sha512-MueZK2oXuGE6OAlGKIrSXK2zCq+8yb1QUZgqyTDCSJzvwYL0g2Llrad+TtoQTYxtFnNyxxSw0IMnKNIgEMia1w==",
+      "requires": {
+        "unipointer": "^2.4.0"
+      }
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/union-value/download/union-value-1.0.1.tgz",
@@ -11046,6 +11177,14 @@
         "set-value": "^2.0.1"
       }
     },
+    "unipointer": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/unipointer/download/unipointer-2.4.0.tgz",
+      "integrity": "sha512-VjzDLPjGK7aYpQKH7bnDZS8X4axF5AFU/LQi+NQe1oyEHfaz6lWKhaQ7n4o7vJ1iJ4i2T0quCIfrQM139p05Sw==",
+      "requires": {
+        "ev-emitter": "^1.0.1"
+      }
+    },
     "uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/uniq/download/uniq-1.0.1.tgz",
@@ -11079,8 +11218,7 @@
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-0.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-0.1.2.tgz",
-      "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=",
-      "dev": true
+      "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY="
     },
     "unpipe": {
       "version": "1.0.0",
@@ -12286,6 +12424,50 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xgplayer": {
+      "version": "2.31.4",
+      "resolved": "https://registry.npmmirror.com/xgplayer/download/xgplayer-2.31.4.tgz",
+      "integrity": "sha512-apuAucT8RMsC8t0lattoBI9g8o9Pf7ZP7G5Eh5T7CpYAC7WA8zWZiWSunidc3rAs9HZmROhRtd1RhPnIyXGJjg==",
+      "requires": {
+        "chalk": "^2.3.2",
+        "commander": "^2.15.1",
+        "danmu.js": "^0.5.9",
+        "downloadjs": "1.4.7",
+        "draggabilly": "^2.2.0",
+        "event-emitter": "^0.3.5",
+        "fs-extra": "^5.0.0",
+        "xgplayer-subtitles": "^1.0.19"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "5.0.0",
+          "resolved": "https://registry.nlark.com/fs-extra/download/fs-extra-5.0.0.tgz?cache=0&sync_timestamp=1620083868277&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffs-extra%2Fdownload%2Ffs-extra-5.0.0.tgz",
+          "integrity": "sha1-QU0BEM3QZwVzTQVWUsVBEmDDGr0=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        }
+      }
+    },
+    "xgplayer-shaka": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/xgplayer-shaka/download/xgplayer-shaka-1.1.5.tgz",
+      "integrity": "sha1-HqhYsHe5l8brAtvMZZgwliu1po8=",
+      "requires": {
+        "shaka-player": "^2.4.0"
+      }
+    },
+    "xgplayer-subtitles": {
+      "version": "1.0.21",
+      "resolved": "https://registry.npmmirror.com/xgplayer-subtitles/download/xgplayer-subtitles-1.0.21.tgz",
+      "integrity": "sha1-btQ2EJIP27Gj/JYGSAFdEVw9wkw=",
+      "requires": {
+        "eventemitter3": "^4.0.7",
+        "generate-source-map": "0.0.5"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz",

package.json

@@ -28,7 +28,9 @@
     "vue-router": "^3.4.5",
     "vuetify": "^2.3.12",
     "vuex": "^3.4.0",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^4.1.0",
+    "xgplayer": "^2.31.4",
+    "xgplayer-shaka": "^1.1.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.6",

src/components/player/player.vue

@@ -4,16 +4,13 @@
 
 <script>
 import { videoUrl } from '@/api/media/video'
-import DPlayer from 'dplayer'
-const dashjs = require('dashjs')
-const flv = require('flv.js')
-const hls = require('hls.js')
+const Player = require('xgplayer')
+const ShakaJsPlayer = require('xgplayer-shaka')
 export default {
   name: 'Play',
   data() {
     return {
-      flv,
-      hls,
+      ShakaJsPlayer,
       videoId: ''
     }
   },
@@ -77,68 +74,57 @@ export default {
         })
     },
     initDplayer(videoId, coverUrl, videoUrl) {
-      const vidId = videoId
-      const dp = new DPlayer({
-        container: document.querySelector('#dplayer'),
-        lang: 'zh-cn',
+      console.log('初始化播放器')
+      /* const player = new ShakaJsPlayer({
+        id: 'dplayer',
+        url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/dash/xgplayer-demo-dash.mpd'
+      })*/
+
+      const player = new Player({
+        id: 'dplayer',
         autoplay: false,
-        screenshot: true,
-        video: {
-          pic: coverUrl,
-          url: videoUrl,
-          // type: 'auto'
-          type: 'customDash',
-          customType: {
-            customDash: function(video, player) {
-              dashjs.MediaPlayer().create().initialize(video, video.src, false)
+        keyShortcut: 'on',
+        volume: 0.3,
+        url: videoUrl,
+        poster: coverUrl,
+        playsinline: true,
+        thumbnail: {
+          pic_num: 44,
+          width: 160,
+          height: 90,
+          col: 10,
+          row: 10,
+          urls: ['//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg']
+        },
+        danmu: {
+          comments: [
+            {
+              duration: 15000,
+              id: '1',
+              start: 3000,
+              txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
+              style: { // 弹幕自定义样式
+                color: '#ff9500',
+                fontSize: '20px',
+                border: 'solid 1px #ff9500',
+                borderRadius: '50px',
+                padding: '5px 11px',
+                backgroundColor: 'rgba(255, 255, 255, 0.1)'
+              }
             }
+          ],
+          area: {
+            start: 0,
+            end: 1
           }
         },
-        logo: '/logo.png',
-        danmaku: {
-          id: videoId,
-          maximum: 10000,
-          api: '/api/media/danmaku/',
-          token: 'hertube',
-          user: this.userId,
-          bottom: '15%',
-          unlimited: true
-        }
-      })
-
-      // 跳转到指定秒
-      // dp.seek(100)
-
-      dp.on('play', function() {
-        console.log(vidId + ' 播放开始' + dp.video.currentTime)
-      })
-
-      dp.on('pause', function() {
-        console.log(vidId + ' 播放暂停' + dp.video.currentTime)
+        width: 1200,
+        height: 480,
+        whitelist: ['']
       })
-
-      dp.on('ended', function() {
-        // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
-        console.log(vidId + ' 播放结束' + dp.video.currentTime)
-      })
-
-      dp.on('seeking', function() {
-        console.log(vidId + ' seeking 事件 ' + dp.video.currentTime)
-      })
-
-      dp.on('seeked', function() {
-        console.log(vidId + ' seeked 事件' + dp.video.currentTime)
-      })
-
-      const interval = 5
-      var i = 0
-      dp.on('progress', function() {
-        console.log('i = ' + i)
-        if (i % interval === 0) {
-          // TODO 每 5s 向后端报告一次播放进度
-          console.log(vidId + ' 播放进度 ' + dp.video.currentTime)
-        }
-        i++
+      // player.emit('resourceReady', [{ name: '高清', url: 'url1' }, { name: '超清', url: 'url2' }])
+      player.on('play', function() {
+        console.log('视频播放')
       })
     }
   }

src/views/user/index.vue

@@ -6,7 +6,6 @@
           <v-img :src="userInfo.topImgUrl" :aspect-ratio="5.98" />
         </v-col>
       </v-row>
-
     </v-container>
     <v-container fill-height>
       <v-row align="center">
@@ -24,14 +23,14 @@
             </v-chip>
           </h2>
         </v-col>
-        <v-col
+        <!--<v-col
           v-if="this.$store.state.user.userInfo && this.$store.state.user.userInfo.id === id"
           cols="6"
           md="4"
           class="hidden-sm-and-down ml-0 pl-4"
         >
           <v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>
-        </v-col>
+        </v-col>-->
         <v-col
           v-if="this.$store.state.user.userInfo == null || this.$store.state.user.userInfo.id != id"
           cols="6"
@@ -208,5 +207,4 @@ export default {
 </script>
 
 <style>
-
 </style>