WXML
<pre class="has">
js
<pre class="has"> var util = require('../../utils/util'); var app = getApp(); Page({ data: { videoPlay: null,vedio_data: [{ title: '视频标题1',url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1437596250,215562873&fm=26&gp=0.jpg',},{ title: '视频标题2',img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545625549289&di=4bf95a6bd0d05003dea5598aa516f718&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F7cec9a37f417277ec1bb62840da6b9d9c2c22f05.jpg',}] },// 点击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) } })
var util = require('../../utils/util'); var app = getApp(); Page({ data: { videoPlay: null,vedio_data: [{ title: '视频标题1',url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1437596250,215562873&fm=26&gp=0.jpg',},{ title: '视频标题2',img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545625549289&di=4bf95a6bd0d05003dea5598aa516f718&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F7cec9a37f417277ec1bb62840da6b9d9c2c22f05.jpg',}] },// 点击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) } })
css
<pre class="has"> .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; }
.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; }