2022年夏季《移动软件开发》实验报告
| 姓名和学号？ | 张俊博，20020007100 |
|---|---|
| 本实验属于哪门课程？ | 中国海洋大学22夏《移动软件开发》 |
| 实验名称？ | 实验3：视频播放小程序 |
| 博客地址？ | https://blog.csdn.net/Texas_old_ox?type=download |
| Github仓库地址？ | https://github.com/CBCYDDSWSW/video-player |
一、实验目标
1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
一.创建项目
将images文件夹放入项目中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tOPZHXYz-1661300695904)(C:\Users\dell\Desktop\屏幕截图 2022-08-20 094633.png)]
二.视图设计
1.导航栏设计
{
“pages”:[
“pages/index/index”
],
“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#987938”,
“navigationBarTitleText”: “口述校史”,
“navigationBarTextStyle”:“black”
},
“style”: “v2”,
“sitemapLocation”: “sitemap.json”
}
效果如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1GREEDk-1661300695905)(C:\Users\dell\Desktop\屏幕截图 2022-08-20 094742.png)]
2.页面设计
对视频组件、弹幕区域、视频列表进行代码设计：
<video id=“myVideo"controls src=”{{src}}">
<input type="text"placeholder = ‘请输入弹幕内容’>
发送弹幕
.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: 15rpx;
}
text{
font-size:45rpx;
color: #987938;
margin: 20rpx;
flex-grow:1;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2o29Kvz9-1661300695905)(C:\Users\dell\Desktop\屏幕截图 2022-08-20 101411.png)]
三.逻辑实现
1.更新播放列表
在JS文件中追加list数组：
data: {
danmuTxt:‘’,
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’
}
]
},
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CKs8EqUj-1661300695906)(C:\Users\dell\Desktop\屏幕截图 2022-08-20 101851.png)]
2.点击播放视频
<view class = 'videoBar’wx:for = '{{list}}'wx:key = 'video{{index}}‘data-url=’{{item.videoUrl}}'bindtap = ‘playVideo’>
①. onLoad: function (options) {
this.videoCtx = wx.createVideoContext(‘myVideo’)
},
②. playVideo: function(e){
this.videoCtx.stop()
this.setData({
src:e.currentTarget.dataset.url
})
this.videoCtx.play()
},
效果如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Til11AsZ-1661300695906)(C:\Users\dell\Desktop\屏幕截图 2022-08-20 102346.png)]
3.发送弹幕
<video id=“myVideo"controls src=”{{src}}" controls enable-danmu danmu-btn>
<input type="text"placeholder = '请输入弹幕内容’bindinput = ‘getDanmu’>
发送弹幕
sendDanmu: function(e){
let text = this.data.danmuTxt;
this.videoCtx.sendDanmu({
text:text,
color: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(‘’)
}（在page外添加）
此时便可以发出彩色文本的弹幕。
三、程序运行结果
最终结果如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bFuOG8Dc-1661300695907)(C:\Users\dell\Desktop\屏幕截图 2022-08-20 102901.png)]
四、问题总结与体会
在实验过程中，弹幕一直发不出去，发现是少写了一行控制弹幕发送的代码，补上后成功完成。
1?‘0’+color:color
rgb.push(color)
}
return ‘#’ + rgb.join(‘’)
}（在page外添加）
此时便可以发出彩色文本的弹幕。
三、程序运行结果
最终结果如下图：
[外链图片转存中…(img-bFuOG8Dc-1661300695907)]
四、问题总结与体会
在实验过程中，弹幕一直发不出去，发现是少写了一行控制弹幕发送的代码，补上后成功完成。
体会：在以后的实验过程中还是要更加仔细。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
