feat：优化文章详情页视频播放

@@ -126,7 +126,19 @@ export struct WdWebLocalComponent {
 
           if (this.videoUrl) {
             Stack({ alignContent: Alignment.Bottom }) {
-              this.videoComp()
+              ForEach([this.videoUrl], (compIndex: number) => {
+                ///解决播放器复用问题，后期优化（第二段视频播放器会先闪现第一段视频的画面）
+                ListItem() {
+                  this.videoComp()
+                }
+                .onClick(() => {
+                  if (this.progressOpacity <= 0) {
+                    this.progressOpacity = 1
+                  } else {
+                    this.progressOpacity = 0
+                  }
+                })
+              })
             }
             .width(this.positionWidth)
             .height(this.positionHeight)
@@ -281,15 +293,6 @@ export struct WdWebLocalComponent {
           WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT)
         }
       })
-      .onClick(() => {
-        // animateTo({duration: 1000}, () => {
-          if (this.progressOpacity <= 0) {
-            this.progressOpacity = 1
-          } else {
-            this.progressOpacity = 0
-          }
-        // })
-      })
 
     if (this.isEndPlay){
       Column(){
@@ -307,74 +310,80 @@ export struct WdWebLocalComponent {
       .width(this.positionWidth)
       .height(this.positionHeight)
     }else {
-      Row() {
-        Image(this.isPause ? $r('app.media.icon_play') : $r('app.media.icon_pause'))
-          .interpolation(ImageInterpolation.Medium)
-          .width(24)
-          .height(24)
-          .onClick(() => {
-            if (this.isPause) {
-              this.startPlay()
-            } else {
-              this.controller.pause()
-              this.cancelProgressTimer()
-            }
-          }).margin({right:16})
-
+      Column(){
         Row() {
-          Text(DateTimeUtils.getFormattedDuration(this.currentTime * 1000))
-            .fontSize(12)
-            .fontColor(Color.White)
-            .fontWeight(600)
-
-          Slider({
-            value: this.currentTime,
-            min: 0,
-            max: this.durationTime
-          })
-            .width("50%")
-            .selectedColor('#ED2800')
-            .trackColor("#1AFFFFFF")
-            .trackThickness(2)
-            .margin({ left: 4, right: 4 })
-            .blockStyle({
-              type: SliderBlockType.IMAGE,
-              image: $r('app.media.slider_block')
-            })
-            .blockSize({ width: 14, height: 10 })
-            .onChange((value: number, mode: SliderChangeMode) => {
-              this.controller.setCurrentTime(value);
-              if (mode == SliderChangeMode.End) {
-                if (this.isPause) {
-                  this.startPlay()
-                } else {
-                  this.startProgressTimer()
-                }
+          Image(this.isPause ? $r('app.media.icon_play') : $r('app.media.icon_pause'))
+            .interpolation(ImageInterpolation.Medium)
+            .width(24)
+            .height(24)
+            .onClick(() => {
+              if (this.isPause) {
+                this.startPlay()
+              } else {
+                this.controller.pause()
+                this.cancelProgressTimer()
               }
+            }).margin({right:16})
+
+          Row() {
+            Text(DateTimeUtils.getFormattedDuration(this.currentTime * 1000))
+              .fontSize(12)
+              .fontColor(Color.White)
+              .fontWeight(600)
+
+            Slider({
+              value: this.currentTime,
+              min: 0,
+              max: this.durationTime
             })
-          Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000))
-            .fontSize(12)
-            .fontColor(Color.White)
-            .fontWeight(600)
-        }.alignItems(VerticalAlign.Center)
+              .width("50%")
+              .selectedColor('#ED2800')
+              .trackColor("#1AFFFFFF")
+              .trackThickness(2)
+              .margin({ left: 4, right: 4 })
+              .blockStyle({
+                type: SliderBlockType.IMAGE,
+                image: $r('app.media.slider_block')
+              })
+              .blockSize({ width: 14, height: 10 })
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.controller.setCurrentTime(value);
+                if (mode == SliderChangeMode.End) {
+                  if (this.isPause) {
+                    this.progressTimerNumber = 0
+                    this.startPlay()
+                  } else {
+                    this.startProgressTimer()
+                  }
+                }
+              })
+            Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000))
+              .fontSize(12)
+              .fontColor(Color.White)
+              .fontWeight(600)
+          }.alignItems(VerticalAlign.Center)
+          .height(48)
+
+          // Image($r('app.media.icon_full_screen'))
+          //   .width(24)
+          //   .height(24)
+          //   .onClick(() => {
+          //     this.controller.requestFullscreen(true)
+          //   })
+        }
+        .opacity(this.progressOpacity)
+        .linearGradient({
+          direction: GradientDirection.Top, // 渐变方向
+          colors: [[0x20000000, 0.0], [Color.Transparent, 1.0]] // [0x80000000, 0.5],
+        })
+        .width("100%")
         .height(48)
-
-        // Image($r('app.media.icon_full_screen'))
-        //   .width(24)
-        //   .height(24)
-        //   .onClick(() => {
-        //     this.controller.requestFullscreen(true)
-        //   })
+        .padding({left:16})
+        .alignItems(VerticalAlign.Center)
       }
-      .opacity(this.progressOpacity)
-      .linearGradient({
-        direction: GradientDirection.Top, // 渐变方向
-        colors: [[0x20000000, 0.0], [Color.Transparent, 1.0]] // [0x80000000, 0.5],
-      })
-      .width("100%")
-      .height(48)
-      .padding({left:16})
-      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.End)
+      .width(this.positionWidth)
+      .height(this.positionHeight)
     }
   }