小程序视频站点样式事件 官方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
小程序视频 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>样式
/**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
}
}
})
git地址:https://github.com/douyuanjun/maidou_video
原文地址：https://150643.com/511.html