小白开发第四个微信小程序：视频播放器

一、实验目标

1、学习制作视频播放小程序；2、掌握视频列表的切换方法；

3、掌握视频自动播放方法；4、掌握视频随机颜色弹幕效果。

二、实验步骤

1.创建项目，删除模板自带的多余的文件。

2.下载图标（https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip），在项目下新建文件夹保存照片。

3.导航栏设计，在app.json中：

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "口述校史",
    "navigationBarBackgroundColor": "#987938"
  },

4.页面设计，在index.wxml中制作视频播放器，弹幕输入与控制

<!-- 区域一：视频播放器 -->
<video id ='myVideo'controls></video>
<!-- 区域二：弹幕控制 -->
<view class='danmuArea'>
  <input type='text'placeholder='请输入弹幕内容'></input>
  <button>发送弹幕</button>
  </view>

在index.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;
}

编译后效果：

5.给页面迭代升级，加入视频列表，在index.wxml中

<!-- 区域一：视频播放器 -->
<video id ='myVideo'controls></video>
<!-- 区域二：弹幕控制 -->
<view class='danmuArea'>
  <input type='text'placeholder='请输入弹幕内容'></input>
  <button>发送弹幕</button>
  </view>
<!-- 区域三：视频列表 -->
<view class='videoList'>
  <view class='videoBar'>
    <images src='/images/play.png'></images>
    <text>这是一个测试的标题</text>
  </view>
</view>

在index.wxss中继续添加：

.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;
}

编译后效果如下：

6.现在，我们开始进行逻辑实现

首先，更新播放列表，在index.wxml中：

<!-- 区域一：视频播放器 -->
<video id ='myVideo'controls></video>
<!-- 区域二：弹幕控制 -->
<view class='danmuArea'>
  <input type='text'placeholder='请输入弹幕内容'></input>
  <button>发送弹幕</button>
  </view>
<!-- 区域三：视频列表 -->
<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>

在index.js的page函数中：

 data: {
    list: [
      {
      id: '299371',
      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'
      }
      ]
     
  },

编译后结果：

7.在index.wxml中添加插件，完善功能：点击播放视频

<!-- 区域三：视频列表 -->
<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>

在index.js的page中：

  playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx=wx.createVideoContext('myVideo')
  },

编译后演示如下：

8.完善发送弹幕功能。

修改index.wxml，增加插件：

<!-- 区域一：视频播放器 -->
<video id ='myVideo'src='{{src}}'controls enable-danmu danmu-btn></video>
<!-- 区域二：弹幕控制 -->
<view class='danmuArea'>
  <input type='text'placeholder='请输入弹幕内容' bindinput='getDanmu'></input>
  <button bindtap='sendDanmu'>发送弹幕</button>
  </view>

在js文件中对应修改：

首先，追加自定义函数（不在page中）：

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中增添新函数：

    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:getRandomColor()
    })
  },

OK，到这全部部署成功

三、程序运行结果

四、问题总结与体会

​ 本次实验中调用了多个组件及其相关的方法，使我收益匪浅，对多组件结合的小程序有了更深的理解。