小程序视频站点样式事件官方BUG：cover-view组件在安卓机上无法上下滑动 VIDEO组件在视频列表点击其他视频不暂停的解决办法筋斗云网络

官方BUG：cover-view组件在安卓机上无法上下滑动 VIDEO组件在视频列表点击其他视频不暂停的解决办法
现已提交官方处理：https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=0006aae1668ba86122e6c895456000&token=840699928&lang=zh_CN

小程序视频站点样式事件官方BUG：cover-view组件在安卓机上无法上下滑动 VIDEO组件在视频列表点击其他视频不暂停的解决办法

小程序视频 wxml

<view class="uls">

    <view wx:for="{{list}}" wx:key>
      <view class="lis">
          <view>
              <video id="index{{index}}" src="{{item.url}}" wx:if="{{playIndex==index}}"></video>
            </view>
          <view id="{{index}}" class="cover" style="display: {{playIndex==index?'none':'block'}};" bindtap="videoPlay">
            <image class="coverImg" src="{{item.image}}" mode="scaleToFill">
            //封面
              <view class="playImgs">
                <view>{{item.name}}</view>
                <view style="font-size:14px;">播放：{{item.bofang}}</view>
              </view>
              <image class="playImg" src="/pages/img/play.png" mode="scaleToFill"></image>
              //播放按钮 END
            </image>
          </view>                  
         <view class="video_buttom">
        <image class="user_logo" src="{{touxiang}}{{item.touxiang}}"></image>
              <view class="t">{{item.uname}}</view>
              <view class="ri" bindtap='actionclick' data-videoid="{{item.id}}"><i class="icon iconfont icon-liuyan2"></i>留言{{item.liuyan}}</view>
              <view class="ri" bindtap='nihao' data-authorid="{{item.authorid}}" data-is="{{item.is_gz}}" data-i="{{index}}"><i class="icon iconfont icon-tianjia2"></i>{{item.is_gz == 1 ? '已关注':'关注'}}</view>

              <view class="ris"><button data-name="shareBtn" plain="true" open-type="share"><i class="icon iconfont icon-fenxiang-copy"></i></button></view>
        </view> 
        //此处广告
              <view  wx:if="{{item.gg}}">
                  <image style="width:100%;height:100px;" src="{{item.gg}}"></image>
                   <view style="clear:both"></view>
              </view>
        //此处广告 END
      </view> 
   </view>
  </view>

<view>

</view>

//封面

<view style="font-size:14px;">播放：{{item.bofang}}</view>

</view>

//播放按钮 END

</image>

</view>

<view class="t">{{item.uname}}</view>

<view class="ri" bindtap='actionclick' data-videoid="{{item.id}}"><i class="icon iconfont icon-liuyan2"></i>留言{{item.liuyan}}</view>

</view>

//此处广告

</view>

//此处广告 END

</view>

样式

/**index.wxss**/
@import "/pages/ico/iconfont.wxss";
page{
  background-color:#E8E8E8;

}
video{width: 100%;height: 221px;}
.coverImg{position:relative;width: 100%;height: 221px;}
.playImg{position: absolute;top: 43%;left: 43%;width: 100rpx;height: 100rpx;}
.playImgs{position: absolute;top: 0%;left: 0%;width: 100%;padding:10px;
height: 130rpx;color:white;font-size:18px;background:rgba(0, 0, 0, 0.28)}

.header{
  width:100%;
  height:45px;
  background: #f34334;
  display: inline-block;
  border-bottom: 0.1px solid white;
}
.user_logo{
  width: 25px;
  height: 25px; 
  background-color: #eeeeee;
  float:left;
  border-radius:50%;
}
.title{
  width:100%;
  display:inline-block;
  font-size:16px;
  position:relative;
  top:17px;
  z-index:9999;

  color:white;
}
.search{
  margin-top: 3px;
}
.search input{
  background: white;
  width:80%;
  height:40px;
  margin-left:5px;
  border-radius:2px;
}
.roll{
  width: 100%; 
  overflow-x: scroll; 
  overflow-y: hidden; 
  color: #000000; 
  z-index: 999; 
  background: #fff;
}
.roll_2{
  width:1300px;

}
.roll_float view{
  float:left;
  margin:10px;
  font-weight:500;
  padding:1px;

}
/* 头部样式 end */
/* 视频循环 */
.clear{
  clear:both;
}
.video_buttom{
  height:30px;
  line-height:25px;


}
  .video_buttom .t{
    float:left;
    width:30%;
    font-size: 14px;
    display: inline-block;
  }
  .lis{
      background:white;
      margin-bottom: 5px;

  }
  .time {

  background-color: rgba(0, 0, 0, .6);
  color: white;
  line-height: 50px;
}
 .ri{
    float:left;
    width:25%;
    font-size: 14px;
  } 
   .ris{
    float:left;
    width:1%;
    font-size: 14px;
  } 
  .tit{
    font-size:18px;
    font-weight:600;
  }
