feat: ✨ Swiper 轮播视频支持控制静音播放和循环播放 (#855)

✅ Closes: #846
Moonofweisheng · Jan 18, 2025 · 7a0d5ce · 7a0d5ce
1 parent 21fbfbb
commit 7a0d5ce
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/docs/component/swiper.md b/docs/component/swiper.md
@@ -327,6 +327,8 @@ const isLoop = ref(false)
 | text-key          | 选项对象中，标题 text 对应的 key        | `string`       | -       | `text`           | 1.3.13   |
 | adjust-height      | 自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整，仅支付宝小程序支持。| `string`       | `'first' \| 'current' \| 'highest' \| 'none'`       |   `highest`  | 1.3.13   |
 | adjust-vertical-height | vertical 为 true 时强制使 adjust-height 生效。仅支付宝小程序支持。 | `boolean`       | -       | `false`           | 1.3.13   |
+｜ muted | 视频是否静音播放 | `boolean` | - | `true` | $LOWEST_VERSION$ |
+| videoLoop | 视频是否循环播放 | `boolean` | - | `true` | $LOWEST_VERSION$ |
 
 
 

diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts b/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts
@@ -115,6 +115,20 @@ export const swiperProps = {
    */
   loop: makeBooleanProp(true),
 
+  /**
+   * 视频是否循环播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  videoLoop: makeBooleanProp(true),
+
+  /**
+   * 视频是否静音播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  muted: makeBooleanProp(true),
+
   /**
    * 后边距
    * 类型：number 或 string（数字或可转换为数字的字符串）

diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue b/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
@@ -30,8 +30,8 @@
           @play="handleVideoPaly"
           @pause="handleVideoPause"
           :enable-progress-gesture="false"
-          loop
-          muted
+          :loop="videoLoop"
+          :muted="muted"
           :autoplay="autoplayVideo"
           objectFit="cover"
           @click="handleClick(index, item)"