小程序视频播放组件《video》

今天花了不少时间实现了在同一个页面上实现多个视频播放的功能，显示在同一个页面，可以上下拉动。效果如下图显示：

具体代码如下：video.wxml

<view class="video-list" wx:for="{{movieList}}" wx:key="id">
    <view class="title" class="video-title">标题：{{item.title}}</view>
    <view class="title" class="video-time">时间：{{item.creatTime}}</view>
    <video src="{{item.src}}" id="{{item.id}}"></video>
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu" id="{{item.id}}" objectFit="fill">发送弹幕</button>
</view>

在此处设置button的id属性，与video的id属性相同，都从js文件data中得到，见后面js文件。目的是为了创建一个与视频id对应的videoContext对象。

video.wxss内容如下：

.video-list{
    align-self: center;
    box-shadow: 0 8rpx 17rpx 0 rgba(197, 34, 42, 0.2);
    margin: 10rpx 25rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    background: #fff
}
.video-list  > video{
    align-self: center;
    margin: 0.5vh;
}
input{
    border: 1px solid #ccc;
    width: 100%;
    align-self: center;
    margin: 0.5vh;
    height: 5vh;
}
button{
    width: 25vw;
    height: 6vh;
    font-size: 12pt;
}

video.js内容如下：

data: {
        movieList:[
            {
                id: "1", creatTime: "2019-04-18 11:08:49", title:"汉服舞蹈-铜雀赋",
                src: "https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/69/01/86980169/86980169-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1584090922&gen=playurl&os=cosbv&oi=1987995514&trid=df8ebc516dbd4ae0aca69383d6b202bfh&platform=html5&upsig=0e2b261f7286d0099f596229c2817e37&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=0"},
            { id: "2", creatTime: "2018-07-08 08:23:06", title:"纪录片-日本明治维新",
                src: "https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/26/73/57117326/57117326-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1584088283&gen=playurl&os=cosbv&oi=1987995514&trid=0eb76f20b41c41c1b56ef45bf6f3fe4fh&platform=html5&upsig=3cfee3b30019b7e90fb233e50bde1add&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=0"},
            {id: "3", creatTime: "2018-12-13 19:55:26", title:"「小白测评」Realme X2Pro",
                src: "https://upos-sz-mirrorkodo.bilivideo.com/upgcxcode/35/01/123410135/123410135-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1584086919&gen=playurl&os=kodobv&oi=1987995514&trid=7fb0c47ab6154528843a786e36c791d6h&platform=html5&upsig=faaf4e98b653a01da72ec72dc2ad4b34&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=0"},
        ],
        inputValue: '',
        videoContext: null,
    },
    bindSendDanmu: function (e) {
        console.log(e)
        this.videoContext= wx.createVideoContext(e.target.id);
        this.videoContext.sendDanmu({
            text: this.inputValue,
            color: "#ff4c91"
        })
    },
    bindInputBlur: function (e) {
        console.log(e)
        this.inputValue = e.detail.value
    },

此处推荐一个提取视频地址的简单方法——使用在线工具：哔哩哔哩视频下载在线工具
然而，根据上述动图，也可以看出，页面有三个视频，可以同时播放，这其实是不合理的，下面将实现“多个视频只能同时播放一个的功能”

注意：Json文件中不能添加注释，否则会报错：

多个视频同时只播放一个功能

参见如下的博客：微信小程序实现只能播放一个视频，其他视频暂停

小程序map组件：地图显示遇到的问题

小程序更新了部分配置,位置授权要先在app.json里声明一下,这在以前是不需要,会提示getLocation 需要在app.json中声明permission字段,如图：

**解决办法：**在app.json中加入下面这段代码：

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }