2023年夏季《移动软件开发》实验三 | 视频播放小程序

最新推荐文章于 2024-07-25 12:14:35 发布

Xxxlz777

最新推荐文章于 2024-07-25 12:14:35 发布

阅读量67

点赞数

分类专栏：移动软件开发文章标签：音视频小程序 apache

本文链接：https://blog.csdn.net/m0_62460077/article/details/132562941

版权

移动软件开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2022年夏季《移动软件开发》实验报告

姓名：学号：

姓名和学号？
本实验属于哪门课程？	中国海洋大学23夏《移动软件开发》
实验名称？	实验3：视频播放小程序
博客地址？	XXXXXXX
Github仓库地址？	XXXXXXX

一、实验目标

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

二、实验步骤

1.项目创建

如图所示：

2.页面配置

1.创建页面文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为idex,表示小程序运行的第一个页面；其他页面名称可以自定义。本项目只需要保留首页(index)即可。
具体操作如下：
1. 将app.json文件内pages属性中的“pages//logs/logs”删除，并删除上一行末尾的逗号。
2. 按快捷键Ctrl+S保存当前修改。

2.删除和修改文件

具体操作如下：
1. 删除utils文件夹及其内部所有内容。
2. 删除pages文件夹下的logs目录及其内部所有内容。
3. 删除index.wxml和index.wxss中的全部代码。
4. 删除index,.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数。
5. 删除app.wxss中的全部代码。
6. 删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数。

3.创建其他文件

创建其他自定义文件，创建文件夹用于存放图片素材，文件夹名称为：images，单击目录结构左上角的十号创建文件夹并命名为images。
本项目用到的图标素材共计75个，均来源于和风天气官网，网址为：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip。
其中图标文件名为对应的天气代码，扩展名均为.png。需要注意的是，部分图标文件名带有字母n,表示夜间天气图标，例如100n.png。
右击目录结构中的images文件夹，选择“硬盘打开”，在该文件夹中新建二级目录weather_icon,然后将图标文件全部复制、粘贴进去。完成后的目录结构如图所示：
配置布局至此全部完成，进行页面和视图设计。

4.视图设计

1.导航栏设计

小程序默认导航栏是黑底白字的效果，因此需要在app.json中自定义导航栏标题和背景颜色。更改后的app.json文件代码如下：

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

