uni-app 视频+图片轮播

Question

问题uni-app视频+图片轮播

在swiper标签里面video标签无法左右滚动，手机真机运行

在插件市场找了相关插件，只能满足h5和安卓端ios不行

兼容性太差，大概需要nvue实现吧

Answer 1

针对你提出的问题，我了解到在swiper标签中添加video标签后无法左右滚动的问题。你可以尝试使用swiper插件自定义组件来实现同时展示图片和视频的滚动轮播。下面是具体的步骤：

在uni-app项目中安装swiper插件：
npm install uni-movable-view
创建一个自定义组件（例如：custom-swiper）。

在自定义组件的模板中添加swiper和movable-view标签来实现轮播效果：

html
<template>
  <view class="custom-swiper">
    <swiper :autoplay="true" :interval="3000" @change="swiperChange">
      <swiper-item v-for="(item, index) in datas" :key="index">
        <movable-view class="swiper-item" :style="{ width: '100%' }">
          <img v-if="item.type === 'image'" :src="item.url" />
          <video v-else controls :src="item.url" muted playsinline></video>
        </movable-view>
      </swiper-item>
    </swiper>
  </view>
</template>

在自定义组件的脚本中，设置datas数组，包含要展示的图片和视频数据。

在swiperChange事件中监测滑动状态，当滑动到包含video标签的轮播项时，使用pause方法暂停播放正在播放的video标签。

javascript
export default {
  data() {
    return {
      datas: [
        { type: 'image', url: 'xxx' },
        { type: 'image', url: 'xxx' },
        { type: 'video', url: 'xxx' },
        // ...
      ]
    }
  },
  methods: {
    swiperChange(e) {
      const currentIndex = e.detail.current
      const swiperItems = this.$refs.swiper ? this.$refs.swiper.$el.querySelectorAll('.swiper-item') : []
      
      if (swiperItems[currentIndex].querySelector('video')) {
        const videoEl = swiperItems[currentIndex].querySelector('video')
        if (!videoEl.paused) {
          videoEl.pause()
        }
      }
    }
  }
}

这个方法可以同时支持图片和视频的轮播，并解决了在部分机型上video标签左右滑动无法响应的问题。同时，在nvue中，该方法也可以正常工作（需要注意在nvue中video标签的使用限制）。

希望这个回答能够解决你的问题，如果还有任何疑问，请随时询问。