《移动软件开发》实验3：视频播放小程序

## **一、实验目标**

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

## 二、实验步骤

列出实验的关键步骤、代码解析、截图。

先进行前期工作的准备，把图标文件目录安置好

然后实现视频播放区域

与弹幕播放区域

随后是视频的调用区域

将list的数据放入

实现弹幕发送的功能

并最终实现随机颜色弹幕

## 三、程序运行结果

## 四、代码展示

图标文件地址：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip

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({playVideo:function(e){this.videoCtx.stop()this.setData({src:e.currentTarget.dataset.url})this.videoCtx.play()},/*** 页面的初始数据*/data: {danmuTxt:'',list: [{id: '299371',title: '杨国宜先生口述校史实录',videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'},{id: '299396',title: '唐成伦先生口述校史实录',videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'},{id: '299378',title: '倪光明先生口述校史实录',videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'},{id: '299392',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:getRandomColor()})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.videoCtx = wx.createVideoContext('myVideo')},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

index.wxml


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

index.wxss


video{width : 100% ;}.danmuArea{display: flex;flex-direction: row;}input{border: 1 rpx soild #987938;flex-grow: 1;height: 100rpx;}button{color: white;background-color: #987938;}.videoList{width: 100%;min-height: 400 rpx;}.videoBar{width: 95%;display: flex;flex-direction: row;border-bottom: 1rpx soild #987938;margin: 10 rpx;}image{width: 50rpx ;height: 50rpx ;margin: 50rpx;}text{font-size: 45 rpx;color:#987938;flex-grow:1;margin: 20rpx;}

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

【无标题】移动软件开发第三课之视频播放小程序
2022年夏季<移动软件开发>实验报告姓名:xxx学号2002000xxxx 姓名和学号? xxx2002000xxxx 本实验属于哪门课程? 中国海洋大学22夏<移动软件开发&g ...
ouc2022 移动软件开发实验三：视频播放小程序
一.实验目标 1.掌握视频列表的切换方法:2.掌握视频自动播放方法:3.掌握视频随机颜色弹幕效果. 二.实验步骤 1.项目创建与页面配置具体操作与前两个实验相同,不在赘述. 加入images文件夹, ...
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：视频播放小程序

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

最新文章

热门文章