视频播放小程序

| Github仓库地址？ | https://github.com/xiaoli-guan/lab3.git |

一、实验目标

1、掌握视频列表的切换方法；

2、掌握视频自动播放方法；

3、掌握视频随机颜色弹幕效果。

二、实验步骤

1、项目创建

使用测试号，JavaScript基础模板创建新项目。

2、页面配置

基础模板初始化会自动生成一个简易的小程序，我们不需要这些多余的页面和文件，接下来我们将第一页“index”之外的和多余的代码删除。

（1）将app.json文件内pages属性中“pages/logs/logs”删除，并删除上一行末尾的逗号。

（2）删除utils文件夹和pages下的logs文件夹及其内部所有内容

（3）删除index.wxml和index.wxss、app.wxss中全部代码

（4）删除index.js中全部代码，并且输入关键词page，找到后面带有“function”字样的，选中让其自动补全函数

（5）删除app.js中全部代码，并且输入关键词app，找到后面带有“function”字样的，选中让其自动补全函数

我们这个小程序需要一个播放图标。在项目目录下新建文件夹“images“，将图标文件放入文件夹。

3、视图设计

**（1）导航栏设计 **

小程序默认是白底黑字的效果，我们可以在app.json里更改效果。

将"window"改为下面的代码：

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

backgroundTextStyle有两种参数可以选择：light和dark。浅色和深色

navigationBarBackgroundColor是设置导航栏背景颜色的，参数有许多可以选择，可以在官方开发文档里找到颜色对应的参数。

点击查看颜色对应参数

navigationBarTitleText则是导航栏上的文字

navigationBarTextStyle是该文字的颜色。

（2）页面设计

页面上主要包含3个区域，视频播放器，弹幕发送区域，视频列表。

视频播放器需要使用组件。在index.wxml下，增加代码：

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

在index.wxss下，增加代码：

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

接下来就是设计弹幕区域了。这个区域我们用组件实现一个单行区域，包括文本输入框和发送按钮。

index.wxml增加代码：

<!--区域2：弹幕控制-->
<view class = "danmuArea">
  <input type = "text"placeholder = "请输入弹幕内容"></input>
  <button style="width: 40%;">发送弹幕</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;
}

最后是视频列表的设计，我们需要用组件实现一个可扩展的多行区域，每行包括一个播放图标和一个文本标题文本。

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;
  margin: 10rpx;
}
/*3-3 播放图标样式*/
image{
  width:70rpx;
  height:70rpx;
  margin:20rpx;
}
/*3-4 文本标题样式*/
text{
  font-size: 45rpx;
  color:#987938;
  margin:20rpx;
  flex-grow: 1;
}

此时呈现的效果如下：

4、逻辑实现

（1）更新播放列表

在区域3对组件中添加wx.for属性，改写为循环展示列表。

index.wxml下修改代码为：

<!--区域1：视频播放器-->
<video id="myVideo"controls src = "{{src}}">
</video>
<!--区域2：弹幕控制-->
<view class = "danmuArea">
  <input type = "text"placeholder = "请输入弹幕内容"></input>
  <button style="width: 40%;">发送弹幕</button>
</view>
<!--区域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>

然后在index.js文件中的data属性 中追加list数组，用于存放视频信息。

  /**
   * 页面的初始数据
   */
  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对组件添加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>

接着在index.js文件的onLoad函数中创建视频上下文，用来控制视频的播放和停止。

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

最后添加自定义函数play.Video

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

此时的效果如下：

（3）发送弹幕

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

index.wxml代码片段修改为：

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

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

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

对应的js代码片段修改为：

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:"red"})
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },


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

此时，可以发出红色文本的弹幕，运行效果如下：

我们还可以发送彩色弹幕，在index.js追加自定义函数getRandomColor。sendDanmu函数改为：

sendDanmu:function(e){
    let text = this.data.danmuTxt;
    // 生成随机颜色
 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('')
}
    this.videoCtx.sendDanmu({text:text,color:getRandomColor()})
  },

三、程序运行结果

可以看到，实验十分成功。

四、问题总结与体会

本次实验十分顺利，并没有遇到太大的问题。

这个实验十分有趣，让我们学会了怎么使用url播放视频。对我的帮助很大。我现在对小程序制作的过程慢慢熟悉了，也产生了很大的兴趣。