上述代码可以更改所有页面的导航栏标题文本为“口述校史”、背景颜色为金棕色(#987938)。

可得效果如图所示：

2.页面设计（margin:表示上下左右的距离）

页面上主要包含3个区域，具体内容解释如下。
1. 区域1：视频播放器，用于播放指定的视频；
2. 区域2：弹幕发送区域，包含弹幕输入框和发送按钮；
3. 区域3：视频列表，垂直排列多个视频标题，点击不同的标题就播放对应的视频内容。面板之间需要有一定的间隔距离，设计图如图所示。
  - 效果如图所示：
注意，面板之间需要有一定的间隔距离。
计划使用如下组件。
1. 计划使用组件如下：
- 区域1：组件；
- 区域2：组件，并定义class=‘danmuArea’；
- 区域2内部：和组件；
- 区域3：组件，并定义class=‘videoList’；
- 区域3内单元行：组件，并定义class= ‘videoBar’；
- 区域3单元行内：每行1个组件用于显示播放图标、1个组件用于显示视频标题。

1.整体容器设计

首先定义页面容器(),WXML(pages/index,/index.wxml)代码片段如下：
```
<view class='container'>
</view>
```

在app.wxss中设置容器样式，代码如下：

.container{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
}

2.区域一（视频组件）设计

区域一需要使用组件来实现一个地区选择器，用户可以点击切换选择其他城市。

代码修改如下：

/*index.wxml*/
<!--区域一：视频播放器-->
<video id="MyVideo"  controls></video>

/*index.wxss*/
/*区域一：视频组件样式*/
video{
  width:100%;
}

在这里插入图片描述

3.区域二（弹幕控制样式）设计

区域二需要使用一个和组件实现；
表示弹幕输入框，表示发送按钮；

代码片段为：

/*index.wxml*/
<!--第二个区域：弹幕区域-->
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" ></input>
  <button >发送弹幕</button>
</view>


/*index.wxss*/
/*区域二：弹幕控制样式*/
/*2-1 弹幕控制区域*/
.DanmuArea{
  display:flex;
  flex-direction:row;
}
/*2-2 弹幕输入框*/
input{
  border:1rpx solid #987938;
  height:100rpx;
  flex-grow:row;/*把整个宽度占满*/
}
/*2-3 发送按钮*/
button{
  color:white;
  background-color:#987938;
}

1. 在这里插入图片描述
2.

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

需要使用组件展示视频列表组件，包含组件和组件；

代码及结果展示如下：

/*index.wxss*/
/*区域三：视频列表样式*/
/*3-1 视频列表区域样式*/
.videoList {
  width: 100%;
  min-height: 400rpx
}

/*3-2 单行列表区域样式*/
.videoBar{
  width: 100%;               /*宽度*/
  display: flex;            /*flex模型布局*/
  flex-direction: row;      /*水平方向布局*/
  border-bottom: 1rpx solid #987938;/*1rpx宽的实线棕色边框*/
  margin: 10rpx           /*外边距*/
}
image{
  width:70rpx;
  height:70rpx;
  margin:20rpx
}
text{
  font-size:45rpx;
  color:#987938;
  margin:20rpx;
  flex-grow:1
}

5.逻辑实现

1.更新播放列表

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

注意在wx:for=“{{list}}”时，为双引号
然后在js文件的data属性追加list数组，用于存放视频信息。如图所示：

2.点击播放视频

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"
      }
    ],
    src: "",
    danmuTxt: ""
  },

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

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

通过对组件添加data-url属性和bindtap属性实现。

其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。
在这里插入图片描述

在index.js文件中对onLoad函数进行编写，创建视频上下文，用于控制视频的播放和停止。
在js中添加自定义函数playVideo，进行视频的播放。

开始没加src=“{{src}}”，导致视频无法播放，后加入，成功播放出视频。

在这里插入图片描述

3.发送弹幕

对video组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示发送弹幕按钮。
在区域二为添加bindinput属性**（用于获取弹幕内容）；添加bindtap属性（用于触发点击事件）**。
设置自定义函数getRandomColor()随机生成多样的颜色，将color的属性写成:
```
color:getRandomColor()
```

三、程序运行结果

列出程序的最终运行结果及截图。

在这里插入图片描述

四、问题总结与体会

一.问题

1.渲染层错误

在这里插入图片描述

出现渲染层、网络层错误，通过查询可能是因为视频地址存在问题，可以进行更换解决。

2.步骤正确，但小程序视频无法播放。

在这里插入图片描述

经过更改，添加了src=“{{src}}”,实现了视频播放
src表示一个路径问题，所以在视频组件中需要获取路径，从而需要添加这个东西。

在这里插入图片描述

二.总结与体会

网页视频的播放设计极其有趣，学习到了很多相关js以及各种的知识，而且更加了解了相关代码的含义，且新增了对组件的了解，并且学会了随机颜色弹幕发送，十分有趣。
除此之外，小程序的设计包括图标形式，以及其余各项美化，设计的一步步过程都很有成就感。

Xxxlz777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2023年夏季《移动软件开发》实验三 | 视频播放小程序

出现渲染层、网络层错误，通过查询可能是因为视频地址存在问题，可以进行更换解决。网页视频的播放设计极其有趣，学习到了很多相关js以及各种的知识，而且更加了解了相关代码的含义，且新增了对组件的了解，并且学会了随机颜色弹幕发送，十分有趣。除此之外，小程序的设计包括图标形式，以及其余各项美化，设计的一步步过程都很有成就感。
复制链接

扫一扫