Update index.tsx

src/components/col-video/index.tsx

@@ -82,7 +82,32 @@ export default defineComponent({
       showSeeStatus: true // 是否显示试看状态
     }
   },
+  watch: {
+    src() {
+      console.log('src, change')
+      this._init()
+    }
+  },
   mounted() {
+    const Button = TCPlayer.getComponent('Button')
+    const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
+    BigPlayButton.prototype.createEl = function () {
+      const el = Button.prototype.createEl.call(this)
+      const _html =
+        '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>'
+
+      el.appendChild(
+        TCPlayer.dom.createEl('div', {
+          className: 'vjs-button-icon',
+          innerHTML: _html
+        })
+      )
+      return el
+    }
+    this.player = TCPlayer(this.videoID, {
+      appID: '',
+      controls: true
+    }) // player-container-id 为播放器容器 ID，必须与 html 中一致
     this._init()
 
     listenerMessage('setVideoPlayer', result => {
@@ -208,26 +233,7 @@ export default defineComponent({
       //   i && i.remove()
       // })
 
-      const Button = TCPlayer.getComponent('Button')
-      const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
-      BigPlayButton.prototype.createEl = function () {
-        const el = Button.prototype.createEl.call(this)
-        const _html =
-          '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>'
-
-        el.appendChild(
-          TCPlayer.dom.createEl('div', {
-            className: 'vjs-button-icon',
-            innerHTML: _html
-          })
-        )
-        return el
-      }
-      this.player = TCPlayer(this.videoID, {
-        appID: '',
-        controls: true
-      }) // player-container-id 为播放器容器 ID，必须与 html 中一致
-      if (this.player) {
+      if (this.player && this.src) {
         this.player.src(this.src) // url 播放地址
         this.player.poster(this.poster || '')