一、实验目标
1、学习制作视频播放小程序;2、掌握视频列表的切换方法;
3、掌握视频自动播放方法;4、掌握视频随机颜色弹幕效果。
二、实验步骤
1.创建项目,删除模板自带的多余的文件。
2.下载图标(https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip),在项目下新建文件夹保存照片。
3.导航栏设计,在app.json中:
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "口述校史",
"navigationBarBackgroundColor": "#987938"
},
4.页面设计,在index.wxml中制作视频播放器,弹幕输入与控制
<!-- 区域一:视频播放器 -->
<video id ='myVideo'controls></video>
<!-- 区域二:弹幕控制 -->
<view class='danmuArea'>
<input type='text'placeholder='请输入弹幕内容'></input>
<button>发送弹幕</button>
</view>
在index.wxss中:
video{
width:100%;
}
.danmuArea{
display:flex;
flex-direction:row;
}
input{
border:1rpx solid #987938;
flex-grow:1;
height:100rpx;
}
button{
color:white;
background-color:#987938;
}
编译后效果:
5.给页面迭代升级,加入视频列表,在index.wxml中
<!-- 区域一:视频播放器 -->
<video id ='myVideo'controls></video>
<!-- 区域二:弹幕控制 -->
<view class='danmuArea'>
<input type='text'placeholder='请输入弹幕内容'></input>
<button>发送弹幕</button>
</view>
<!-- 区域三:视频列表 -->
<view class='videoList'>
<view class='videoBar'>
<images src='/images/play.png'></images>
<text>这是一个测试的标题</text>
</view>
</view>
在index.wxss中继续添加:
.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;
}
编译后效果如下:
6.现在,我们开始进行逻辑实现
首先,更新播放列表,在index.wxml中:
<!-- 区域一:视频播放器 -->
<video id ='myVideo'controls></video>
<!-- 区域二:弹幕控制 -->
<view class='danmuArea'>
<input type='text'placeholder='请输入弹幕内容'></input>
<button>发送弹幕</button>
</view>
<!-- 区域三:视频列表 -->
<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>
在index.js的page函数中:
data: {
list: [
{
id: '299371',
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'
}
]
},
编译后结果:
7.在index.wxml中添加插件,完善功能:点击播放视频
<!-- 区域三:视频列表 -->
<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中:
playVideo:function(e){
this.videoCtx.stop()
this.setData({
src:e.currentTarget.dataset.url
})
this.videoCtx.play()
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.videoCtx=wx.createVideoContext('myVideo')
},
编译后演示如下:
8.完善发送弹幕功能。
修改index.wxml,增加插件:
<!-- 区域一:视频播放器 -->
<video id ='myVideo'src='{{src}}'controls enable-danmu danmu-btn></video>
<!-- 区域二:弹幕控制 -->
<view class='danmuArea'>
<input type='text'placeholder='请输入弹幕内容' bindinput='getDanmu'></input>
<button bindtap='sendDanmu'>发送弹幕</button>
</view>
在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:color
rgb.push(color)
}
return'#'+rgb.join('')
}
然后,在page中增添新函数:
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()
})
},
OK,到这全部部署成功
三、程序运行结果
四、问题总结与体会
本次实验中调用了多个组件及其相关的方法,使我收益匪浅,对多组件结合的小程序有了更深的理解。