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

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

姓名：林佳欣 学号：22020007054

姓名和学号？	林佳欣，22020007054
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验4：媒体API之口述校史
博客地址？	LinJason.OUC-CSDN博客
Github仓库地址？	WechatMiniProgram: 2024年中国海洋大学移动软件开发作业 (gitee.com)

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

二、实验步骤

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

1、导航栏设计

在app.json中输入代码

"pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "口述校史",//导航栏为“口述校史”
    "navigationBarBackgroundColor": "#987938"//金棕色
  }

2、页面设计

在index.wxml中输入代码，设计播放页面的组件

<video id='myVideo' controls src="{{src}}"> 
    <!-- controls属性显示视频控制条，src属性绑定视频源地址 -->
</video>

<view class ='danmuArea'>
  <!-- 输入框，bindinput事件用于获取输入的弹幕内容 -->
  <input type='text' placeholder='请输入弹幕内容' bindinput='getDanmu'></input>
  <!-- 发送按钮，点击后触发sendDanmu事件 -->
  <button bindtap='sendDanmu'>发送弹幕</button>
</view>

<view class='videoList'>
  <!-- 循环渲染视频列表，每个视频条目包含播放图标和标题 -->
  <view class='videoBar' wx:for='{{list}}' wx:key='vider{{index}}' data-url='{{item.videoUrl}}' bindtap='playVideo'>
    <!-- 播放图标 -->
    <image src ='/images/play.png'></image>
    <!-- 视频标题 -->
    <text>{{item.title}}</text>
  </view>
</view>

在index.wxss中输入代码，设计播放页面的样式

/* 设置视频播放器宽度为100% */
video {
  width: 100%;
}

/* 弹幕输入区域使用flex布局，水平排列子元素 */
.danmuArea {
  display: flex;
  flex-direction: row;
}

/* 设置输入框边框，扩展宽度以填充剩余空间，并定义高度 */
input {
  border: 1rpx solid #987938; /* 设置边框颜色和宽度 */
  flex-grow: 1; /* 输入框扩展以填充剩余空间 */
  height: 100rpx; 
}

/* 设置按钮颜色和背景色 */
button {
  color: white; 
  background-color: #987938; 
}

/* 视频列表容器宽度设置为100%，并定义最小高度 */
.videoList {
  width: 100%;
  min-height: 400rpx; /* 设置列表的最小高度 */
}

/* 视频条目使用flex布局，水平排列子元素，并设置边框和间距 */
.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; 
}

3、逻辑实现：更新播放列表，播放视频，发送弹幕

在index.js中写入代码

Page({
  /**
   * 页面的初始数据
   */
 data: {
    danmuTxt: '', // 存储用户输入的弹幕文本
    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
    });
  },

  // 获取随机颜色的函数
  getRandomColor: function () {
    let rgb = [];
    // 生成随机颜色的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('');
  },

  // 发送弹幕的函数
  sendDanmu: function (e) {
    let text = this.data.danmuTxt; // 获取弹幕文本
    this.videoCtx.sendDanmu({
      text: text, // 弹幕内容
      color: this.getRandomColor() // 弹幕颜色
    });
  },
  // 以下是其他生命周期函数
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {}
})

三、程序运行结果

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

结果：能够获取视频API并正常播放视频，且能够发射彩色弹幕

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

问题：在编写index.js文件中的发送弹幕函数sendDanmu中的color：getRandomColor（）调用getRandomColor函数的时候出错

解决方法：将其改成color:this.getRandomColor()通过增加this来调用getRandomColor函数

收获和体会：通过这次实验，我学会通过<video>来和在线播放的视频的API来在小程序中实现播放视频，暂停视频的功能，此外也学会利用随机数改变RGB颜色的参数，从而实现弹幕颜色的随机。我实际的感受到了目前主流弹幕视频网站实现的原理，以及彩色弹幕实现的容易。利用这个技术可以在小程序中观看一些视频，使得相关页面内容更加丰富，例如某实验操作的视频和实验原理的文字相结合。