devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp中使用swiper包裹video实现仿抖音刷视频_uniapp swiper video

作者：人工智能uu | 2024-08-21 14:53:16

赞

踩

uniapp swiper video

接口是在其它csdn文章中找的

首先实现上下滑动的基本功能

然后再添加暂停播放功能

最后添加自定义slier进度条，通过点击或拖拽进度条进入到视频对应的时间位置

功能要素如下：

完整代码：

  1. <template>
  2. 	<view class="">
  3. 		<swiper class="swiper" :style="{height:screenHeight+'px'}" :vertical="true" :duration="1000"
  4. 			@transition="transition" @change="changed">
  5. 			<swiper-item class="swiper-item" :style="{height:screenHeight+'px'}" v-for="(item,index) in videoList"
  6. 				:key="index" >
  7. 				<!-- 11111{{index==changeIndex}} -->
  8. 				<video id="myVideo" class="playVideo" :style="{height:screenHeight+'px'}" object-fit="cover" autoplay
  9. 					:src="item.src" :controls="false" @tap="handleVideoTap" loop @timeupdate="onTimeUpdate($event)"
  10. 					@loadeddata="onVideoLoadedData(index)" @play="onVideoPlay" v-if="index==changeIndex||showFlag">
  11. 				</video>
  12. 				<!-- <image v-else  class="fmBox" :src="item.fmsrc" mode="aspectFill"></image> -->
  13. 				<view class="txtWrap">
  14. 					<text class="nickname" style="color: #fff;font-size: 18px;">
  15. 						@Picnic熊
  16. 					</text>
  17. 					<text class="tit"
  18. 						style="width:500rpx;color: #fff;font-size: 14px;text-overflow: ellipsis; lines:2;">
  19. 						{{item.title}}
  20. 					</text>
  21. 				</view>
  22. 			</swiper-item>
  23. 		</swiper>
  24. 		<view class="iconWrap" :style="{height:screenHeight+'px'}">
  25. 			<image class="playIcon" src="/static/play.png" style="" v-if="!playFlag"></image>
  26. 			<view class="control_box">
  27. 			
  28. 				<slider class="sliderbox" :value="currentProgress" min="0" @change="sliderChange"
  29. 					@changing="sliderChanging" max="100" activeColor=" #6d6d6d" backgroundColor="#2f2f2f"
  30. 					block-color="#6d6d6d" block-size="12" />
  31. 		
  32. 			</view>
  33. 			<view class="changing" v-if="showChanging">
  34. 				<text style="color: #fff;font-size: 20px;">{{sliderchanging}}</text>
  35. 				<text style="color: #c5c5c5;font-size: 20px;">/ {{totalDuration}}</text>
  36. 			</view>
  37. 		</view>
  38. 	</view>
  39. </template>
  40.  
  41.  
  42. <script>
  43. 	export default {
  44. 		data() {
  45. 			return {
  46. 				screenHeight: 0,
  47. 				originList: [], // 源数据
  48. 				displaySwiperList: [], // swiper需要的数据
  49. 				displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
  50. 				originIndex: 0, // 记录源数据的下标
  51. 				changeIndex: 0, //控制video是否渲染
  52. 				page: 0, // 视频分页
  53. 				num: 0,
  54. 				flag: true,
  55. 				showFlag:false,
  56. 				videoList: [{
  57. 						"src": "https://minivideo.xiu123.cn/original/79649956972748019fb7761c6852c5b1/25d3d19-17b2a2529da.mp4",
  58. 						"title": "……… 时过尽迁！",
  59. 						"fmsrc": "../../static/fm1.png"
  60. 					},
  61. 					{
  62. 						"src": "https://minivideo.xiu123.cn/original/6b474d2596d742ab8f1c1da42145ee4d/5a8969da-17afdba394d.mp4",
  63. 						"title": "完美收官/美女/靓仔",
  64. 						"fmsrc": "../../static/fm2.png"
  65. 					},
  66. 					{
  67. 						"src": "https://minivideo.xiu123.cn/original/95267608f6c94ec786bf2799add0aa7a/d5538f3-17b49507b12.mp4",
  68. 						"title": "人生不过如此，且行且珍惜。",
  69. 						"fmsrc": "../../static/fm.png"
  70. 					},
  71. 					{
  72. 						"src": "https://minivideo.xiu123.cn/original/e09a1efc53304a30b14258c9f81c53d3/2ca04e20-17b4ad28fe4.mp4",
  73. 						"title": "皮一下
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/1012258
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。