实验3：视频播放小程序

成、谋

已于 2022-08-23 09:33:33 修改

阅读量125

点赞数

分类专栏：移动软件开发文章标签：小程序

于 2022-08-20 11:31:18 首次发布

本文链接：https://blog.csdn.net/m0_52124992/article/details/126437576

版权

移动软件开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、实验目标

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

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

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

二、实验步骤

（一）项目创建

详情参照上一个实验，(57条消息) 移动软件开发实验1_m0_52124992的博客-CSDN博客

这里不再赘述

（二）页面配置

大约包括以下主要步骤：

将app.json文件内pages属性中的”pages/logs/logs“删除

删除utils文件夹及其内容

删除index.wxml和index.wxss中的全部代码

删除index.js全部代码并输入page找到按回车键自动补全函数

同理删除app.js全部代码，并且输入关键词app找到第一个选项按回车键补全代码

详情参照上一个实验，(57条消息) 移动软件开发实验1_m0_52124992的博客-CSDN博客

这里不再赘述

（三）视图设计

（1）导航栏设计

小程序默认导航栏是黑底白字的效果，因此需要在app.json中自定义导航栏标题和背景颜色。更新后的app.json文件代码与效果如下：

{

 "pages":[

  "pages/index/index"

 ],

 "window": {

  "navigationBarBackgroundColor": "#987938",

  "navigationBarTitleText":"校史介绍"

 }

}

（2）页面设计

页面上主要包含3个区域，具体内容解释如下：

区域1：视频播放器，用于播放指定的视频；
区域2：弹幕发送区域，包含文本输入框和发送按钮；
区域3：视频列表，垂直分布。

计划使用组件如下：
区域1：<video>组件；
区域2：<view>组件，并定义class=‘danmuArea’；
区域2内部：<input>和<button>组件；

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

区域3内单元内：<image>组件用于显示播放图标，<text>组件用于显示视频标题。

1、区域1设计

WXML（pages/index/index.wxml）代码片段及效果图如下：

WXSS（pages/index/index.wxss）代码片段及效果图如下：

2、区域2设计

WXML（pages/index/index.wxml）代码片段修改如下：

<!-- 弹幕控制区域 -->

<view class="danmuArea">

<input type="text" placeholder="请输入弹幕内容"></input>

<button>发送弹幕</button>

</view>

WXSS（pages/index/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;

}

3、区域3设计

WXML（pages/index/index.wxml）代码片段修改如下：

<!--区域3： 视频列表 -->

<view class="videoList">

 <view class="videoBar">

  <image src="/images/play.png"></image>

  <text>这是一个标题</text>

 </view>

</view>

WXSS（pages/index/index.wxss）代码片段及效果图如下：

/*区域3：视频列表样式*/

 /*3-1 视频列表样式 */

.videoList{

 width:100%;

 min-height: 400rpx;

}

/*3-2 单行列表区域样式 */

.videoBar{

 width: 95%;

 display: flex;

 flex-direction: row;

 margin: 10rpx;

 border-bottom: 1rpx solid #987938;

}

/*3-3 播放图标样式 */

image{

 width: 70rpx;

 height: 70rpx;

 margin: 20rpx;

}

/*3-4 文本标题样式 */

text{

 font-size: 45rpx;

 color: #987938;

 margin: 20rpx;

 flex-grow: 1;

}

（四）逻辑实现

（1）更新播放列表

在<view class='videoBar'>组件中添加wx:for属性，改写为循环展示列表

WXML（pages/index/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文件的data属性中追加list数组，用于存放视频信息，JS（pages/index/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）点击播放视频

对<view class='videoBar'>组件添加data-url属性和bindtap属性。其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。

WXML（pages/index/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函数中创建视频上下文，用于控制视频的播放和停止。

JS（pages/index/index.js）代码片段修改如下：

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

JS（pages/index/index.js）代码片段修改如下：

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

接着添加自定义函数playVideo

playVideo:function(e){

  this.videoCtx.stop()

  this.setData({

   src:e.currentTarget.dataset.url

  })

  this.videoCtx.play()

 },

效果图：

（3）发送弹幕

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

WXML（pages/index/index.wxml）代码片段修改如下：

<!--区域1：视频播放器-->

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

<!--区域2：弹幕控制区域 -->

<view class="danmuArea">

 <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>

 <button bindtap="sendDanmu">发送弹幕</button>

</view>

JS（pages/index/index.js）代码片段修改如下：

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

效果图：

随机颜色的弹幕内容，可以在JS中追加自定义函数getRandomColor

JS（pages/index/index.js）代码片段修改如下：

```javascript
/* 发送弹幕 */

 sendDanmu:function(e){

  let text = this.data.danmuTxt;

  this.videoCtx.sendDanmu({

   text:text,

   color:getRandomColor()

  })

 },
```

效果图：

至此，项目已经全部完成。

三、程序运行结果

列出程序的最终运行结果及截图。

四、问题总结与体会

1、本次实验按照教程流程一步一步进行，执行过程未出现问题，比较顺利

2、关于本次小程序编写的知识点：

（1）for循环数组

在组件上使用“wx:for”控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为“index”，数组当前项的变量名默认为“item”

<view wx:for="{{array}}">

{{index}}:{{item.message}}

</view>

使用“wx:for-index”可以指定数组当前下标的变量名，

使用“wx:for-item”可以指定数组当前元素的变量名；

<view wx:for="{{array}}" wx:for-index='idx'wx:for-item='itemName'>

•       {{idx}}:{{itemName.message}}

</view>

wx:for可以进行嵌套

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">

<view wx:if="{{i <= j}}">

{{i}} * {{j}} = {{i * j}}

</view>

</view>

</view>

wx:key 官方解释：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

（2）这次使用到了video组件

video是视频组件，可用于播放本地或网络视频资源，其默认宽度为300rpx、高度为225rpx。