2022年夏季《移动软件开发》实验报告
姓名:xxx学号2002000xxxx
| 姓名和学号？ |
xxx2002000xxxx |
| 本实验属于哪门课程？ |
中国海洋大学22夏《移动软件开发》 |
| 实验名称？ |
实验3：视频播放小程序 |
| 博客地址？ |
|
| Github仓库地址？ |
一,实验目标
1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。
二,实验步骤
1,项目创建
2,页面配置
部分代码：
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#987938",
"navigationBarTitleText": "口述校史"
},
"sitemapLocation": "sitemap.json"
}
<!--区域1：视频播放器-->
<video id='myVideo'controls </video>
/*视频组件样式*/
video{
width:100%;/*视频组件宽度为100%*/
}
3,视图设计
部分代码：
/*区域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-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,逻辑实现
部分代码：
Page({
/**
* 页面的初始数据
*/
data: {
danmuTxt:'',
list: [{
id: '299371',
title: '杨国宜先生口述校史实录',
videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
},
{
id: '299396',
title: '唐成伦先生口述校史实录',
videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
},
{
id: '299378',
title: '倪光明先生口述校史实录',
videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
},
{
id: '299392',
title: '吴仪兴先生口述校史实录',
videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
}
]
},
/**
*
* 更新弹幕内容
*/
getDanmu:function(e){
this.setData({
danmuTxt:e.detail.value
})
},
/**
*
* 发送弹幕
*/
sendDanmu:function(e){
let text =this.data.danmuTxt;
this.videoCtx.sendDanmu({
text:text,
color:getRandomColor()
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:function(options){
this.videoCtx=wx.createVideoContext('myVideo')
},
/**
* 播放视频
*/
playVideo:function(e){
//停止之前正在播放的视频
this.videoCtx.stop()
//更新视频地址
this.setData({
src: e.currentTarget.dataset.url
})
//播放新的视频
this.videoCtx.play()
},
})
//生成随机颜色
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('')
}
三,程序运行结果
四,问题总结与体会
本节课对我最大的启发就是：写代码时，要认真仔细，不然等出现bug时，就要往上溯源几次，极其麻烦。另外，本节课的视频播放小程序也让我受益匪浅，明白了视频播放程序的构成和逻辑实现。