uni-app求一款video视频+swiper轮播图的插件

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app求一款video视频+swiper轮播图的插件

uni-app官网提供的video会覆盖swiper，因此无法实现视频 + 轮播（第一张图时可以播放视频，及video组件，剩下的都是图片）的效果，求各路大神帮忙想个办法

Harmonyos Next教程
7 回复

我用H5+做了个视频滑动轮播，很流畅无卡顿感；无卡顿，当前轮播到的视频自动播放，滑动时和swiper轮播图效果一样，未切换完目标时只看到视频封面，切换完成后目标视频自动播放，有评论点赞返回这些按钮功能；


大佬有代码吗？我用的uniapp的swiper，可是有个bug，就是视频往图片切换的时候就要卡顿，图片切图片就很顺畅，求解答

h5上面轮播+video,轮播视频都是正常的, 一但放android上,轮播到视频时, 播放按钮就不见了

https://ext.dcloud.net.cn/plugin?id=664

同求

依然同求

在uni-app中，你可以通过组合使用内置组件来实现视频播放和轮播图功能，而无需额外安装插件。以下是一个简单的示例，展示了如何使用<video>组件和<swiper>组件来实现这一需求。

首先，确保你的uni-app项目已经创建并配置好。接下来，你可以在页面的.vue文件中编写以下代码：

<template>
  <view class="container">
    <!-- Video Component -->
    <video 
      class="video" 
      src="https://www.example.com/your-video.mp4" 
      controls
    ></video>

    <!-- Swiper Component -->
    <swiper 
      class="swiper" 
      indicator-dots="true" 
      autoplay="true" 
      interval="3000" 
      duration="500"
    >
      <swiper-item v-for="(item, index) in images" :key="index">
        <image :src="item" class="slide-image"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://www.example.com/image1.jpg',
        'https://www.example.com/image2.jpg',
        'https://www.example.com/image3.jpg'
      ]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.video {
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
}

.swiper {
  width: 100%;
  max-width: 600px;
  height: 300px;
}

.slide-image {
  width: 100%;
  height: 100%;
}
</style>

代码说明：

  1. <video>组件：用于嵌入视频。src属性指定视频文件的URL，controls属性添加播放控件。
  2. <swiper>组件：用于创建轮播图。indicator-dots属性显示指示点，autoplay属性设置自动播放，interval属性设置自动切换时间间隔，duration属性设置滑动动画时长。
  3. <swiper-item>组件：swiper的子组件，用于包裹每个轮播项。
  4. 数据绑定：在data函数中定义了一个images数组，用于存储轮播图的图片URL。
  5. 样式：通过<style>标签定义了容器、视频和轮播图的样式，使其在页面上居中显示，并设置适当的宽度和高度。

这个示例展示了如何在uni-app中组合使用<video>和<swiper>组件来实现视频播放和轮播图功能。你可以根据实际需求调整代码中的URL和样式。

回到顶部