uni-app 视频+图片轮播

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

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

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

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

针对你提出的问题，我了解到在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标签的使用限制）。

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

答案参考ChapGPT Plus . 希望对你有帮助当自定义一个轮播组件时，你可以结合uni-app的组件开发能力、swiper组件和video标签来实现图片和视频的播放。以下是一个示例代码，供你参考：

<template>
  <swiper class="swiper" :autoplay="autoplay" :interval="interval" :circular="circular">
    <swiper-item v-for="(item, index) in dataList" :key="index">
      <video v-if="item.type === 'video'" class="video" :src="item.url" controls></video>
      <img v-else class="image" :src="item.url" />
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { type: 'image', url: 'path/to/image1.jpg' },
        { type: 'video', url: 'path/to/video1.mp4' },
        { type: 'image', url: 'path/to/image2.jpg' },
        // 添加更多的图片和视频项
      ],
      autoplay: true,
      interval: 3000,
      circular: true,
    };
  },
};
</script>

<style>
.swiper {
  width: 100%;
  height: 300px; /* 设置轮播容器的高度 */
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video {
  width: 100%;
  height: 100%;
}
</style>

上述代码中，使用了uni-app的swiper组件来实现轮播效果，并根据数据列表（dataList）的项类型判断是图片还是视频。根据需求，你可以自定义更多的图片和视频项，并在dataList中添加对应的数据。

需要注意的是，视频需要在video标签中设置controls属性以显示控制条。此外，你可以根据需要调整轮播容器的高度（在样式中设置）。其他样式也可以根据需求进行调整。

这只是一个简单示例，你可以根据自己的具体需求进行扩展和定制。希望对你有帮助！

麻烦采纳一下哈，谢谢啦

如果您在 swiper 标签中使用 video 标签无法左右滚动，可能是因为 video 标签默认会阻止父元素的滚动事件。这个问题可以通过设置 video 标签的 pointer-events CSS 属性为 none 来解决。这样可以使 video 标签不响应鼠标事件，从而让父元素可以正常滚动。具体实现方法如下：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <video src="your_video_url.mp4" preload="metadata" style="pointer-events: none;"></video>
    </div>
    <!-- 其他 swiper slide -->
  </div>
  <div class="swiper-pagination"></div>
</div>

在这个代码中，我们给 video 标签添加了 style="pointer-events: none;" 的属性，这样可以禁用 video 标签的鼠标事件。这样就可以在 swiper 中正常滚动带有 video 标签的 slide 了。

如果您需要在 nvue 中实现类似的效果，可以使用 uni-ui 组件库中的 uni-swiper 组件。uni-swiper 组件支持在 swiper 中嵌套 video 标签，并且可以正常滚动。具体使用方法可以参考官方文档：https://uniapp.dcloud.io/component/swiper?id=swiper-nested

有没有试过通过css 来修复

拿走不谢：




<template>

  <view class="container">

    <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">

      <swiper-item v-for="(item, index) in items" :key="index">

        <video :src="item.videoSrc" controls></video>

      </swiper-item>

    </swiper>

    <swiper indicator-dots="false" autoplay="true" interval="3000" duration="500">

      <swiper-item v-for="(item, index) in images" :key="index">

        <image :src="item.imageSrc"></image>

      </swiper-item>

    </swiper>

  </view>

</template>



<script>

export default {

  data() {

    return {

      items: [

        { videoSrc: 'https://example.com/video1.mp4' },

        { videoSrc: 'https://example.com/video2.mp4' },

        { videoSrc: 'https://example.com/video3.mp4' }

      ],

      images: [

        { imageSrc: 'https://example.com/image1.jpg' },

        { imageSrc: 'https://example.com/image2.jpg' },

        { imageSrc: 'https://example.com/image3.jpg' }

      ]

    }

  }

}

</script>



<style scoped>

.container {

  display: flex;

  justify-content: center;

  align-items: center;

}

</style>

这篇博客也许可以解决你的问题👉 ：Uniapp自定义video播放按钮并结合swiper图片

uni-app 轮播图视频+图片视频图片全屏预览两种方法
https://blog.csdn.net/lfwoman/article/details/127879214

回答部分参考、引用ChatGpt以便为您提供更准确的答案：

根据您提供的信息和报错截图，您遇到了使用Webpack打包CSS文件时的报错。根据截图中的报错信息，可以看到以下错误提示：

Module not found: Error: Can't resolve 'style-loader' in '<your_project_path>'

这个错误提示表明Webpack在解析配置文件时找不到名为'style-loader'的模块。根据您提供的步骤，似乎已经正确安装了'style-loader'和'css-loader'插件，并且在Webpack配置文件中进行了相应的配置。

请按照以下步骤检查和解决问题：

确保在项目根目录下执行了正确的依赖安装命令：npm install 或 yarn install。这将根据项目的package.json文件安装所需的依赖项。
确认已在package.json文件中的devDependencies或dependencies部分找到了'style-loader'和'css-loader'的正确版本信息。
检查Webpack配置文件（通常是webpack.config.js），确保已正确引入所需的loader和插件。您的配置应该类似于以下示例：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      // ...其他规则
    ],
  },
  // ...其他配置项
};

如果以上步骤都正确无误，但仍然报错，请尝试删除node_modules目录，并重新安装依赖项。执行以下命令：

npm clean cache --force
npm install

重新安装依赖后，再次尝试运行yarn run build或相关打包命令，查看是否解决了报错问题。

如果问题仍然存在，可能还需要进一步检查您的环境配置、Webpack版本以及其他相关依赖项的兼容性等因素。