ouc2022 移动软件开发实验三：视频播放小程序

一、实验目标

1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。

二、实验步骤

1、项目创建与页面配置

具体操作与前两个实验相同，不在赘述。

加入images文件夹，用来存放播放图标（https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip）：

2、小程序设计

2.1 app.json

{"pages":["pages/index/index"],"window":{"navigationBarBackgroundColor": "#987938","navigationBarTitleText": "口述校史"},"style": "v2","sitemapLocation": "sitemap.json"
}

2.2 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>

<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>

小程序页面共分为三个板块，自上而下分别为播放器、弹幕发送器、剧集列表。

2.3 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;
}
.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;
}

2.4 index.js

Page({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'}]},
getDanmu: function (e) {this.setData({danmuTxt: e.detail.value})},
sendDanmu: function (e) {let text = this.data.danmuTxt;this.videoCtx.sendDanmu({text: text,color: this.getRandomColor()})},
playVideo: function (e) {this.videoCtx.stop()this.setData({src: e.currentTarget.dataset.url})this.videoCtx.play()},
onLoad: function (options) {this.videoCtx = wx.createVideoContext('myVideo')},
getRandomColor: function () {let rgb = []for (let i = 0; i < 3; ++i) {let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')}
})

整体实现了发送彩色弹幕的功能。

三、程序运行结果

程序编译运行，结果如下：

四、问题总结与体会

1、问题总结：

这次试验没有多大问题，源代码在实验文档中都有给出，而且不难理解。有人说 getRandomColor 这个函数按照文档编写后不能正常调用，我的处理方法是定义后通过 this.getRandomColor() 来调用

getRandomColor: function () {let rgb = []for (let i = 0; i < 3; ++i) {let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')}color: this.getRandomColor()

2、体会

本次实验让我们体会了制作一个播放视频的小程序，难度不大，主要是让我们体会各个组件之间的联系，还是挺有意思的，期待下一个实验

ouc2022 移动软件开发实验三：视频播放小程序相关推荐

软件开发可行性分析——健康食谱小程序
关于软件开发可行性分析先给大家介绍下面几个关键点: 什么是可行性分析? 检查并确定是否值得为项目或产品投入时间.金钱和资源.这样的评估活动称为"可行性分析". 为什么要进行可行性分 ...
互联网软件开发—— 实验三 JSP 内置对象（留言板）
实验名称: 实验三 JSP 内置对象一.实验目的 1.掌握表单提交及页面间参数传递的方法. 2.理解页面转发与重定向之间的区别. 3.掌握 request.session 和 application ...
ouc2022移动软件开发实验二：天气查询小程序
一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤 1."和风天气"密钥申请 "和风天气"有着可以 ...
【无标题】移动软件开发第三课之视频播放小程序
2022年夏季<移动软件开发>实验报告姓名:xxx学号2002000xxxx 姓名和学号? xxx2002000xxxx 本实验属于哪门课程? 中国海洋大学22夏<移动软件开发&g ...
ouc 2022 移动软件开发实验五：第一个 Android 应用小程序
一.实验目标 1.安卓移动端开发环境搭建 2.编写第一个 Android 应用小程序二.实验步骤 1.安卓移动端开发环境搭建 1.1 电脑安装 jdk 创建一个英文名称的文件夹(尽量别用中文),将下 ...
OUC软件开发实验3
实验3:视频播放小程序本实验来自于周文洁老师的<微信小程序开发实战>第六章.主要内容是使用小程序媒体API制作一个视频播放小程序,视频素材来自于某高校档案馆的<口述校史>栏目 ...
移动软件开发实验3
移动软件开发实验3 一. 实验目标 1.掌握视频列表的切换方法: 2.掌握视频自动播放方法: 3.掌握视频随机颜色弹幕效果. 二.实验步骤 1.创建项目 ·创建页面文件 ·删除和修改文件 ·创建其他 ...
抢饭碗？这位 05 后开发三款小程序！
整理 | 伍杏玲出品 | CSDN(ID:CSDNnews) 2017 年 1 月 9 日,微信小程序横空出世.而后,支付宝小程序.百度小程序.12大厂商联盟的快应用等纷纷入局,在短短两年的时间里, ...
北邮数电实验三接球小游戏
文章目录前言一.实验要求二.设计思路三.设计系统框图四.源代码五.遇到的问题和解决办法六.总结前言北邮数电实验三"接球小游戏" 数电实验验收已经结束了,实验报告也 ...

ouc2022 移动软件开发实验三：视频播放小程序

一、实验目标

二、实验步骤

1、项目创建与页面配置

2、小程序设计

三、程序运行结果

四、问题总结与体会

ouc2022 移动软件开发实验三：视频播放小程序相关推荐

最新文章

热门文章

ouc2022 移动软件开发 实验三：视频播放小程序

一、实验目标

二、实验步骤

1、项目创建与页面配置

2、小程序设计

三、程序运行结果

四、问题总结与体会

ouc2022 移动软件开发 实验三：视频播放小程序相关推荐

最新文章

热门文章

ouc2022 移动软件开发实验三：视频播放小程序

ouc2022 移动软件开发实验三：视频播放小程序相关推荐