小程序列表视频控制播放和设置封面与标题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Hello_Java2018/article/details/84298576

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

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;
}

好了，分享完了，赶快去试下吧！