09/17 15:41

11

package-lock.json

@@ -3133,6 +3133,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": "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz",
@@ -5397,6 +5402,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?cache=0&sync_timestamp=1597081764621&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flocate-path%2Fdownload%2Flocate-path-2.0.0.tgz",
@@ -6609,6 +6619,25 @@
         "find-up": "^2.1.0"
       }
     },
+    "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"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-3.6.5.tgz",
+          "integrity": "sha1-c5XcJzrzf7LlDpvT2f6EEoUjHRo="
+        }
+      }
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz?cache=0&sync_timestamp=1596019866852&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fportfinder%2Fdownload%2Fportfinder-1.0.28.tgz",
@@ -9116,6 +9145,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",
@@ -10765,6 +10799,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-polyfill": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npm.taobao.org/url-polyfill/download/url-polyfill-1.1.10.tgz?cache=0&sync_timestamp=1595231728048&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Furl-polyfill%2Fdownload%2Furl-polyfill-1.1.10.tgz",
+      "integrity": "sha1-/Vu89myUkfpoKwy21qhV4WQ6koE="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "animate.css": "^4.1.1",
     "axios": "^0.20.0",
     "element-ui": "^2.13.2",
+    "plyr": "^3.6.2",
     "qs": "^6.9.4",
     "swiper": "^6.2.0",
     "vue": "^2.5.2",

src/App.vue

@@ -37,4 +37,7 @@ export default {
   width: 1200px;
   margin: 0 auto;
 }
+:root {
+  --plyr-color-main: #2dc7aa !important;
+}
 </style>

src/components/video/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <video ref='plyr'
+           class='c-plyr'
+           :style="{'width':width+'px','height':height+'px'}"
+           controls
+           autoplay
+           :src="src"
+           loop>
+    </video>
+  </div>
+</template>
+<script>
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+export default {
+  props: ['width', 'height', 'src'],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    let plyr = new Plyr(this.$refs.plyr)
+    console.log(plyr)
+  },
+  watch: {
+    src (val) {
+      console.log(val)
+      console.log(this.width, this.height)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/.c-plyr {
+  --plyr-color-main: #2dc7aa !important;
+}
+</style>

src/views/index/blocks/infos.vue

@@ -165,7 +165,7 @@ export default {
       }
     }
   }
-  .content {
-  }
+  // .content {
+  // }
 }
 </style>

src/views/index/blocks/videoList.vue

@@ -64,22 +64,23 @@
           <div class="videoWrap"
                v-if="activeRow.width <= 352">
             <div class="textWrap">{{activeRow.text}}</div>
-            <video :src="activeRow.src"
-                   :width="activeRow.width"
-                   :height="activeRow.height"
-                   autoplay
-                   controls
-                   loop></video>
+            <plyr :width='activeRow.width'
+                  :height="activeRow.height"
+                  :src="activeRow.src" />
           </div>
           <div v-else
                class="videoWrap1">
             <p>{{activeRow.text}}</p>
-            <video :src="activeRow.src"
+            <plyr :width='activeRow.width'
+                  :height="activeRow.height"
+                  :src="activeRow.src" />
+            <!-- <video playsinline
+                   controls
+                   :src="activeRow.src"
                    :width="activeRow.width"
                    :height="activeRow.height"
                    autoplay
-                   controls
-                   loop></video>
+                   loop></video> -->
           </div>
         </div>
       </div>
@@ -88,7 +89,12 @@
 </template>
 <script>
 import { vaidoJson } from '../../project/video'
+import plyr from '@/components/video'
+
 export default {
+  components: {
+    plyr
+  },
   data () {
     return {
       activeNum: 1,