通过列表的点击事件自动播放列表对应的视频,同时停止上一个视频的播放。
源码:
<view> <view class='vv' wx:for='{{vedio_data}}' wx:key=''> <view class='block' style='margin-left:20rpx;'> <image src='/img/1.png' class='img1' style='margin-left:20rpx'></image> <text class='text'>{{item.title}} </text> <view id="{{index}}" class="cover" style="display: {{ _index == index " bindtap="videoPlay" > <!-- 视频图层 --> <image class="videoVideo2" src="/UploadFiles/2021-04-02/{{item.img}}">CSS:
/* 边框 */ .vv { width: 700rpx; height: 530rpx; border-left: gainsboro 1px solid; border-right: gainsboro 1px solid; border-top: gainsboro 1px solid; margin-bottom: 80rpx; border-radius: 15rpx; overflow: hidden; position: relative; top: 40rpx; left: 20rpx; } /* 小图标 */ .img1 { width: 36rpx; height: 28rpx; margin-top: 30rpx; } /* 标题文字 */ .text { font-size: 28rpx; color: #585858; margin-left: 10rpx; } /* 视频 */ .video { width: 100%; height: 450rpx; margin-top: 20rpx; border-bottom-left-radius: 15rpx; border-bottom-right-radius: 15rpx; } .videoVideo2 { width: 703rpx; height: 453rpx; position: absolute; top: 80rpx; left: 20rpx; z-index: 99; } .videoPlay{ position: absolute; width: 80rpx; height: 80rpx; top:45%; left: 45%; margin: -30rpx 0 0 -30rpx; z-index: 100; } /* 底部盒子 */ .bottom { width: 40rpx; height: 40rpx; } /* 底部图片 */ .di { display: flex; flex-direction: row; padding: 60rpx 0rpx 100rpx 280rpx; } /* 底部文字 */ .bottom_text { font-size: 34rpx; color: #d8d8d8; margin-left: 10rpx; }JS:
// pages/class/class.js Page({ /** * 页面的初始数据 */ data: { videoPlay: null, vedio_data: [{ title: '无13131(大班)', url: 'xxx', img: 'xxx', }, { title: ' 如何23 1 、 2 、2423、4)', url: 'xxx', img: 'xxx' }, { title: '温热碍', url: 'xxx', img:'xxx' }, { title: '挑嘎嘎嘎输', url: 'xxx', img: 'xxx' }, { title: '延伸挑战:运输圆球', url: 'xxx', img:'xxx' }, ] }, // 点击cover播放,其它视频结束 videoPlay: function (e) { var _index = e.currentTarget.id this.setData({ _index: _index }) //停止正在播放的视频 var videoContextPrev = wx.createVideoContext(this.data._index) videoContextPrev.stop(); setTimeout(function(){ //将点击视频进行播放 var videoContext = wx.createVideoContext(_index) videoContext.play(); },500) }, })视频和图片地址就不提供了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]