button[plain]{
   border:0;
   display: inline;
   line-height: 8px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

/**index.wxss**/

@import "/pages/ico/iconfont.wxss";

page{

background-color:#E8E8E8;

}

video{width: 100%;height: 221px;}

.coverImg{position:relative;width: 100%;height: 221px;}

.playImg{position: absolute;top: 43%;left: 43%;width: 100rpx;height: 100rpx;}

.playImgs{position: absolute;top: 0%;left: 0%;width: 100%;padding:10px;

height: 130rpx;color:white;font-size:18px;background:rgba(0, 0, 0, 0.28)}

.header{

width:100%;

height:45px;

background: #f34334;

display: inline-block;

border-bottom: 0.1px solid white;

}

.user_logo{

width: 25px;

height: 25px;

background-color: #eeeeee;

float:left;

border-radius:50%;

}

.title{

width:100%;

display:inline-block;

font-size:16px;

position:relative;

top:17px;

z-index:9999;

color:white;

}

.search{

margin-top: 3px;

}

.search input{

background: white;

width:80%;

height:40px;

margin-left:5px;

border-radius:2px;

}

.roll{

width: 100%;

overflow-x: scroll;

overflow-y: hidden;

color: #000000;

z-index: 999;

background: #fff;

}

.roll_2{

width:1300px;

}

.roll_float view{

float:left;

margin:10px;

font-weight:500;

padding:1px;

}

/* 头部样式 end */

/* 视频循环 */

.clear{

clear:both;

}

.video_buttom{

height:30px;

line-height:25px;

}

.video_buttom .t{

float:left;

width:30%;

font-size: 14px;

display: inline-block;

}

.lis{

background:white;

margin-bottom: 5px;

}

.time {

background-color: rgba(0, 0, 0, .6);

color: white;

line-height: 50px;

}

.ri{

float:left;

width:25%;

font-size: 14px;

}

.ris{

float:left;

width:1%;

font-size: 14px;

}

.tit{

font-size:18px;

font-weight:600;

}

button[plain]{

border:0;

display: inline;

line-height: 8px;

}

相关事件

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    categroy:[],
    touxiang: app.globalData.url,
    list: [],
    loadingHidden: true,
    is_repeat:true,
    page:1,
    tj:1
  },
  onLoad: function (options) { 
    //登录状态监测  

  },
  http:function(category,count,callback){
    wx.request({
      url: category,
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {

        callback(res.data)
      }
    })
  },
  callback:function(res){
    //数据处理
    var res_lst = [];
    var two_res = [];
    if (!this.data.is_repeat){

      for (var i in res) {
        two_res.push(res[i]);
      }
      res_lst = this.data.list.concat(two_res);
    }else{
      for (var i in res) {
        res_lst.push(res[i]);
      }

      this.data.is_repeat = false
    }   

    console.log(res_lst);
    this.setData({
      list: res_lst

    })

  },
  // 点击cover播放，其它视频结束
  videoPlay: function (e) {

    var length = this.data.list.length
    var id = e.currentTarget.id//播放中的id
    if (!this.data.playIndex) { // 没有播放时播放视频
      this.setData({
        playIndex: id
      })
      var videoContext = wx.createVideoContext(['index', id].join(''))
      videoContext.play()
    } else {                    // 有播放时先将prev暂停到0s，再播放当前点击的current
      var videoContextPrev = wx.createVideoContext(['index', this.data.playIndex].join(''))
      videoContextPrev.seek(0)
      videoContextPrev.pause()
      this.setData({
        playIndex: id
      })
      var videoContextCurrent = wx.createVideoContext(['index', this.data.playIndex].join(''))
      videoContextCurrent.play()
    }
  },
  onReachBottom: function () {
    //触底加载函数
    if (!this.data.catid) {
      //首页下一页
      var that = this;
      that.setData({
        loadingHidden: false
      })
      var inurl = app.globalData.url + "m/wechat_api.php?rec=index&page=1&num=8&username=" + app.globalData.userid;
      this.http(inurl, 10, this.callback);
      that.setData({
        loadingHidden: true
      })

    }else{
      //列表页下一页
      var that = this;
      that.setData({
        loadingHidden: false
      })
      var inurl = app.globalData.url + "m/wechat_api.php?rec=category&page=" + this.data.page + "&num=8&username=" + app.globalData.userid+"&id=" + this.data.catid;
      this.data.page = this.data.page+1;
      this.http(inurl, 10, this.callback);
      that.setData({
        loadingHidden: true
      })
    }

  },
  //上拉刷新
  onPullDownRefresh: function () {
    //主页刷新
    if (!this.data.catid){
      this.data.is_repeat = true;
      var inurl = app.globalData.url + "m/wechat_api.php?rec=index&page=1&num=8&username=" + app.globalData.userid;
      this.http(inurl, 10, this.callback);
      wx.stopPullDownRefresh();
    }else{
      //列表刷新不随机
      wx.stopPullDownRefresh();
    }

  },
  detailfunc: function (e) {
    //暂停所有视频
    var videoContextPrev = wx.createVideoContext(['index', this.data.playIndex].join(''));
    videoContextPrev.seek(0)
    videoContextPrev.pause()
    this.setData({
      playIndex: -1,
      loadingHidden : false
    })


    this.data.page = 1;
    //e.target.dataset.id当前栏目视频
    var catid = e.target.dataset.id;
    this.data.catid = catid;
    var categroyurl = app.globalData.url + "m/wechat_api.php?rec=category&page=" + this.data.page + "&num=8&username=" + app.globalData.userid+"&id=" + catid;
    this.data.page = this.data.page + 1;
    var that = this;
    var res_lst = [];
    wx.request({
      url: categroyurl,
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (e) {
        var res = e.data;
        console.log('index切换栏目');
        console.log(e.data);
        for (var i in res) {
          res_lst.push(res[i]);
        }
        that.setData({
          list: res_lst,
          catid: catid,
          tj:2,
          loadingHidden: true
        })


      }
    })

  },
  onShow:function(){
    // app.js执行
    var that = this;
    wx.checkSession({
      success: function (res) {
        console.log("登录态没失效");
        //获取用户3rd_session
        var rd3_session = wx.getStorageSync('3rd_session');
        wx.request({
          url: "https://183545.com/m/wechat_api.php?rec=getsession",
          data: {
            "rd3_session": rd3_session
          },
          method: 'GET',
          success: function (res) {
            if (!res.data) {
              console.log('本地缓存已经失效');
              app.globalData.canIUse = 1;
              that.jz_index();
              //console.log(that.globalData.canIUse);
            } else {
              console.log('本地缓存没有失效,不需要重新登录');
              app.globalData.logininfo = res.data;
              app.globalData.userid = res.data.user_name;
              console.log(app.globalData.userid);
              that.jz_index();
            }
          }
        })
      },
      fail: function (res) {
        console.log("需要重新登录");
        app.globalData.canIUse = 1;
        that.jz_index();

      }
    })
    // app.js执行end
    //tabbar切换刷新
    /**
     * 第一次进入还是返回首页初始化is_repeat
     */
    this.data.is_repeat = true;
    var that = this;

    //获取的栏目id  options.catid
    //获取栏目名称+id
    var categroyurl = app.globalData.url + "m/wechat_api.php?rec=categroy";
    wx.request({
      url: categroyurl,
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (e) {
        that.setData({
          categroy: e.data,
          catid: 0,
          tj: 1
        })
      }
    })




  },
  jz_index:function(){
    //获取全部视频信息
    if (app.globalData.userid != 0){
      var inurl = app.globalData.url + "m/wechat_api.php?rec=index&page=1&num=8&username=" + app.globalData.userid;
      this.http(inurl, 10, this.callback);
    }else{
      var inurl = app.globalData.url + "m/wechat_api.php?rec=index&page=1&num=8";
      this.http(inurl, 10, this.callback);
    }

  },
  nihao:function(e){
    if (app.globalData.userid == 0) {
      wx.showToast({
        title: '请先登录',
        icon: 'none',
        duration: 2000
      })
    }else{
      var i = e.target.dataset.i;
      var s = e.target.dataset.is;
      var authorid = e.target.dataset.authorid;
      var is_gu = "list[" + i + "].is_gz";
      //如果关注了就取消关注
      var is_gz = 0;
      if (s != 1) {
        is_gz = 1;
      }

      //请求服务器+关注
      /**
       * 传入要关注作者id
       * 传入session当前用户
       */
      var gz_api = app.globalData.url + "m/author.php?status=" + is_gz + "&username=" + app.globalData.userid+"&authorid=" + authorid;
      console.log(gz_api);
      wx.request({
        url: gz_api,
        data: {},
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: function (e) {
          if (e.data == 1) {
            wx.showToast({
              title: '不可重复操作',
              icon: 'waiting',
              duration: 2000
            })
          } else {
            wx.showToast({
              title: '成功',
              icon: 'success',
              duration: 2000
            })
          }
        }
      })

      //动态设置改变xml的状态
      var that = this;
      that.setData({
        [is_gu]: is_gz
      });
    }



  },
  actionclick:function(e){

    // 跳转内容页
    wx.navigateTo({
      url: '/pages/action/action?videoid=' + e.currentTarget.dataset.videoid
    })
  },
  onShareAppMessage: function () {
    var tit = '麦兜视频';
    var path = '/pages/index/index';
    return {
      title: tit,
      path: path
    }
  }
})

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

