| 本实验属于哪门课程？ | 中国海洋大学22夏《移动软件开发》 |
| 实验名称？ | 实验3：视频播放小程序 |
1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。
根据之前项目经验，新建小程序，删除相关数据，初始化相关文件即可完成项目初始化。
项目根目录下新建images文件夹用于存放播放图标:
根据文档在app.json文件中更改导航栏的颜色与标题文字:
{
"pages":[
"pages/index/index"
],
"window":{
"navigationBarBackgroundColor": "#987938",
"navigationBarTitleText": "口述校史"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
更改后的效果如下:
利用<video>组件实现视频播放器，首先在index.wxml中添加组件:
<video id="myVideo" controls></video>在index.wxss中修改组件的样式，使其宽度为100%:
video {
width: 100%;
}修改后的效果如下:
修改index.wxml页面代码，添加弹幕控制相关的组件，包括文本输入框和发送按钮:
<view class="danmuArea">
<input type="text" placeholder="请输入弹幕内容" />
<button>发送弹幕</button>
</view>同样的，在index.wxss中修改组件的样式:
.danmuArea {
display: flex; /*flex模型布局*/
flex-direction: row;
}
input {
border: 1rpx solid #987938; /*设置边框线*/
flex-grow: 1; /*多余空间扩张*/
height: 100rpx;
}
button {
color: white;
background-color: #987938;
}修改后的效果如下:
修改index.wxml添加视频列表:
<view class="videoList">
<view class="videoBar" >
<image src="/images/play.png"/>
<text>测试标题</text>
</view>
</view>修改index.wxss更改组件样式:
.videoList {
width: 100%;
min-height: 100rpx;
}
.videoBar {
width: 95%;
display: flex;
flex-direction: row;
border-bottom: 1rpx solid #987938;
margin: 10rpx;
}
image{
width: 60rpx;
height: 60rpx;
margin: 20rpx;
}
text{
font-size: 40rpx;
color: #987938;
margin: 20rpx;
flex-grow: 1;
}修改后的效果如下:
利用wx:for功能实现多个视频列表的展示：
<view class="videoList">
<view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" >
<image src="/images/play.png"/>
<text>{{item.title}}</text>
</view>
</view>同时在index.js 文件的data属性中添加list列表用于存放视频数据。
添加后的效果如下:
在<view>组件中添加data-url属性用于在点击时传回点击的视频的URL地址，添加bindtap属性用于相应点击事件:
<view class="videoList">
<view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo" >
<image src="/images/play.png"/>
<text>{{item.title}}</text>
</view>
</view>在index.js中的监听页面加载函数中添加函数用于获取VideoContext实例:
onLoad: function (options) {
this.videoCtx = wx.createVideoContext('myVideo')
},添加自定义函数:
playVideo: function (e) {
this.videoCtx.stop();
this.setData({
src: e.currentTarget.dataset.url
})
this.videoCtx.play();
},添加后的播放效果如下:
为<vedio>组件添加enable-danmu 和 danmu-btn属性，同时为文本输入框添加bindinput属性
用于获取弹幕的文本内容，为按钮添加bindtap属性，用于触发点击事件:
<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>
<view class="danmuArea">
<input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu" />
<button bindtap="sendDanmu">发送弹幕</button>
</view>修改index.js文件添加对应的函数用于实现功能:
getDanmu: function (e) {
this.setData({
danmuTxt: e.detail.value
})
},
sendDanmu: function (e) {
let text = this.data.danmuTxt;
this.videoCtx.sendDanmu({
text: text,
color: getRandomColor(),
});
},在文件中添加自定义函数getRandomColor()用来获取随机颜色以实现彩色弹幕:
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('')
}实现效果如下:
- 进入程序页面
- 播放视频
- 发送弹幕
本次实验中我掌握了wx:for的用法，学会了利用该功能循环列表实现多个相同模块的展示。同时也学会了利用<vedio>组件进行视频播放，添加弹幕等功能。