前言

本实验来自于周文洁老师的《微信小程序开发实战》第六章。主要内容是使用小程序媒体API制作一个视频播放小程序，视频素材来自于某高校档案馆的《口述校史》栏目，它录制了多位耄耋之年的老教工回忆工作时期对大学的印象。

一、实验目标

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

二、实验步骤

1.创建项目

创建项目：视频播放，并在项目中创建文件夹images，将所需图片复制粘贴进去。

图标展示

文件创建完成

2.导航栏设计

在app.json中自定义导航栏标题和背景颜色，文件代码如下：

{"pages":["pages/index/index"],"window":{"navigationBarBackgroundColor": "#987938","navigationBarTitleText": "口述校史"}
}

上述代码可以更改所有页面的导航栏标题为“口述校史”、背景颜色为金棕色（#987938），预览效果如图

3.页面设计

区域1（视频组件）设计：组件
区域2（弹幕区域）设计：组件，并定义class=‘danmuArea’;内部和组件；
区域3：组件，并定义class=‘videoList’;区域内单元行组件，并定义class=‘videoBar’;区域单元行内：每行一个组件用于显示播放图标、一个组件用于显示视频标题。
index.wxml文件代码

<!--区域1：视频播放器-->
<video id='myVideo' controls src="{{src}}"
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>

index.wxss文件代码

video{width: 100%;
}
.danmuArea{display: flex;flex-direction: row;
}
input{border: 1rpx solid #987938;height: 100rpx;flex-grow: 1;/*扩张多余空间*/
}
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;/*扩张多余宽度*/
}

4.逻辑实现

更新播放列表：在区域3对组件添加wx:for属性，采用循环展示列表，在js文件的data属性中追加list数组，用于存放视频信息。
在区域3对组件添加data-url属性和bindtap属性。其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。
在区域1对组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕按钮”。
区域2为文本框追加bindinput属性，用于获取弹幕文本内容；为按钮追加bindtap属性，用于触发点击事件。

index.js代码

/*生成随机颜色*/
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 : colorrgb.push(color)}return '#' + rgb.join('')
}
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'}],src:'',danmuTxt:''},/*更新弹幕内容*/getDanmu: function(e){this.setData({danmuTxt:e.detail.value})},/*发送弹幕*/sendDanmu: function(e){let text=this.data.danmuTxtthis.videoCtx.sendDanmu({text: text,color: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')},
})

三、程序运行结果

总结

1、无法显示多个视频。对组件添加wx:for属性，采用循环展示列表。

2、弹幕一开始无法显示。经检查后，发现index.js中页面初始数据缺少了 src:‘’,补全后即可。

体会：此次实验用到了上一个实验所用到的一些方法，追加list数组用于存放信息，组件的调用。在进行实验时，会发现会有一些相似之处，也会出现一些新知识，所谓学习就是在不断地复习以往知识的同时，学习到新的知识，如此循环往复，加深印象。更加期待接下来的实验✨

实验3：视频播放小程序相关推荐

【无标题】移动软件开发第三课之视频播放小程序
2022年夏季<移动软件开发>实验报告姓名:xxx学号2002000xxxx 姓名和学号? xxx2002000xxxx 本实验属于哪门课程? 中国海洋大学22夏<移动软件开发&g ...
ouc2022 移动软件开发实验三：视频播放小程序
一.实验目标 1.掌握视频列表的切换方法:2.掌握视频自动播放方法:3.掌握视频随机颜色弹幕效果. 二.实验步骤 1.项目创建与页面配置具体操作与前两个实验相同,不在赘述. 加入images文件夹, ...
《移动软件开发》实验3：视频播放小程序
## **一.实验目标** 1.掌握视频列表的切换方法:2.掌握视频自动播放方法:3.掌握视频随机颜色弹幕效果. ## 二.实验步骤列出实验的关键步骤.代码解析.截图. 先进行前期工作的准备,把图 ...
linux小程序实验报告,linux 小程序分析
//环境 centos 5.x//程序实例1: #include #include void bug() { system("reboot");//re boot system e ...
视频播放小程序-小程序媒体API-基础入门
视频播放效果: 视频列表的切换方法视频自动播放方法视频随机颜色弹幕效果一.界面设计 1.创建项目videoDemo 将app.json文件内pages属性中的"pages/logs/l ...
微信小程序学习——视频播放小程序
一.视图设计 (一)导航栏设计 # app.json--导航栏设置 {"pages":["pages/index/index"],"window&qu ...
视频播放的微信小程序
一.实验目标开发一个可以视频播放小程序二.实验步骤 1.导航栏设计(app.json) {"pages":["pages/index/index"],&qu ...
ouc 2022 移动软件开发实验五：第一个 Android 应用小程序
一.实验目标 1.安卓移动端开发环境搭建 2.编写第一个 Android 应用小程序二.实验步骤 1.安卓移动端开发环境搭建 1.1 电脑安装 jdk 创建一个英文名称的文件夹(尽量别用中文),将下 ...
微信小程序入门:在小程序中播放视频和发送弹幕
<移动软件开发>实验3 实验介绍: **本实验来自于周文洁老师的<微信小程序开发实战>第六章.**主要内容是使用小程序媒体API制作一个视频播放小程序,视频素材来自于某高校档案 ...
【实战教程】腾讯云搭建微信小程序服务
2019独角兽企业重金招聘Python工程师标准>>> ##准备域名和证书任务时间:20min ~ 40min 小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备 ...

实验3：视频播放小程序

文章目录

前言