实验四报告

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

姓名和学号？
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验4：媒体API之口述校史
博客地址？
Github仓库地址？

一、实验目标

1、掌握视频API的操作方法；2、掌握如何发送随机颜色的弹幕。

二、实验步骤

1.项目创建

步骤与之前一致，新建之后如图：

2.页面配置

文件配置步骤与之前实验一致。以下只说明创建其他文件部分：

创建一个images文件夹，在https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip中下载播放图标，将play.png导入images文件夹中。

3.视图设计

1)导航栏设计

更改app.json文件中window属性如下：

  "window": {
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "口述校史",
    "enablePullDownRefresh": true
  },

并删除 "renderer": "skyline",，否则由于skyline页面的navigationStyle是custom，app.json中的window配置 navigationStyle、navigationBarTextStyle、navigationBarTitleText、navigationBarBackgroundColor是不生效的。

效果如下：

2)页面设计

WXML代码：

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

WXSS代码：

/**index.wxss**/
/*视频组件样式*/
video{
    width:100%;     /*视频组件宽度为100%*/
}
/*区域2:弹幕控制样式*/
/*2-1弹幕区域样式*/
.danmuArea {
    display:flex;       /*flex模型布局*/
    flex-direction:row; /*水平方向排列*/
}
/*2-2文本输入框样式*/
input {
    border:1rpx solid#987938;   /*1rpx宽的实线棕色边框*/
    flex-grow:1;                  /*扩张多余空间宽度*/
    height:100rpx;                /*高度*/
    flex: 2;                      /* 占用两份空间 */
}
/*2-3按钮样式*/
button {
    color: white;                /* 字体颜色 */
    background-color: #987938;   /* 背景颜色 */
    flex: 1;                      /* 占用一份空间 */
    display: flex;               /* 使用 Flexbox 布局 */
    align-items: center;         /* 垂直居中 */
    justify-content: center;     /* 水平居中 */
    padding: 10rpx 20rpx;        /* 添加一些内边距以确保按钮有足够的点击区域 */
}
/*区域3:视频列表样式*/
/*3-1视频列表区域样式*/
videoList{
    width:100%;             /*宽度*/
    min-height:400rpx;      /*最小高度*/
}
/*3-2单行列表区域样式*/
.videoBar{
    width:95%;                              /*宽度*/
    display:flex;                           /*flex模型布局*/
    flex-direction:row;                     /*水平方向布局*/
    border-bottom:1rpxsolid #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;        /*扩张多余空间宽度*/
}

额外设计：

• 弹幕控制中文本框和按钮占空间2：1
• 按钮文字居中，且按钮的高度根据内容自动调整，同时使用padding确保足够的点击区域。

4.逻辑实现

// index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      danmuTxt:'',
      refreshing: false,
      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' 
    }
    ]
},

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

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

    /**
   * 更新弹幕内容
   */
  getDanmu:function(e){
      this.setData({
          danmuTxt:e.detail.value
      })
  },

    /**
   * 发送弹幕
   */
  sendDanmu:function(e){
      let text = this.data.danmuTxt
      this.videoCtx.sendDanmu({
          text:text,
          color:getRandomColor()
      })
        //生成随机颜色
        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:color
                rgb.push(color)
            }
            return '#' + rgb.join('')
        }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    // 如果视频上下文存在，则将视频重置到开头
    if (this.videoCtx) {
        this.videoCtx.seek(0); // 将播放位置设为视频的开始
        this.videoCtx.play();  // 重新播放视频
    }
    // 模拟数据加载完成
    setTimeout(() => {
        wx.stopPullDownRefresh();
    }, 1000); // 延迟1秒后结束刷新
}
})

额外功能：

• 下拉刷新

三、程序运行结果

实现功能：

• 播放视频，暂停视频
• 选择视频播放
• 发送弹幕，弹幕颜色随机，弹幕可以选择关闭或开启

额外功能：

• 优化弹幕控制样式，使文本框和按钮比例合理，另外使按钮文字居中，且按钮的高度根据内容自动调整，同时使用padding确保足够的点击区域。
• 实现下拉刷新，视频重新播放

四、问题总结与体会

通过本次实验掌握了视频API的基本操作以及如何在视频播放过程中发送带有随机颜色的弹幕和刷新视频。实验不仅我了对微信小程序视频组件特性的理解，还锻炼了解决实际问题的能力，比如适当地调整页面布局以适应不同的屏幕尺寸，并且实现了弹幕控制区域的优化设计。还增加了下拉刷新的功能，增强了用户体验。整个过程既是对已有知识的应用也是对新技能的学习，对于提升个人的编程能力和项目开发流程的理解都有很大的帮助。