2022年夏季《移动软件开发》实验报告
| 姓名学号 | 窦海彤，20020007011 |
|---|---|
| 课程 | 中国海洋大学22夏《移动软件开发》 |
| 实验名称 | 实验3：视频播放小程序 |
| 博客地址 | https://www.cnblogs.com/dht21/ |
| Github仓库地址 | https://github.com/Domingo21/summer-term |
一、实验目标
1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。。
二、实验步骤
1. 页面配置
1.1 创建页面文件
新建一个如图的项目，并且将app.json内pages属性中的“pages/logs/logs”删除
1.2 删除和修改文件
1)删除utils文件夹及其所有内容
2)删除pages文件夹下的log目录及其所有内容
3)删除index.wxml和index.wxss和app.wxss中全部代码
4)删除index.js中代码并输入page自动补齐，删除app.js中代码并输入app自动补齐
1.3 创建其他文件
在该项目的根目录下新建一个images 文件夹用于存放视频播放图标素材
2. 视图设计
2.1 导航栏设计
更换导航栏文字和颜色
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#87CEEB",
"navigationBarTitleText": "视频播放",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.2 页面设计
主要分为三个区域，区域一：视频播放区域、区域二：弹幕发送区域、区域三、视频列表，具体代码如下：
index.wxml:
<!--区域一：视频播放器-->
<video id="myVideo"controls></video>
<!--区域二：弹幕发送区-->
<view class="danmuArea">
<input type="text"placeholder="请输入弹幕内容"></input>
<button>发送弹幕</button>
</view>
<!--区域三：视频列表栏-->
<view calss = "videolist">
<view class = "videoBar">
<image src="/images/play.png"></image>
<text>测试标题</text>
</view>
</view>
index.wxss:
<!--区域一：视频播放器-->
<video id="myVideo"controls></video>
<!--区域二：弹幕发送区-->
<view class="danmuArea">
<input type="text"placeholder="请输入弹幕内容"></input>
<button>发送弹幕</button>
</view>
<!--区域三：视频列表栏-->
<view calss = "videolist">
<view class = "videoBar">
<image src="/images/play.png"></image>
<text>测试标题</text>
</view>
</view>
效果如图：
3.逻辑实现
3.1 更新播放列表
index.html
<!--区域一：视频播放器-->
<video id="myVideo"controls src="{{src}}"></video>
<!--区域二：弹幕发送区-->
<view class="danmuArea">
<input type="text"placeholder="请输入弹幕内容"></input>
<button>发送弹幕</button>
</view>
<!--区z域三：视频列表栏-->
<view calss = "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: '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'
}
]
}
})
效果如图：
3.2 点击播放视频
对
index.wxml:
<!--区域三：视频列表栏-->
<view calss = "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({
data: {
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'
}
]
},
onLoad() {
this.videoCtx = wx.createVideoContext('myVideo')
},
playVideo:function(e){
this.videoCtx.stop()
this.setData({
src:e.currentTarget.dataset.url
})
this.videoCtx.play
}
})
效果如图：
3.3 发送弹幕
对组件添加属性使得其可发送弹幕，并在屏幕显示
index.wxml:
<!--区域一：视频播放器-->
<video id="myVideo"controls src="{{src}}" enable-danmu-btn></video>
<!--区域二：弹幕发送区-->
<view class="danmuArea">
<input type="text"placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
<button bindtap="sendDanmu">发送弹幕</button>
</view>
index.js:
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:'red'
})
}
})
效果如图：
3.4 添加随机彩色弹幕
修改index.js文件,使发送弹幕的颜色为函数getcolor的返回值
index.js:
function getRandomColor(){
var letter = "0123456789ABCDEF";
var color = [];
var c = "#";
for (var i = 0; i < 6; i++) {
c = c + letter[Math.floor(Math.random() * 16)]
}
color.push(c);
return color;
}
Page({
sendDanmu:function(e){
let text=this.data.danmuTxt;
this.videoCtx.sendDanmu({
text:text,
color:getRandomColor()
})
}
})
三、运行截图
四、问题总结与体会
问题
将弹幕改为随机颜色弹幕时，无返回值，导致无法发出弹幕，检查后发现是返回值有误，将其改成如下即可获取随机颜色弹幕并发送
function getRandomColor(){
var letter = "0123456789ABCDEF";
var color = [];
var c = "#";
for (var i = 0; i < 6; i++) {
c = c + letter[Math.floor(Math.random() * 16)]
}
color.push(c);
return color;
}
体会
通过本次实验，我掌握了视频列表的切换方法、掌握了视频自动播放的方法、掌握了视频随机颜色弹幕效果，并且明白了随机颜色的原理，更加熟悉了html、css和JavaScript语言，和制作微信小程序。
标签：视频,index,title,程序,mp4,校史,播放,弹幕 From： https://www.cnblogs.com/dht21/p/16607271.html