姓名和学号? | |
---|---|
本实验属于哪门课程? | 中国海洋大学22夏《移动软件开发》 |
实验名称? | 实验三:视频播放小程序 |
博客地址? | XXXXXXX |
Github仓库地址? | XXXXXXX |
(备注:将实验报告发布在博客、代码公开至 github 是 加分项,不是必须做的)
一、实验目标
1、掌握视频列表的切换方法;2、掌握视频自动播放方法;3、掌握视频随机颜色弹幕效果。
二、实验步骤
1、创建项目
2、页面配置
按照要求删除相应文件中的代码,并且创建其他自定义文件。创建一个文件夹用于存放播放图标,命名为images
3、导航栏设计
对app.json自定义导航栏标题和背景颜色
"window": {
"navigationBarBackgroundColor": "#987938",
"navigationBarTitleText": "校史"
},
4、页面设计
区域一
<video id='myVideo' controls></video>
video{
width:100%;
}
区域二
<view class='danmuArea'>
<input type='text' placeholder="请输入弹幕内容"></input>
<button>发送弹幕</button>
</view>
.danmuArea{
display: flex;
flex-direction: row;
}
input{
border :1rps solid #987938;
height: 100rpx;
flex-grow: 1;/*扩张多余空间*/
}
button{
color:white;
background-color: #987938;
}
区域三
<view class="videoList">
<view class="videoBar">
<image src="/image/play.jpg"></image>
<text>测试第一个</text>
</view>
</view>
.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:20rpx;
}
text{
font-size: 45rpx;
color: #987938;
margin:20rpx;
flex-grow: 1;
}
5、更新播放列表
在区域三给videoBar组件添加wx:for属性,改写为循环列表
<!--第一个区域:视频播放器-->
<video id='myVideo' src='{{src}}'</video>
<!--第二个区域:弹幕区域-->
<!--第三个区域:视频列表-->
<view class="videoList">
<view class="videoBar" wx:for='{{list}}' wx:key='video{{index}}'>
<image src="/image/play.jpg"></image>
<text>{{item.title}}</text>
</view>
</view>
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'
}
],
6、点击播放视频
区域三对videoBar组件添加data-url属性和bindtap属性
<view class="videoList">
<view class="videoBar" wx:for='{{list}}' wx:key='video{{index}}'
data-url="{{item.videoUrl}}" bindtap="playVideo">
<image src="/image/play.jpg"></image>
<text>{{item.title}}</text>
</view>
</view>
onLoad(options) {
this.videoCtx = wx.createVideoContext('myVideo')
},
playVideo:function(e){
this.videoCtx.stop()
this.setData({
src:e.currentTarget.dataset.url
})
this.videoCtx.play()
},
7、发送弹幕
对区域一video组件添加enable-danmu和danmu-btn属性,用于允许发送和显示"发送弹幕"按钮
<!--第一个区域:视频播放器-->
<video id='myVideo' src='{{src}}' controls="true" enable-danmu danmu-btn></video>
<!--第二个区域:弹幕区域-->
<view class='danmuArea'>
<input type='text' placeholder="请输入弹幕内容"bindinput='getDanmu' ></input>
<button bindtap="sendDanmu">发送弹幕</button>
</view>
getDanmu:function(e){
this.setData({
danmuTxt:e.detail.value
})
},
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('')
}
sendDanmu:function(e){
let text = this.data.danmuTxt
this.videoCtx.sendDanmu({
text:text,
color:getRandomColor()
})
},
三、程序运行结果
四、问题总结与体会
问题:function getRandomColor()要放到page的外面,在page内调用
收获:学习使用video组件实现视频列表的切换方法;掌握了视频自动播放方法,同时也学习了弹幕的发送,以及利用随机函数实现颜色的随机选择,添加了随机颜色弹幕效果。为今后的学习打下坚实的基础。