小程序列表视频控制播放和设置封面与标题-即速应用

代码主要实现视频列表中当播放当前视频需要点击下一个的时候，上一个视频关闭，点击视频播放上一个视频并显示封面和标题（回到当初的面貌）

小程序

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"  /imagespan id="name"看看新闻/span/view/viewview style="clear:both"/viewview  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    /viewview class="info"image src="http://image.pearvideo.com/node/19-10027896-logo.jpg" class="avatar"  /imagespan id="name"眼镜儿/span/view/viewview style="clear:both"/viewview  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"  /imagespan id="name"梨重庆/span/view/viewview 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;}