小程序视频站点样式事件 官方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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
 

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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;
}
 
 
 
 

相关事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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

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

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: