一、项目创建

实验中需要使用到一个播放的图片play.png，

图片下载地址为：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip

其他同实验1

二、视图设计

1. 导航栏设计

更改导航栏背景颜色和标题

app.json

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

预览效果：

2. 页面设计

页面共有三个部分视频--弹幕编辑--视频列表

区域1：视频播放器，用于播放指定的视频内容

<view>组件

区域2：弹幕发送区，包括文本输入框和发送按钮

<view>组件，并定义class='danmuArea'

内部：<input>和<button>组件

区域3：视频列表，垂直排列多个视频标题，点击不同的标题播放相应的内容

<view>组件，并定义class='videoList'

区域3内单元行 <view>组件，并定义class='videoBar'

单元行内水平放置<image>组件和用于显示播放图标<text>组件用于显示视频标题

I. 区域1（视频组件）设计

区域1需要使用一个<video>组件来实现播放视频的功能

index.wxml

<!--区域1：视频播放器-->
<video id="myVideo" controls></video>

注：controls属性用于显示播放、暂停、音量等控制组件

index.wxss

/*视频组件样式*/
video{width: 100%;
}

II. 区域2（弹幕区域）设置

区域2需要使用<view>组件实现一个单行区域，包括文本输入框和发送按钮

index.wxml

<!--区域2：弹幕控制-->
<view class="danmuArea"><input type="text" placeholder="请输入弹幕内容"></input><button>发送弹幕</button>
</view>

index.wxss

/*区域2：弹幕控制样式*/
/*2-1弹幕区域样式*/
.danmuArea{display: flex;flex-direction: row;
}
/*2-2文本输入框样式*/
input{border: 1rpx solid #987938;flex-grow: 1;height: 100rpx;
}
/*2-3按钮样式*/
button{color: white;  /*字体颜色*/background-color: #987938; /*背景颜色*/
}

预览：

III. 区域3（视频列表）设计

区域3需要使用<view>组件实现一个可扩展的多行区域，每行包含一个播放图标(<image>)和一个显示视频标题的文本(<text>)

index.wxml

<!--区域3：视频列表-->
<view class="videoList"><view class="videoBar"><image src="/images/play.png"></image><text>测试标题</text></view>
</view>

index.wxss

/*区域3：视频列表样式*/
/*3-1视频列表区域样式*/
.videoList{width: 100%;min-height: 400rpx;
}
/*3-2单行列表区域样式*/
.videoBar{width: 95%;display: flex;flex-direction: row;border-bottom: 1rpx solid #987938;    /*1rpx宽的棕色实线边框*/margin: 10rpx;
}
/*3-3播放图标样式*/
image{width: 70rpx;height: 70rpx;margin: 20rpx;
}
/*3-4文本标题样式*/
text{font-size: 45rpx;  /*字体大小*/color: #987938;margin: 20rpx;flex-grow: 1;       /*扩张多余空间宽度*/
}

预览：

三、逻辑实现

1. 更新播放列表

对区域3的<view class='videoBar'>组件添加wx:for属性，改写为循环展示列表

在wxml中可以使用for循环获取数组数据（记住for循环后面跟的是数组，当然数组里可以有字典，字符串等等）

index.wxml

<!--区域3：视频列表-->
<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>

随后在JS文件中加入list数组，用于存放视频信息

index.js

 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'}]}

运行效果：

2. 点击播放视频

在区域3对<view class='videoBar'>组件添加data-url 和 bindtap 属性

data-url : 记录每行视频对应的播放地址

bindtap : 用于触发点击事件

index.wxml

<!--区域3：视频列表-->
<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>

在JS文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止

index.js

  /*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.videoCtx = wx.createVideoContext('myVideo')},

添加自定义函数 playVideo

index.JS

 /*** 播放视频*/playVideo: function(e){//停止之前正在播放的视频this.videoCtx.stop()//更新视频地址this.setData({src: e.currentTarget.dataset.url})//播放新的视频this.videoCtx.play()},

运行结果：

3. 发送弹幕

在区域1对<video>组件添加enable-danmu 和 danmu-btn 属性，用于允许发送弹幕和显示发送弹幕按钮

在区域2为文本框追加 bindinput属性，用于获取弹幕文本内容；为按钮追加bindtap属性，用于触发点击事件

index.wxml

<!--区域1：视频播放器-->
<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn ></video><!--区域2：弹幕控制-->
<view class="danmuArea"><input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input><button bindtap="sendDanmu">发送弹幕</button>
</view>

index.js

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'})},

此时弹幕的颜色仅为红色

发出随机颜色的弹幕需要添加自定义函数：getRandomColor()

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之外，此时的sendDanmu()

  /*** 发送弹幕*/sendDanmu: function(e){let text = this.data.danmuTxt;this.videoCtx.sendDanmu({text:text,color:getRandomColor()})},

运行效果：

注：本次实验所用机型为iPoneX

微信小程序实践——实验3视频播放小程序相关推荐

计算机网络邮件客户编程,北京理工大学-计算机网络实践-实验4POP3邮件客户程序.docx...
北京理工大学-计算机网络实践-实验4POP3邮件客户程序实验四 POP3 邮件客户程序实验目的电子邮件 E-Mail 是Internet 中广泛使用的服务之一,在Internet 电子邮件系统中,邮 ...
c语言程序设计编辑与调试环境实验报告,01程序设计基础实验报告_C语言程序设计基础.doc...
01程序设计基础实验报告_C语言程序设计基础程序设计基础实验报告题目: C语言程序设计基础院 (部): 管理工程学院专业: 信息管理与信息系统班级: 信管101 姓名: 张三学 ...
抖音小程序实践四：实现小程序分享
有时候我们要把一个小程序分享给别人,去看套餐.买东西之类的,是一个很常见的功能,但是在接入抖音小程序的时候,初始化右上角三个点并没有分享的入口,那看来不是要申请,就是有别的开发的口子了.下面我们一起了 ...
C语言程序设计基础实验教程,C语言程序设计基础实验教程
本书是教育科学"十五"国家规划课题的研究成果,是<C语言程序设计基础>一书的实验配套教程,它为C语言初学者上机实验提供指导.全书提供了13个方面的验证性.设计性实验,对 ...
录音、上传、播放音频微信小程序实践
文章目录录音.上传.播放音频微信小程序实践实践分析依赖接口录音上传播放 Page 事件参考录音.上传.播放音频微信小程序实践最近上线了一款智能外呼机器人产品,需要开发一款录音.上传. ...
微信小程序实践_1前言
前言此系列文章,作为自己这段时间接触微信小程序的记录,准备编写一个山寨的人民日报的小程序,有错误和不足的地方,还请同志们多多指正和赐教准备开发小程序之前,需要首先在微信公众平台注册一个小程序的开 ...
微软语音AI技术与微软听听文档小程序实践 | AI ProCon 2019
演讲嘉宾 | 赵晟.张鹏整理 | 伍杏玲来源 | CSDN(ID:CSDNnews) [导语]9 月 7 日,在CSDN主办的「AI ProCon 2019」上,微软(亚洲)互联网工程院人工智能语 ...
微软语音 AI 技术与微软听听文档小程序实践 | AI ProCon 2019
演讲者 | 赵晟.张鹏整理 | 伍杏玲出品 | CSDN(ID:CSDNnews) [CSDN 编者按]9 月 7 日,在CSDN主办的「AI ProCon 2019」上,微软(亚洲)互联网工程院 ...
ionic4开发微信小程序_15个适用于Ionic应用程序开发人员的资源
ionic4开发微信小程序无论您是专业人士还是业余爱好者,在网络上寻找合适的资源来构建Ionic应用程序都可能很耗时,更何况令人沮丧. 在移动应用程序世界中,信息和内容可能会很快过时,因此,保持最新 ...
11无监听程序_腾讯开心鼠英语小程序实践与总结
腾讯开心鼠英语团队中有很多小程序的项目,且后续还会很多小程序的开发和迭代规划,因此我们团队是小程序的重度使用者.在小程序的开发中,团队积累了一些技术和经验,也遇到了一些困难和挑战,还踩了很多坑,因此 ...

微信小程序实践——实验3视频播放小程序

一、项目创建

二、视图设计

1. 导航栏设计

2. 页面设计

I. 区域1（视频组件）设计

II. 区域2（弹幕区域）设置

III. 区域3（视频列表）设计

三、逻辑实现

1. 更新播放列表

2. 点击播放视频

3. 发送弹幕

微信小程序实践——实验3视频播放小程序相关推荐

最新文章

热门文章