微信小程序实现视频上下滑动

WXSS代码

<view class="video-wrap">
<swiper class="swiper" vertical='true' easing-function='default' bindchange='swiperchange'><block wx:for="{{video_list}}" wx:for-index="idx" wx:key="idx"><swiper-item><view class="video-wrap"><video wx:if="{{idx==hkindex||idx==hkindex-1||idx==hkindex+1}}" show-center-play-btn="{{false}}" id="myvideo{{idx}}" class="video" src="{{item.videourl}}" loop autoplay="{{idx == autoplay ? true : false}}"show-fullscreen-btn="{{false}}" show-play-btn="{{false}}" enable-play-gesture controls="{{false}}" bindpause="bindpause" bindplay="bindplay"></video></view></swiper-item></block>
</swiper>
</view>

js代码

// pages/video/index.js
Page({/*** 页面的初始数据* */data: {autoplay: 0,video_list: [],article_id: '',detail_id: '',extension_url: '',hkindex: 0,//滑块index},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({article_id: this.data.article_id = options.article_id,detail_id: this.data.detail_id = options.detail_id,});wx.request({url: '你的视频详情页接口',methods: 'GET', // 请求的方式data: {article_id: this.data.article_id,detail_id: this.data.detail_id,extension_url: this.data.extension_url},success: res => {this.setData({video_list: this.data.video_list.concat(res.data.child_list)});}});},//动态更新当前滑块下标swiperchange(e) {this.setData({hkindex: e.detail.current})for (let index = 0; index < this.data.video_list.length; index++) {if (e.detail.current == index) {let videoContext = wx.createVideoContext("myvideo" + index + "");videoContext.play();}else{let videoContexta = wx.createVideoContext("myvideo" + index + "")videoContexta.pause();// videoContexta.seek(0);}}},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

css

page{width: 100%;height: 100%;
}
.video-wrap {width: 100%;height: 100%;position: relative;
}.video-wrap video {width: 100%;height: 100%;position: absolute;top: 0px;left: 0;z-index: 1;
}
.swiper {width: 100%;height: 100%;
}

微信小程序实现视频上下滑动相关推荐

微信小程序下载视频到相册（带进度条）
微信小程序下载视频到相册,并带进度条 <button class="desc-note my-button u-font-32" @click="toUpload( ...
腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
概述本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC ...
腾讯技术分享：微信小程序音视频技术背后的故事
1.引言微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
微信小程序--获取视频链接（Videourl）方法~~~
微信小程序–获取视频连接(videourl)方法~~~ 如何获取音乐MV的URL地址虾米音乐试了很多音乐网站发现"虾米音乐"的MV的URL地址是可以获取的,并且在微信小程序播放 ...
微信小程序 RTMP 音视频通话 ffmpeg_WebRTC与微信小程序音视频互通方案设计与实现...
背景在之前的WebRTC实时音视频通话之语音通话设计与实践中介绍了58 TEG部门基于 WebRTC 的实时音视频通话解决方案. 考虑到腾讯微信的小程序平台提供了音视频通话与直播的支持,如果能打通基 ...
微信小程序保存视频到相册wx.saveVideoToPhotosAlbum（）
一.微信小程序保存视频到相册wx.saveVideoToPhotosAlbum() 功能描述保存视频到系统相册.支持mp4视频格式. 参数 Object object 属性类型默认值必填说明 ...
微信小程序选择视频，获取封面缩略图
使用微信小程序选择视频,且获取其封面使用微信小程序选择视频上传,且获取其封面背景名词参考效果图展示结束: 使用微信小程序选择视频上传,且获取其封面背景又一活儿,要从小程序里选择视频,上 ...
微信小程序禁止页面左右滑动
微信小程序禁止页面左右滑动小程序禁止页面左右滑动 PS:在开发过程中可能会遇到某一个页面可以左右滑动,在开发者工具是查看不出来,只有在手机预览才可以看的出来(尝试左或者右滑动). 我的解决方法是在根 ...
技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
1.概述本文内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC互通的实现思路以及技术方案.希望能带给你启发. 分别介绍 ...

微信小程序实现视频上下滑动

微信小程序实现视频上下滑动相关推荐

最新文章

热门文章