uniapp swiper内嵌video组件的坑

### 实现轮播图组件播放视频 在 UniApp 中，`swiper` 组件可以用来创建滑块视图容器，而 `video` 组件则用于处理多媒体文件的展示。为了实现在轮播图中集成和控制视频播放的功能，可以通过以下方式来设置： #### 创建 Swiper 和 Video 结合结构 定义一个包含多个子项的 `swiper` 容器，在每个子项内放置一个 `video` 元素作为其内容的一部分。 ```html <template> <view class="container"> <!-- 轮播图 --> <swiper :indicator-dots="true" @change="handleSwiperChange"> <swiper-item v-for="(item, index) in videoList" :key="index"> <video id="myVideo" :src="item.src" controls></video> </swiper-item> </swiper> </view> </template> <script> export default { data() { return { videoList: [ { src: 'path_to_video_1.mp4' }, { src: 'path_to_video_2.mp4' } ] }; }, methods: { handleSwiperChange(e) { const currentIndex = e.detail.current; this.pauseOtherVideos(currentIndex); }, pauseOtherVideos(activeIndex) { let videos = document.querySelectorAll('#myVideo'); Array.from(videos).forEach((video, idx) => { if (idx !== activeIndex) { video.pause(); } else { video.play().catch(error => console.log('Play failed:', error)); } }); } } }; </script> ``` 这段代码展示了如何利用 Vue.js 数据绑定特性以及事件监听机制去管理多个视频实例之间的交互行为[^1]。 当用户切换到新的幻灯片时触发 `@change` 事件处理器 (`handleSwiperChange`) 并暂停其他不在当前索引位置上的所有视频；对于处于活动状态下的那个视频，则尝试自动播放它。注意这里使用了原生 DOM API 来操作 HTMLMediaElement 对象的方法如 `.pause()` 和 `.play()` ，这是因为目前版本的 uni-app 尚未完全支持通过 props 或者 ref 方式直接访问底层 media element 的属性或方法[^2]。 此外，还可以考虑给每个 `video` 设置唯一的 ID 属性以便更精确地定位特定元素，或者采用更加复杂的逻辑来自定义播放控制器样式等功能扩展[^3]。