feats

config/index.js

@@ -12,10 +12,10 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://192.168.0.67:8080',
+        target: 'http://192.168.1.179',
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
         pathRewrite: {
-          '^/api': '/'
+          '^/api': '/api'
         },
       },
     },

package-lock.json

@@ -205,6 +205,20 @@
       "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==",
       "dev": true
     },
+    "@videojs/http-streaming": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-1.5.1.tgz",
+      "integrity": "sha512-Pc3aVr4SRINFLhUWjTofVjQ9iMjs9myXnyfJ0AdW0c4bLwJ0Fw7HUsbns+qseuBzVJe01i7J2R/DE1Y4hFgblA==",
+      "requires": {
+        "aes-decrypter": "3.0.0",
+        "global": "^4.3.0",
+        "m3u8-parser": "4.2.0",
+        "mpd-parser": "0.7.0",
+        "mux.js": "5.0.1",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^6.8.0 || ^7.0.0"
+      }
+    },
     "abab": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz",
@@ -291,6 +305,16 @@
       "integrity": "sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==",
       "dev": true
     },
+    "aes-decrypter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.0.0.tgz",
+      "integrity": "sha1-eEihwUW5/b9Xrj4rWxvHzwZEqPs=",
+      "requires": {
+        "commander": "^2.9.0",
+        "global": "^4.3.2",
+        "pkcs7": "^1.0.2"
+      }
+    },
     "agent-base": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-2.1.1.tgz",
@@ -2872,8 +2896,7 @@
     "commander": {
       "version": "2.17.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
-      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
-      "dev": true
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -3661,7 +3684,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
       "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "dev": true,
       "requires": {
         "object-keys": "^1.0.12"
       }
@@ -3934,6 +3956,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
+      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
+    },
     "dom7": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.2.tgz",
@@ -4135,7 +4162,6 @@
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.12.0.tgz",
       "integrity": "sha512-C8Fx/0jFmV5IPoMOFPA9P9G5NtqW+4cOPit3MIuvR2t7Ag2K15EJTpxnHAYTzL+aYQJIESYeXZmDBfOBE1HcpA==",
-      "dev": true,
       "requires": {
         "es-to-primitive": "^1.1.1",
         "function-bind": "^1.1.1",
@@ -4148,7 +4174,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
       "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
-      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -5161,6 +5186,14 @@
         }
       }
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -5860,8 +5893,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -5996,6 +6028,22 @@
         "is-glob": "^2.0.0"
       }
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "globals": {
       "version": "9.18.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
@@ -6106,7 +6154,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -6129,8 +6176,7 @@
     "has-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
-      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
-      "dev": true
+      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
     },
     "has-unicode": {
       "version": "2.0.1",
@@ -6600,6 +6646,11 @@
       "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -6756,8 +6807,7 @@
     "is-callable": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
-      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
-      "dev": true
+      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA=="
     },
     "is-ci": {
       "version": "1.2.1",
@@ -6780,8 +6830,7 @@
     "is-date-object": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
-      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
-      "dev": true
+      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
     },
     "is-descriptor": {
       "version": "0.1.6",
@@ -6850,6 +6899,11 @@
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
+      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
+    },
     "is-generator-fn": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz",
@@ -6943,7 +6997,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
       "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
-      "dev": true,
       "requires": {
         "has": "^1.0.1"
       }
@@ -6973,7 +7026,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
       "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.0"
       }
@@ -8172,6 +8224,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.2.0.tgz",
+      "integrity": "sha512-LVHw0U6IPJjwk9i9f7Xe26NqaUHTNlIt4SSWoEfYFROeVKHN6MIjOhbRheI3dg8Jbq5WCuMFQ0QU3EgZpmzFPg=="
+    },
     "make-dir": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
@@ -8383,6 +8440,14 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -8576,6 +8641,15 @@
         "run-queue": "^1.0.3"
       }
     },
+    "mpd-parser": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.7.0.tgz",
+      "integrity": "sha512-nkzVIkecaDz3q7p4ToN3GR0FV2Odbh0w2sJ8ijsyw79JcBrJoUD3KHIiI8gL0hEDlex7mrVpTxXBsRHowUBmPw==",
+      "requires": {
+        "global": "^4.3.2",
+        "url-toolkit": "^2.1.1"
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -8603,6 +8677,11 @@
       "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
       "dev": true
     },
