代码主要实现视频列表中当播放当前视频需要点击下一个的时候,上一个视频关闭,点击视频播放上一个视频并显示封面和标题(回到当初的面貌)
1.wxml文件
注:这里我没有写for循环,列举三个表达下效果。myVideo1可以代表为传过来的视频id
{{ index == 1 ? ‘none’ : ‘block’ }};" id=“1” 中的1代表传过来的id,在实际操作中自己加上:如 {{ index == id? ‘none’ : ‘block’ }} 即可
<view>
<view class="video">
<video id="myVideo1" class="myVideo" src="http://video.pearvideo.com/mp4/adshort/20181117/cont-1477753-13248875_adpkg-ad_hd.mp4" custom-cache="{{false}}" >
</video>
<view style="display: {{ index == 1 ? 'none' : 'block' }};" id="1">
<cover-view class="controls" id="controls" >
//封面图片
<cover-image src="http://image2.pearvideo.com/cont/20181117/cont-1477753-11703578.png" />
</cover-view>
<cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;">CNN起诉川普政府案宣判,CNN获胜CNN起诉川普政府案宣判,CNN获胜</cover-view>
<cover-view class="play" style="z-index:200;">
//中间的播放图片标志
<cover-image bindtap="bindplay" data-id="1" src="../../img/play.png" style="width:160rpx;"/>
</cover-view>
</view>
<view class="info"><image src="http://image.pearvideo.com/node/35-10030502-logo.jpg" class="avatar" ></image><span id="name">看看新闻</span></view>
</view>
<view style="clear:both"></view>
<view class="video">
<video id="myVideo2" class="myVideo" src="http://video.pearvideo.com/mp4/adshort/20181116/cont-1477146-13247738_adpkg-ad_hd.mp4" custom-cache="{{false}}">
</video>
<view style="display: {{ index == 2 ? 'none' : 'block' }};">
<cover-view class="controls" >
<cover-image src="http://image.pearvideo.com/cont/20181116/cont-1477146-11703021.jpeg" />
</cover-view>
<cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;">靓声界男神陈奕迅英音读《小王子》</cover-view>
<cover-view class="play" style="z-index:200;">
<cover-image bindtap="bindplay" data-id="2" src="../../img/play3.png" style="width:140rpx;" />
</cover-view>
</view>
<view class="info"><image src="http://image.pearvideo.com/node/19-10027896-logo.jpg" class="avatar" ></image><span id="name">眼镜儿</span></view>
</view>
<view style="clear:both"></view>
<view class="video">
<video id="myVideo3" class="myVideo" src="http://video.pearvideo.com/mp4/short/20181118/cont-1478240-13253290-hd.mp4" custom-cache="{{false}}">
</video>
<view style="display: {{ index == 3 ? 'none' : 'block' }};">
<cover-view class="controls" >
<cover-image src="http://image1.pearvideo.com/cont/20181118/cont-1478240-11705317.png" />
</cover-view>
<cover-view class="title" style="z-index:200;color:#FFF;font-size:15px;">设计赛评委:重庆是生机勃勃的城市</cover-view>
<cover-view class="play" style="z-index:200;">
<cover-image bindtap="bindplay" data-id="3" src="http://image2.pearvideo.com/cont/20181117/cont-1477753-11703578.png" style="width:160rpx;" />
</cover-view>
</view>
<view class="info"><image src="http://image.pearvideo.com/node/1548-10523493-logo.png" class="avatar" ></image><span id="name">梨重庆</span></view>
</view>
<view style="clear:both"></view>
</view>
2. js
Page({
/**
* 页面的初始数据
*/
data: {
videoimage: "block" ,//默认显示封面
bindplay: null,
_index:0,
},
//点击播放按钮,封面图片隐藏,播放视频
bindplay: function (e) {
var index = e.currentTarget.dataset.id;
var that = this;
this.setData({
index: index
})
//停止正在播放的视频
var videoContextPrev = wx.createVideoContext("myVideo" + that.data._index)
videoContextPrev.seek(0)
videoContextPrev.pause()
setTimeout(function () {
//将点击视频进行播放
var videoContext = wx.createVideoContext('myVideo' + index)
videoContext.play();
that.data._index = index;
}, 100)
},
})
3.wcss
.myVideo{
width:100%;
height: calc(9 * 750rpx / 16);
background-color: #fff;
}
.controls{
position:absolute;
z-index:1;
background-color: #fff;
height: calc(9 * 750rpx / 16);
margin-top:-430rpx;
}
.play{
position:absolute;
left:50%;
margin-top:-300rpx;
margin-left:-80rpx;
}
.title{
position:absolute;
white-space: normal;
width:700rpx;
margin-left:15px;
margin-right:30px;
margin-top:-410rpx;
}
.video{
margin-top:15px;
}
.avatar {
position:absolute;
display: block;
width: 56rpx;
height: 56rpx;
margin-top: 5rpx;
margin-left: 30rpx;
border-radius: 50%;
}
#name{
float: left;
font-size:15px;
margin-left:50px;
margin-top:3px;
}
好了,分享完了,赶快去试下吧!