从零开始的小程序开发之路 看这一篇就够了!(适用于有基础)#3

从零开始的小程序开发之路 看这一篇就够了!(适用于有基础)#3

一、实验目标

制作一个可以播放视频并加上弹幕的小程序

二、实验步骤

步骤一 将图片导入并设置app.json文件

修改title和背景颜色

步骤二 整体页面设计

区域一 视频播放

<video id="myVideo" controls enable-danmu danmu-btn src="{{src}}"></video>
<view class="danmuArea">

区域二 弹幕控制

<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕" bindinput="getDanmu"/>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

区域三 视频列表

<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}"data-url = "{{item.videoUrl}}" bind:tap="playVideo">
    <image src="play.png" mode=""/>
    <text>{{item.title}}</text>
  </view>
</view>

具体内容需要在js文件中写，转到下一步

wxss样式

video {
  width: 100%;
}

.danmuArea{
  display: flex;
  flex-direction: row;
}

input {
border: 1rpx solid #987938;
flex-grow: 1;
height: 100rpx;
}

button{
  color:white;
  background-color: #987938;
}

.videoList {
  width: 100%;
  min-height: 400rpx;
}

.videoBar {
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #987938;
  margin: 10rpx;
}

image {
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}

text {
  font-size: 45rpx;
  color: #987938;
  margin: 20rpx;
  flex-grow: 1;
}

步骤三 逻辑实现

现在js 的data中加入如下信息

danmuTxt:'',
    list: [{
    id: '1001',
    title: '杨国宜先生口述校史实录',
    videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4',
  },
  {
    id: '1002',
    title: '唐成伦先生口述校史实录',
    videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
  },
  {
    id: '1003',
    title: '倪光明先生口述校史实录',
    videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
  },
  {
    id: '1004',
    title: '吴仪兴先生口述校史实录',
    videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
  }
]

之前在videoBar中wx：for的作用就是循环列表进行展示

接下来要实现点击播放按钮

onLoad:function(options){
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  playVideo:function(e)
  {
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play()
  },

在onload里获得videoCtx 然后playVideo停止当前视频 setUrl就实现了视频播放

步骤四 弹幕发送

在js中添加 get send函数 最后的randomcolor给弹幕添加随机的颜色

 getDanmu:function(e)
  {
    this.setData({
      danmuTxt:e.detail.value
    })
  },
  sendDanmu:function(e){
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:this.getRandomColor()
    })
  },
  getRandomColor: function () 
  {
    let rgb = [];
    for(let i = 0;i<3;++i){
      let color = Math.floor(Math.random()*256).toString(16);
      color = color.length == 1?'0'+color:color
      rgb.push(color)
    }
    return'#'+rgb.join('')
  },

完成

三、程序运行结果

整体界面展示

四、问题总结与体会

​ 学到了video组件的使用，wx很方便的把danmu功能集成在视频的功能里，只要加上两个标签就可以打开video的弹幕功能。

​ 列表的循环展示，使用wx:for和wx:key就可以自动的生成相同的几个行

​ 最后通过url获取视频就可以播放了

总体逻辑还是比较简单的，wx也基本把功能都集成为api可以供调用