categroy:[],

touxiang: app.globalData.url,

list: [],

loadingHidden: true,

is_repeat:true,

page:1,

tj:1

onLoad: function (options) {

//登录状态监测

http:function(category,count,callback){

wx.request({

url: category,

data: {},

header: {

'content-type': 'application/json' // 默认值

success: function (res) {

callback(res.data)

}

})

callback:function(res){

//数据处理

var res_lst = [];

var two_res = [];

if (!this.data.is_repeat){

for (var i in res) {

two_res.push(res[i]);

}

res_lst = this.data.list.concat(two_res);

}else{

for (var i in res) {

res_lst.push(res[i]);

}

this.data.is_repeat = false

}

console.log(res_lst);

this.setData({

list: res_lst

})

// 点击cover播放，其它视频结束

videoPlay: function (e) {

var length = this.data.list.length

var id = e.currentTarget.id//播放中的id

if (!this.data.playIndex) { // 没有播放时播放视频

this.setData({

playIndex: id

})

var videoContext = wx.createVideoContext(['index', id].join(''))

videoContext.play()

} else { // 有播放时先将prev暂停到0s，再播放当前点击的current

var videoContextPrev = wx.createVideoContext(['index', this.data.playIndex].join(''))

videoContextPrev.seek(0)

videoContextPrev.pause()

this.setData({

playIndex: id

})

var videoContextCurrent = wx.createVideoContext(['index', this.data.playIndex].join(''))

videoContextCurrent.play()

}

onReachBottom: function () {

//触底加载函数

if (!this.data.catid) {

//首页下一页

var that = this;

that.setData({

loadingHidden: false

})

var inurl = app.globalData.url + "m/wechat_api.php?rec=index&page=1&num=8&username=" + app.globalData.userid;

this.http(inurl, 10, this.callback);

that.setData({

loadingHidden: true

})

}else{

//列表页下一页

var that = this;

that.setData({

loadingHidden: false

})

var inurl = app.globalData.url + "m/wechat_api.php?rec=category&page=" + this.data.page + "&num=8&username=" + app.globalData.userid+"&id=" + this.data.catid;

this.data.page = this.data.page+1;

this.http(inurl, 10, this.callback);

that.setData({

loadingHidden: true

})

}

//上拉刷新

onPullDownRefresh: function () {

//主页刷新

if (!this.data.catid){

this.data.is_repeat = true;

var inurl = app.globalData.url + "m/wechat_api.php?rec=index&page=1&num=8&username=" + app.globalData.userid;

this.http(inurl, 10, this.callback);

wx.stopPullDownRefresh();

}else{

//列表刷新不随机

wx.stopPullDownRefresh();

}

detailfunc: function (e) {

//暂停所有视频

var videoContextPrev = wx.createVideoContext(['index', this.data.playIndex].join(''));

videoContextPrev.seek(0)

videoContextPrev.pause()

this.setData({

playIndex: -1,

loadingHidden : false

})

this.data.page = 1;

//e.target.dataset.id当前栏目视频

var catid = e.target.dataset.id;

this.data.catid = catid;

var categroyurl = app.globalData.url + "m/wechat_api.php?rec=category&page=" + this.data.page + "&num=8&username=" + app.globalData.userid+"&id=" + catid;

this.data.page = this.data.page + 1;

var that = this;

var res_lst = [];

wx.request({

url: categroyurl,

data: {},

header: {

'content-type': 'application/json' // 默认值

success: function (e) {

var res = e.data;

console.log('index切换栏目');

console.log(e.data);

for (var i in res) {

res_lst.push(res[i]);

}

that.setData({

list: res_lst,

catid: catid,

tj:2,

loadingHidden: true

})

}

})

onShow:function(){

// app.js执行

var that = this;

wx.checkSession({

success: function (res) {

console.log("登录态没失效");

//获取用户3rd_session

var rd3_session = wx.getStorageSync('3rd_session');

wx.request({

url: "https://183545.com/m/wechat_api.php?rec=getsession",

data: {

"rd3_session": rd3_session

method: 'GET',

success: function (res) {

if (!res.data) {

console.log('本地缓存已经失效');

app.globalData.canIUse = 1;

that.jz_index();

//console.log(that.globalData.canIUse);

} else {

console.log('本地缓存没有失效,不需要重新登录');

app.globalData.logininfo = res.data;

app.globalData.userid = res.data.user_name;

console.log(app.globalData.userid);

that.jz_index();

}

})

fail: function (res) {

console.log("需要重新登录");

app.globalData.canIUse = 1;

that.jz_index();

}

})

// app.js执行end

//tabbar切换刷新

/**

* 第一次进入还是返回首页初始化is_repeat

this.data.is_repeat = true;

var that = this;

//获取的栏目id options.catid

//获取栏目名称+id

var categroyurl = app.globalData.url + "m/wechat_api.php?rec=categroy";

wx.request({

url: categroyurl,

data: {},

header: {

'content-type': 'application/json' // 默认值

success: function (e) {

that.setData({

categroy: e.data,

catid: 0,

tj: 1

})

}

})

jz_index:function(){

//获取全部视频信息

if (app.globalData.userid != 0){

var inurl = app.globalData.url + "m/wechat_api.php?rec=index&page=1&num=8&username=" + app.globalData.userid;

this.http(inurl, 10, this.callback);

}else{

var inurl = app.globalData.url + "m/wechat_api.php?rec=index&page=1&num=8";

this.http(inurl, 10, this.callback);

}

nihao:function(e){

if (app.globalData.userid == 0) {

wx.showToast({

title: '请先登录',

icon: 'none',

duration: 2000

})

}else{

var i = e.target.dataset.i;

var s = e.target.dataset.is;

var authorid = e.target.dataset.authorid;

var is_gu = "list[" + i + "].is_gz";

//如果关注了就取消关注

var is_gz = 0;

if (s != 1) {

is_gz = 1;

}

//请求服务器+关注

/**

* 传入要关注作者id

* 传入session当前用户

var gz_api = app.globalData.url + "m/author.php?status=" + is_gz + "&username=" + app.globalData.userid+"&authorid=" + authorid;

console.log(gz_api);

wx.request({

url: gz_api,

data: {},

header: {

'content-type': 'application/json' // 默认值

success: function (e) {

if (e.data == 1) {

wx.showToast({

title: '不可重复操作',

icon: 'waiting',

duration: 2000

})

} else {

wx.showToast({

title: '成功',

icon: 'success',

duration: 2000

})

}

})

//动态设置改变xml的状态

var that = this;

that.setData({

[is_gu]: is_gz

});

}

actionclick:function(e){

// 跳转内容页

wx.navigateTo({

url: '/pages/action/action?videoid=' + e.currentTarget.dataset.videoid

})

onShareAppMessage: function () {

var tit = '麦兜视频';

var path = '/pages/index/index';

return {

title: tit,

path: path

}

})

git地址:https://github.com/douyuanjun/maidou_video

我的微信

把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！

小程序视频 wxml

样式

相关事件

CommentCancel reply

微信