+    "mux.js": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.0.1.tgz",
+      "integrity": "sha512-yfmJ9CaLGSyRnEwqwzvISSZe6EdcvXIsgapZfuNNFuUQUlYDwltnCgZqV6IG90daY4dYTemK/hxMoxI1bB6RjA=="
+    },
     "nan": {
       "version": "2.11.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz",
@@ -9043,8 +9122,7 @@
     "object-keys": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
-      "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
-      "dev": true
+      "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag=="
     },
     "object-visit": {
       "version": "1.0.1",
@@ -9381,6 +9459,15 @@
         "is-glob": "^2.0.0"
       }
     },
+    "parse-headers": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.2.tgz",
+      "integrity": "sha512-/LypJhzFmyBIDYP9aDVgeyEb5sQfbfY5mnDq4hVhlQ69js87wXfmEI5V3xI6vvXasqebp0oCytYFLxsBVfCzSg==",
+      "requires": {
+        "for-each": "^0.3.3",
+        "string.prototype.trim": "^1.1.2"
+      }
+    },
     "parse-json": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@@ -9513,6 +9600,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pkcs7": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.2.tgz",
+      "integrity": "sha1-ttulJ1KMKUK/wSLOLa/NteWQdOc="
+    },
     "pkg-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -12644,6 +12736,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -12665,6 +12765,14 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -13895,6 +14003,16 @@
         }
       }
     },
