微信小程序给视频加图片封面且点击图片自动播放视频并停止播放上一个视频

淡淡的烟草味﹌ 2021-09-17 00:14 278阅读 0赞

<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 ? 'none' : 'block' }};" bindtap="videoPlay" >
    
    <image class="videoVideo2" src="{
       {item.img}}" mode="scaleToFill">
    
    <image class="videoPlay" src="/img/bf.png" mode="scaleToFill"></image>
    </image>
    </view>
    </view>
    
    <video src="{
       {item.url}}" id="{
       {index}}" class='video' wx:if="{
       {_index == index}}" >
     
    </video>
    </view>

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

js：
     
     
    
    data: {
    videoPlay: null,
     
    vedio_data: [{
    title: '循环的标题1',
    url: '视频路径',
    img: '图片路径',
     
    },
    {
    
    vedio_data: [{
    title: '循环的标题2',
    url: '视频路径',
    img: '图片路径',
    
    
    },
    {
    
    vedio_data: [{
    title: '循环的标题3',
    url: '视频路径',
    img: '图片路径',
    
    
    }
     
        ]
      },
    
    
    
    
      // 点击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)
      },