【微信小程序】视频播放小程序

课程？	中国海洋大学22夏《移动软件开发》
实验名称	实验3：视频播放小程序

一、实验目标

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

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

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

二、实验步骤

一、项目创建

二、页面配置

创建页面文件并删除和修改文件

[删除] utils文件夹及其内部所有内容；
[删除] app.json 文件内 pages 属性中的 "pages/logs/logs"，并[删除] pages 文件夹下的 logs 目录机器内部所有内容；
[删除] index.wxml 及 index.wxss 文件中全部的代码；
[删除] index.js 中的全部代码，并输入关键词 page 找到并补全函数。
[删除] app.wxss 文件中全部的代码；
[删除] app.js 中的全部代码，并输入关键词 app 找到并补全函数。

创建图表文件夹
- 在中间的目录结构单击右键新建 images 文件夹。
右键单击 image 文件夹，点击 [在资源管理器中打开] 。将播放按键放入此文件夹。

三、视图设计

导航栏设计

在 app.json 文件中自定义导航栏效果

{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#987938","navigationBarTitleText": "口 述 校 史"},"sitemapLocation": "sitemap.json"
}

颜色金棕色；导航栏标题口述校史；

页面设计

页面上主要包含三个区域：
- 区域 1：视频播放器，可播放指定视频； video 组件；
- 区域 2：弹幕发送区，包含文本输入框和发送按钮； view 组件，并定义 class='danmuArea'；
  
  内部：input 组件和 button 组件；
- 区域 3：视频列表，垂直排列多个视频标题。点击不同的标题播放对应的视频； view 组件，并定义 class='videoList'；
  
  内单元行：view 组件，并定义 class='videoBar'；
  
  单元行内：image 组件和 text 组件。
- 页面整体：view 组件，并定义 class= 'container'；

视频组件设计

index.wxml 代码如下：

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

controls属性用于播放/暂停、音量控制等组件。

index.wxss 代码如下：

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

弹幕区域设计

index.wxml 代码如下：

<!--区域 1 ：视频播放器-->……
<!--区域 2 ：弹幕发送-->
<view class='danmuArea'><input type='text' placeholder="请输入弹幕内容"></input><button bindtap="sendDanmu">发送弹幕</button>
</view>

index.wxss 代码如下：

/**弹幕发送样式**/
/*弹幕发送区样式*/
.danmuArea{width: 95%;margin: 10rpx;display: flex;  /*flex模型布局*/flex-direction: row;  /*水平排列*/
}
/*弹幕输入区样式*/
input{border: 1rpx solid #987938;  /*1rpx宽实线金棕色边框*/flex-grow: 1;  /*扩张多余空间宽度*/height: 100rpx;
}
/*发送按钮样式*/
button{color: white;  /*字体颜色*/background-color: #987938;  /*背景颜色*/
}

视频列表设计

index.wxml 代码如下：

<!--区域 1 ：视频播放器-->……
<!--区域 2 ：弹幕发送-->……
<!--区域 3 ：视频列表-->
<view class='videoList'><view class='videoBar'><image src='/images/play.png'></image><text>测试标题</text></view>
</view>

index.wxss 代码如下：

/**视频列表**/
/*视频列表区样式*/
.videoList{width: 100%;  /*宽度*/min-height: 400rpx;  /*最小高度*/
}
/*单行视频列表样式*/
.videoBar{width: 95%;display: flex;flex-direction: row;border: 1rpx solid #987938;margin: 10rpx;  /*外边框*/
}
/*播放图标样式*/
image{width: 70rpx;height: 70rpx;margin: 20rpx;
}
/*视频标题样式*/
text{font-size: 45rpx;  /*字体大小*/color: #987938;margin: 20rpx;flex-grow: 1;
}

四、逻辑实现

更新播放列表

index.wxml 代码修改如下：

<!--index.wxml-->
<view class="container"><!--区域 1 ：视频播放器--><video id='myVideo' controls src='{{src}}'></video>
<!--区域 2 ：弹幕发送-->……
<!--区域 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>
</view>

index.js 文件的 page 函数的 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'}]

点击播放视频

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 文件的 page 函数进行如下修改：

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

index.js 文件的 page 函数添加如下自定义函数：

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

发送弹幕

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

index.wxml 代码修改如下：

<!--区域 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: getRandomColor()  //自定义函数--弹幕颜色随机生成})
}

为实现弹幕颜色的随机生成，在 index.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 : colorrgb.push(color)}return '#' + rgb.join('')
}

三、程序运行结果

四、问题总结与体会

一、遇到的问题及解决方法

渲染层错误

调试时会出现渲染层报错。原因为浏览器禁止视频自动播放，无视即可。不影响小程序中视频的播放。
热重载

关闭模拟器处的热重载，不然会有很多莫名其妙的 Bug 。

二、收获和体会

熟悉 video 组件的使用
学习列表的切换，为下一个实验做准备。