微信小程序实践——实验3视频播放小程序

一、项目创建

实验中需要使用到一个播放的图片play.png，

图片下载地址为：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip

其他同实验1

二、视图设计

1. 导航栏设计

更改导航栏背景颜色和标题

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "口述校史"
  }
}

预览效果：

2. 页面设计

页面共有三个部分   视频--弹幕编辑--视频列表

区域1：视频播放器，用于播放指定的视频内容

             <view>组件

区域2：弹幕发送区，包括文本输入框和发送按钮

            <view>组件，并定义class='danmuArea'

            内部：<input>和<button>组件

区域3：视频列表，垂直排列多个视频标题，点击不同的标题播放相应的内容

             <view>组件，并定义class='videoList'

             区域3内单元行 <view>组件，并定义class='videoBar'

             单元行内水平放置<image>组件和用于显示播放图标<text>组件用于显示视频标题

I. 区域1（视频组件）设计

区域1需要使用一个<video>组件来实现播放视频的功能

index.wxml

<!--区域1：视频播放器-->
<video id="myVideo" controls></video>

 注：controls属性用于显示 播放、暂停、音量等控制组件

index.wxss

/*视频组件样式*/
video{
  width: 100%;
}

II. 区域2（弹幕区域）设置

区域2需要使用<view>组件实现一个单行区域，包括文本输入框和发送按钮

index.wxml

<!--区域2：弹幕控制-->
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容"></input>
  <button>发送弹幕</button>
</view>

index.wxss

/*区域2：弹幕控制样式*/
/*2-1弹幕区域样式*/
.danmuArea{
  display: flex;
  flex-direction: row;
}
/*2-2文本输入框样式*/
input{
  border: 1rpx solid #987938;
  flex-grow: 1;
  height: 100rpx;
}
/*2-3按钮样式*/
button{
  color: white;  /*字体颜色*/
  background-color: #987938; /*背景颜色*/
}

预览：

III. 区域3（视频列表）设计

区域3需要使用<view>组件实现一个可扩展的多行区域，每行包含一个播放图标(<image>)和一个显示视频标题的文本(<text>)

index.wxml

<!--区域3：视频列表-->
<view class="videoList">
  <view class="videoBar">
    <image src="/images/play.png"></image>
    <text>测试标题</text>
  </view>
</view>

index.wxss

/*区域3：视频列表样式*/
/*3-1视频列表区域样式*/
.videoList{
  width: 100%;
  min-height: 400rpx;
}
/*3-2单行列表区域样式*/
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #987938;    /*1rpx宽的棕色实线边框*/
  margin: 10rpx;
}
/*3-3播放图标样式*/
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
/*3-4文本标题样式*/
text{
  font-size: 45rpx;  /*字体大小*/
  color: #987938;
  margin: 20rpx;
  flex-grow: 1;       /*扩张多余空间宽度*/
}

预览：

三、逻辑实现

1. 更新播放列表

对区域3的<view class='videoBar'>组件添加wx:for属性，改写为循环展示列表

在wxml中可以使用for循环获取数组数据（记住for循环后面跟的是数组，当然数组里可以有字典，字符串等等）

index.wxml

<!--区域3：视频列表-->
<view class="videoList">
  <view class="videoBar" wx:for="{
   
   {list}}" wx:key="video{
   
   {index}}">
    <image src="/images/play.png"></image>
    <text>{
   
   {item.title}}</text>
  </view>
</view>

随后在JS文件中加入list数组，用于存放视频信息

index.js

 data: {
    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'
    }
  ]
  }

运行效果：

  

2. 点击播放视频

在区域3对<view class='videoBar'>组件添加data-url 和 bindtap 属性

data-url : 记录每行视频对应的播放地址

bindtap : 用于触发点击事件

index.wxml

<!--区域3：视频列表-->
<view class="videoList">
  <view class="videoBar" wx:for="{
   
   {list}}" wx:key="video{
   
   {index}}" data-url="{
   
   {item.videoUrl}}" bindtap="playVideo">
    <image src="/images/play.png"></image>
    <text>{
   
   {item.title}}</text>
  </view>
</view>

在JS文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止

index.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },

 添加自定义函数 playVideo

index.JS

 /**
   * 播放视频
   */
  playVideo: function(e){
    //停止之前正在播放的视频
    this.videoCtx.stop()
    //更新视频地址
    this.setData({
      src: e.currentTarget.dataset.url
    })
    //播放新的视频
    this.videoCtx.play()
  },

运行结果：

 

3. 发送弹幕

在区域1对<video>组件添加enable-danmu 和 danmu-btn 属性，用于允许发送弹幕和显示发送弹幕按钮

在区域2为文本框追加 bindinput属性，用于获取弹幕文本内容；为按钮追加bindtap属性，用于触发点击事件

index.wxml

<!--区域1：视频播放器-->
<video id="myVideo" controls src="{
   
   {src}}" enable-danmu danmu-btn ></video>

<!--区域2：弹幕控制-->
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

index.js

data: {
    danmuTxt:'',
    list: [{
    .
    .
    .
    ]
},

 /**
  * 更新弹幕内容
  */
  getDanmu: function(e){
    this.setData({
      danmuTxt: e.detail.value
    })
  },
  /**
  * 发送弹幕
  */
  sendDanmu: function(e){
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:'red'
    })
  },

此时弹幕的颜色仅为红色

发出随机颜色的弹幕需要添加自定义函数：getRandomColor()

index.js

  /**
  * 随机弹幕颜色
  */
 function getRandomColor() {
  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('')
}

 函数写在Page之外，此时的sendDanmu()

  /**
  * 发送弹幕
  */
  sendDanmu: function(e){
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:getRandomColor()
    })
  },

 运行效果：

注：本次实验所用机型为iPoneX