+    "string.prototype.trim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
+      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.5.0",
+        "function-bind": "^1.0.2"
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -14289,6 +14407,11 @@
         }
       }
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -14598,6 +14721,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-toolkit": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.1.6.tgz",
+      "integrity": "sha512-UaZ2+50am4HwrV2crR/JAf63Q4VvPYphe63WGeoJxeu8gmOm0qxPt+KsukfakPNrX9aymGNEkkaoICwn+OuvBw=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -14689,6 +14817,49 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "video.js": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.4.1.tgz",
+      "integrity": "sha512-UmTHiJWcil8YN65M1t/d63X6ofLtQwnvJoYEN4VKzkECYIHbgzvMRgOmrf5bNtVeDC6JsFKLZQXJ7s6Au2jgcQ==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@videojs/http-streaming": "1.5.1",
+        "global": "4.3.2",
+        "safe-json-parse": "4.0.0",
+        "tsml": "1.0.1",
+        "videojs-font": "3.1.0",
+        "videojs-vtt.js": "0.14.1",
+        "xhr": "2.4.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
+          "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
+    "videojs-font": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.1.0.tgz",
+      "integrity": "sha512-rxB68SVgbHD+kSwoNWNCHicKJuR2ga3bGfvGxmB+8fupsiLbnyCwTBVtrZUq4bZnD64mrKP1DxHiutxwrs59pQ=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.14.1.tgz",
+      "integrity": "sha512-YxOiywx6N9t3J5nqsE5WN2Sw4CSqVe3zV+AZm2T4syOc2buNJaD6ZoexSdeszx2sHLU/RRo2r4BJAXFDQ7Qo2Q==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
@@ -15561,6 +15732,17 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "xml-name-validator": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
@@ -15576,8 +15758,7 @@
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
-      "dev": true
+      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
     },
     "xxhashjs": {
       "version": "0.2.2",

package.json

@@ -18,6 +18,7 @@
     "mescroll.js": "^1.3.8",
     "solarlunar": "^2.0.7",
     "vant": "^1.4.5",
+    "video.js": "^7.4.1",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.0.1",

src/main.js

@@ -6,6 +6,7 @@ import router from './router'
 import store from './store'
 import Vant from 'vant'
 import 'vant/lib/index.css'
+// import 'video.js/dist/video-js.css'
 import toolClass from './util/util'
 import './util/polyfill'
 

src/pages/page1.vue

@@ -4,24 +4,20 @@
     <div class="content flex-h">
       <div class="flex-item">
         <div :hidden="!showSlide">
-          <!-- <swiper :options="swiperOption" ref="mySwiper">
-            <swiper-slide class="swiper-slide" v-for="(item, index) in 1" :key="index">
+          <swiper :options="swiperOption" ref="mySwiper" class="hj-swiper">
+            <swiper-slide class="swiper-slide" v-for="(item, index) in showPage" :key="index">
               <img
-                class="centerLabel cover"
-                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550835899076&di=3f786b46cffb6956608e66421b2ec859&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fe4dde71190ef76c66c3378239716fdfaae5167d1.jpg"
+                v-if="item.showType === 'image'"
+                class="centerLabel"
+                width="100%"
+                :src="'api' + item.showContent"
                 alt
               >
+              <video v-if="item.showType === 'video'" width="100%" height="100%" id="hj-vdo" autoplay muted>
+                <source :src="'api' + item.showContent" type="video/mp4" />
+              </video>
             </swiper-slide>
-          </swiper> -->
-          <img
-            v-if="showPage.showType === 'image'"
-            class="centerLabel cover"
-            :src="'api' + showPage.showContent"
-            alt
-          >
-          <video v-if="showPage.showType === 'video'" width="100%" height="100%" controls="controls" autoplay loop muted>
-            <source :src="'api' + showPage.showContent" type="video/mp4" />
-          </video>
+          </swiper>
         </div>
         <div :hidden="showSlide">
           <ul class="centerLabel userList">
@@ -40,6 +36,8 @@
 import { createNamespacedHelpers } from 'vuex'
 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
+// import videojs from 'video.js'
+
 const { mapActions: mapUserActions } = createNamespacedHelpers('user')
 
 const { mapState: mapPageState, mapActions: mapPageActions } = createNamespacedHelpers('page')
@@ -68,7 +66,6 @@ export default {
       timer: null,
       timeNum: 0,
       swiperOption: {
-        loop: true,
         speed: 1000,
         autoplay: {
           delay: 6000,
@@ -89,7 +86,7 @@ export default {
       return ((this.news.data || {}).records || []).filter(x => x.status === 1)[0] || {}
     },
     showPage () {
-      return ((this.pages.data || {}).records || []).filter(x => x.status === 1)[0] || {}
+      return ((this.pages.data || {}).records || []).filter(x => x.status === 1) || []
     },
     mySwiper () {
       return this.$refs.mySwiper.swiper
@@ -110,8 +107,29 @@ export default {
     }, 1000 * 60 * 60)
     this.getPersonList()
   },
-  mounted () {
+  updated () {
     this.$nextTick(() => {
+      const vdo = window.document.getElementById('hj-vdo')
+      if (vdo) {
+        vdo.play()
+      }
+      // videojs('hj-vdo', {
+      //   controls: false,
+      //   autoplay: true,
+      //   loop: true,
+      //   muted: true,
+      //   preload: 'auto'
+      // })
+      // const t = window.setInterval(() => {
+      //   if (this.$refs.vdo) {
+      //     this.$refs.vdo.play()
+      //     window.clearInterval(t)
+      //   }
+      // }, 2000)
+
+      // setTimeout(() => {
+      //   window.clearInterval(t)
+      // }, 60000)
     })
   },
   methods: {
@@ -148,6 +166,9 @@ export default {
         }
       }, 100)
     },
+    videoLoad (e) {
+      e.target.play()
+    },
     init () { // 初始化
       if (!new Date().getMinutes()) { // 整点更新时间
         this.currentTimeTamp = Date.now()
@@ -204,7 +225,9 @@ export default {
     position: relative;
     overflow: hidden;
     > .flex-item {
+      height: 100%;
       position: relative;
+
       > div {
         width: 100%;
         height: 100%;
@@ -249,6 +272,10 @@ export default {
           }
         }
       }
+
+      .hj-swiper {
+        height: 100%;
+      }
     }
   }
 }

src/pages/page2.vue

@@ -61,7 +61,7 @@
             :src="'api' + showPage.showContent"
             alt
           >
-          <video v-if="showPage.showType === 'video'" width="100%" height="100%" controls="controls" autoplay loop muted>
+          <video v-if="showPage.showType === 'video'" width="100%" height="100%" id="hj-vdo" autoplay muted>
             <source :src="'api' + showPage.showContent" type="video/mp4" />
           </video>
         </div>
@@ -84,6 +84,7 @@ import { createNamespacedHelpers } from 'vuex'
 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import solarLunar from 'solarLunar'
+// import videojs from 'video.js'
 const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 
 const { mapState: mapPageState, mapActions: mapPageActions } = createNamespacedHelpers('page')
@@ -171,8 +172,29 @@ export default {
     }, 1000 * 60 * 60)
     this.getPersonList()
   },
-  mounted () {
+  updated () {
     this.$nextTick(() => {
+      const vdo = window.document.getElementById('hj-vdo')
+      if (vdo) {
+        vdo.play()
+      }
+      // videojs('hj-vdo', {
+      //   controls: false,
+      //   autoplay: true,
+      //   loop: true,
+      //   muted: true,
+      //   preload: 'auto'
+      // })
+      // const t = window.setInterval(() => {
+      //   if (this.$refs.vdo) {
+      //     this.$refs.vdo.play()
+      //     window.clearInterval(t)
+      //   }
+      // }, 2000)
+
+      // setTimeout(() => {
+      //   window.clearInterval(t)
+      // }, 60000)
     })
   },
   methods: {