swiper中插入video实现默认当前活动video进入页面自动播放

最新推荐文章于 2025-02-28 20:18:54 发布
原创 最新推荐文章于 2025-02-28 20:18:54 发布 · 5.8k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在PC端使用Swiper和video元素实现视频轮播功能，包括默认静音及自动播放的处理方法，通过监听canplaythrough事件确保视频加载完毕后自动播放。

写一篇关于自定义视频播放功能的播客

需求，pc端实现视频轮播，采用swiper+video实现，默认进入页面在页面加载完数据后，第一个视频自动播放

html部分

在当第一个视频上添加muted属性，默认为true,此属性在chrome上是静音，但是在其他浏览器可以正常播放，

 js部分

 1.获取到当前swiper拥有swiper-slide-active 属性下的video

2.currentVideo[0]   jq获取到的属性，需要[0]可以转为js对象

3.video属性 canplaythrough,在音频可以正常播放且无需停顿时执行JavaScript，通过这个属性监听该视频，如果加载完成后，可以设置为播放

 解决默认为静音的问题

设置settimeout,在页面和接口数据调取成功后，找到这个视频，判断该视频的状态，muted默认就是true,也就是静音，这里需要将它转为false，并且设置为播放

 到这里就是视频默认进去页面可以实现自动播放的功能了，

小程序swiper图片加视频播放（小程序swiper）
m0_66408078的博客
09-07 2221
根据项目需求，我们要实现一个商品的图片加视频的一个播放
swiper+vide开发一款视频和图片切换的banner
gzmyh的博客
08-31 506
功能简介：参考文档：https://3.swiper.com.cn/api/Loop/2014/1215/22.htmlhttps://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html 2.html代码 去swiper官网找一个自己想要的效果，复制html及css这里css不重要，重要的是下面的js 这段代码重点解释一下这里使用了onImagesReady这个回调函数， 这个函数的作用是：所有内置图像加载完成后执行为什么视频组件要在这个回调方
uni-app swiper里包含video，滑动不流畅问题的解决方案
忒不靠谱儿
06-01 7779
场景：轮播里要有图片还要有视频,轮播用的是swiper，视频播放用的是video。滑起来卡的不要不要的。 解决的想法： 第一步：一进入swiper自动轮播this.autoPlay=true ，视频video上面覆盖一层，再cover-view放个播放按钮，不显示video的播放按钮:show-center-play-btn=“false”，不显示video的默认播放控件（播放/暂停按钮、播放进度、时间）:controls=“controls” controls:false。 第二步：点击cover-vi
swiper中内嵌video滑动卡顿问题，已解决，上代码
liu3325262991的博客
08-12 1344
swiper中内嵌video滑动卡顿问题，已解决
swiper轮播中嵌入video视频，安卓机兼容处理
热门推荐
Aimee的博客
03-21 1万+
项目中使用swiper插件嵌套video标签 正常的swiper插件里面嵌套video标签，如下写法就够了,在ios 和PC端上完全没有问题，但是在安卓机上，播放视频后，视频的层级会居上，覆盖住下面的层，导致左右滑块被遮挡，并且滑动video标签也无法滑动。 <div class="swiper-container video-box"> <div class="swi...
html Swiper 插件 视频轮播 轮播图
01-03
使用Swiper 插件实现 类似于轮播图的视频轮播 轮播图
swiper 自动播放
weixin_30788239的博客
10-12 1306
<script type="text/javascript"> $(function(){ var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, ...
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
11-20
`autoplay`属性使得视频在加载后自动播放，这样就能实现翻页时自动停止当前页视频并播放下一页的效果。 接下来，我们关注`wxss`（微信小程序的样式表语言）中的部分： ```css cover-view {width: 100%;position: ...
精选资源
Video-Lightbox:一个 wordpress 插件，可以在灯箱中播放视频
07-02
3. **配置**：在设置菜单中，可能有 Video-Lightbox 的选项，可以设置默认的灯箱样式、视频参数等。 4. **插入视频**：在文章或页面编辑器中，使用插件提供的短代码或者 HTML 标签来插入视频链接。 **兼容性与适配*...
uniapp h5 竖向的swiper内嵌视频实现抖音短视频垂直切换，丝滑切换视频效果，无限数据加载不卡顿
国企程序媛 record 前端技术 & review code。。。
07-25 6237
博主一开始一直想实现类似抖音进入页面自动播放当前视频，上下滑动切换之后播放当前视频，但最后在ios上出现声音播放，但画面卡顿的问题，估计是ios的浏览器对自动播放做了安全限制，导致自动播放失效，为了功能的可用性，最终放弃自动播放，实现手动点击视频正中心的播放按钮进行播放，再点击视频暂停，这个bug在安卓端暂时没出现，大概率是ios的安全性更高导致的浏览器策略拦截了，需要用户手动交互。
Swiper插件实现视频轮播功能
要实现一个视频轮播，我们需要在Swiper的幻灯片中插入video元素。然后，通过调整Swiper的配置选项确保视频能够在幻灯片中全屏播放或者保持正确的宽高比。有时还需要添加一些额外的样式代码，以确保视频在播放时不会...
uniapp中使用swiper包裹video实现仿抖音刷视频
weixin_55688275的博客
04-24 2882
使用swiper包裹video实现刷视频
使用Swiper实现图片和视频的连续播放
weixin_48387433的博客
10-21 3374
轮播图，第一张是大屏，大屏播放指定时间后，轮播提供的图片，图片轮播完后轮播视频，其中每个视频都是播放完再轮播到下一个视频的。总结就是：页面 -> 图片1 -> 图片2 -> 图片3…… -> 视频1 -> 视频2 -> 视频3…… -> 页面 -> 图片1 -> 图片…… 这样循环。
微信小程序swiper 视频中间大，两边小，轮播滑到中间视频自动播放组件教程
Qensq的博客
02-19 3263
微信小程序swiper 视频中间大，两边小，轮播滑到中间视频自动播放组件教程
swiper和video实现抖音刷视频功能
poguanba的博客
12-07 1738
目前我这个小程序是可以用的，但是华为快应用不行
小程序swiper里放video产生的问题
lixu102593的博客
07-08 2601
小程序swiper里放video产生的问题
鸿蒙HarmonyOS基于Swiper组件和Video组件实现短视频切换
wqad23256的博客
02-28 1006
短视频切换在应用开发中是一种常见场景，上下滑动可以切换视频，十分方便。本模块基于Swiper组件和Video组件实现短视频切换功能。
使用uniapp开发多端短视频（用swiper+video去实现）
Hgh_1997的博客
07-14 6638
1.首先我们封装video播放器 注意：video的层级进行修改在H5中要加入x5-video-player-type="h5-page"属性进行内核处理（目前仅在微信浏览器中处理过），微信小程序IOS的版的可以动态获取video的id进行createVideoContext操作，然而安卓机中并不行，安卓机仅支持一个video的ID去操作createVideoContext <template> <view style="height: 100%;" class="vid...
记录在**swiper**里面放入video和audio遇到的神坑
记录在swiper里面放入video和audio遇到的神坑
12-20 5846
记录在swiper里面放入video和audio遇到的神坑 项目要求做一个H5页面，用户可以上传视频和音乐（包含背景音乐），并且可以翻页，还要做到无缝连接，自然而然 就用到了神一般存在的swiper，接下来分享一下我遇到的坑，以及解决方案。 当我把视频和音频文件放到swiper里面后，点击播放是如此的完美。但是这么简单怎么能行，需求是不可能停下来的， 要自定义视频和音频组件，OK，没问题，对于...
uniapp swiper中video 点击暂停/播放
最新发布
01-05
<think>我们已知用户的需求是：在uniapp的swiper组件中实现video的点击暂停和播放功能。结合引用内容，我们可以得到以下关键点： 1. 在swiper中，每个swiper-item可能包含视频（video）或其他内容（如图片）。 2. 当用户点击视频时，需要切换播放/暂停状态。 3. 在swiper切换时，需要暂停非当前项的视频，并播放当前项的视频（如果需要自动播放的话）。 根据引用[3]中的代码片段，我们可以借鉴以下思路： - 为每个视频设置一个唯一的id（例如：`myVideo0`, `myVideo1`等），以便通过`uni.createVideoContext`获取对应的上下文。 - 在swiper的change事件中，暂停上一个视频，播放当前视频。 - 同时，我们需要为每个视频添加点击事件，用于切换播放/暂停状态。 但是，用户的需求是点击暂停/播放，所以我们还需要在视频上添加一个覆盖层（cover-view）并绑定点击事件。 具体实现步骤： 1. **模板结构**： - 使用swiper组件，设置autoplay为false（因为视频的播放由我们控制）。 - 遍历数据列表，每个swiper-item中，如果是视频，则显示video组件，并设置唯一id（如`'myVideo'+index`），同时隐藏默认控件（`controls=false`）。 - 在video组件上方添加一个cover-view，用于覆盖在视频上，作为点击区域，并绑定点击事件。 2. **数据状态**： - 在data中定义current（当前swiper索引）和videoList（视频列表，可以包含视频和图片）。 - 记录每个视频的播放状态（可以是一个数组，对应每个索引的视频是否播放）。 3. **事件处理**： - **swiperChange事件**：当swiper切换时，暂停所有非当前项的视频，播放当前项的视频（如果当前项是视频且之前的状态是播放的，或者根据需求自动播放）。同时更新current。 - **视频点击事件**：点击视频时，切换该视频的播放状态（如果正在播放则暂停，如果暂停则播放）。 4. **注意事项**： - 由于cover-view是覆盖在video上的，所以需要设置合适的样式（如宽高100%），确保覆盖整个视频区域。 - 每个视频的播放状态需要独立记录，以便在点击时切换。 下面是具体代码示例： ```html <template> <view> <swiper :current="current" :autoplay="false" @change="swiperChange"> <swiper-item v-for="(item, index) in list" :key="index"> <!-- 视频项 --> <view v-if="item.type === 'video'" class="video-container"> <video :id="'myVideo' + index" :src="item.src" :controls="false" :autoplay="false" :loop="item.loop || false" @play="onPlay(index)" @pause="onPause(index)" ></video> <!-- 覆盖层，用于点击控制播放/暂停 --> <cover-view class="cover-view" @click="toggleVideo(index)"> <cover-image :src="isPlayingList[index] ? '/static/pause.png' : '/static/play.png'" class="play-icon" ></cover-image> </cover-view> </view> <!-- 图片项 --> <view v-else> <image :src="item.src" mode="aspectFill" class="image"></image> </view> </swiper-item> </swiper> </view> </template> <script> export default { data() { return { current: 0, // 当前swiper索引 list: [ // 示例数据 { type: 'video', src: 'https://example.com/video1.mp4', loop: true }, { type: 'image', src: '/static/image1.jpg' }, { type: 'video', src: 'https://example.com/video2.mp4', loop: true } ], isPlayingList: [] // 记录每个视频是否在播放的状态数组 } }, created() { // 初始化播放状态数组，全部设置为false this.isPlayingList = this.list.map(item => false); }, methods: { // 切换视频的播放状态 toggleVideo(index) { // 如果点击的不是当前swiper项的视频，则先切换到该swiper项 if (this.current !== index) { this.current = index; // 注意：这里切换swiper项后，会触发swiperChange事件，在swiperChange中会处理视频播放 return; } // 获取视频上下文 const videoContext = uni.createVideoContext('myVideo' + index, this); if (this.isPlayingList[index]) { videoContext.pause(); } else { videoContext.play(); } // 注意：这里不要直接修改isPlayingList，因为play和pause事件会触发，我们在事件回调中修改状态 }, // 当视频开始播放时触发 onPlay(index) { // 更新该视频的播放状态为true this.$set(this.isPlayingList, index, true); }, // 当视频暂停时触发 onPause(index) { // 更新该视频的播放状态为false this.$set(this.isPlayingList, index, false); }, // swiper切换事件 swiperChange(e) { const newIndex = e.detail.current; const oldIndex = this.current; this.current = newIndex; // 暂停上一个视频（如果上一个项是视频且正在播放） if (oldIndex !== null && this.list[oldIndex]?.type === 'video') { uni.createVideoContext('myVideo' + oldIndex, this).pause(); } // 自动播放当前项的视频（如果当前项是视频） if (this.list[newIndex]?.type === 'video') { // 注意：这里直接播放，但需要等待swiper切换完成，所以使用$nextTick this.$nextTick(() => { uni.createVideoContext('myVideo' + newIndex, this).play(); }); } } } } </script> <style> .video-container { position: relative; width: 100%; height: 100%; } .cover-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 10; } .play-icon { width: 80rpx; height: 80rpx; } .image { width: 100%; height: 100%; } </style> ``` ### 关键点说明 1. **覆盖层（cover-view）**：用于捕获点击事件，显示播放/暂停图标。由于video组件默认可能有播放按钮，我们通过`controls=false`隐藏了默认控件。 2. **播放状态同步**：通过video的`@play`和`@pause`事件来同步每个视频的播放状态（`isPlayingList`数组）。 3. **swiper切换处理**：在`swiperChange`事件中，暂停上一个视频（无论其状态如何），并自动播放当前视频（即使之前没有播放过，这里也可以根据需求调整，比如如果之前是暂停状态，则不需要自动播放？但示例中直接播放了）。 4. **点击视频处理**：如果点击的视频不是当前swiper项，则先切换swiper项，然后在切换完成后（在swiperChange事件中）会自动播放。如果是当前项，则切换播放状态。 ### 注意事项 - 在H5端，cover-view和cover-image可能不支持，可以使用普通view和image代替，但要注意video组件的层级问题（在微信小程序中，视频是原生组件，必须使用cover-view）。 - 自动播放策略：不同平台自动播放策略不同，可能需要用户手动触发（例如微信小程序需要用户操作才能播放），所以这里在点击事件中播放是安全的，但在swiperChange事件中自动播放可能在某些平台受限。可以考虑在swiperChange事件中不自动播放，而是等待用户点击。 如果不需要自动播放，可以修改`swiperChange`方法中播放当前视频的代码，改为只暂停上一个视频，不播放当前视频（由用户点击播放）。 ### 相关问题 1. 在uniapp的swiper中如何实现视频自动播放？ 2. uniapp中cover-view在H5端不显示怎么办？ 3. 如何解决微信小程序中video组件自动播放限制？ </think> 在 UniApp 的 swiper 组件中实现 video 点击暂停/播放功能，需要结合 swiper 切换控制和视频状态管理。以下是详细实现方案： ### 完整解决方案 ```html <template> <swiper :current="currentSwiper" :autoplay="false" @change="handleSwiperChange" > <swiper-item v-for="(item, index) in videoList" :key="index"> <!-- 视频容器 --> <view class="video-container" @click="toggleVideo(index)"> <video :id="`video_${index}`" :src="item.src" :controls="false" :show-center-play-btn="false" :autoplay="index === currentSwiper" @play="handlePlay(index)" @pause="handlePause(index)" ></video> <!-- 自定义播放按钮 --> <view class="play-btn"> <image :src="item.isPlaying ? '/static/pause.png' : '/static/play.png'" style="width: 60rpx; height: 60rpx;" /> </view> </view> </swiper-item> </swiper> </template> <script> export default { data() { return { currentSwiper: 0, // 当前swiper索引 videoList: [ { src: 'video1.mp4', isPlaying: false }, { src: 'video2.mp4', isPlaying: false }, { src: 'video3.mp4', isPlaying: false } ] } }, methods: { // 切换视频播放状态 toggleVideo(index) { const videoContext = uni.createVideoContext(`video_${index}`, this); if (this.videoList[index].isPlaying) { videoContext.pause(); } else { videoContext.play(); } }, // 处理播放事件 handlePlay(index) { this.$set(this.videoList, index, { ...this.videoList[index], isPlaying: true }); }, // 处理暂停事件 handlePause(index) { this.$set(this.videoList, index, { ...this.videoList[index], isPlaying: false }); }, // swiper切换时处理视频状态 handleSwiperChange(e) { const oldIndex = this.currentSwiper; const newIndex = e.detail.current; // 暂停离开的视频 if (this.videoList[oldIndex].isPlaying) { uni.createVideoContext(`video_${oldIndex}`, this).pause(); } // 更新当前索引 this.currentSwiper = newIndex; // 自动播放新视频 uni.createVideoContext(`video_${newIndex}`, this).play(); } } } </script> <style> .video-container { position: relative; width: 100%; height: 100%; } .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } </style> ``` ### 关键实现要点 1. **视频状态管理**： - 在 `videoList` 数组中为每个视频维护 `isPlaying` 状态 - 通过 `@play` 和 `@pause` 事件更新播放状态 - 使用 `$set` 确保响应式更新 2. **点击控制逻辑**： - 使用 `uni.createVideoContext()` 获取视频实例 - 根据当前状态调用 `play()` 或 `pause()` 方法 - 自定义播放按钮覆盖在视频上方[^1] 3. **Swiper切换处理**： - `@change` 事件中暂停离开的视频 - 自动播放新切换到的视频 - 更新 `currentSwiper` 索引保持同步 4. **视频组件配置**： - `:controls="false"` 隐藏原生控件 - `:show-center-play-btn="false"` 隐藏中心按钮 - `:autoplay="index === currentSwiper"` 自动播放当前项 ### 注意事项 1. **层级问题**：在微信小程序中，video 组件是原生组件，需使用 `cover-view` 覆盖（H5 可用普通 view） 2. **性能优化**：视频较多时考虑懒加载，非当前项不渲染 video 组件 3. **自动播放限制**：部分平台（如 iOS）需要用户交互才能自动播放 4. **内存管理**：页面隐藏时调用 `videoContext.pause()` 释放资源 > 提示：对于复杂场景，可结合 `uni.$on` 和 `uni.$emit` 实现跨组件通信控制播放状态[^3] ### 相关问题 1. 如何在uniapp中实现视频列表的懒加载优化？ 2. uniapp视频组件如何适配不同平台的自动播放策略？ 3. 如何实现uniapp中多个视频同时播放的控制？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值