实验4：媒体API之口述校史

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量580 收藏 13
点赞数 12
文章标签： 媒体 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74074068/article/details/141613052
版权

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

一、实验目标

1、掌握视频API的操作方法；

2、掌握如何发送随机颜色的弹幕；

3、学习如何调整视频倍速播放。

二、实验步骤

1. 项目初始化与基础配置

1.1 创建小程序项目：

  • 打开微信开发者工具，创建一个新的小程序项目，命名为“口述校史视频播放”。
  • 确认项目目录结构中包含 pages/index 文件夹，作为首页。

1.2 删除不必要的默认文件：

  • 在项目中，删除不需要的默认生成文件，例如 logs 目录及其内容。

  • 确保项目只保留首页 index，并在 app.json 中配置页面路径和窗口属性：

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

1.3 创建并配置资源文件：

  • 在项目根目录下创建 images 文件夹，用于存放播放图标（play.png）。
  • 确保所有需要的资源文件都放置到合适的目录中，便于页面引用。

2. 页面布局与样式设计

2.1 视频播放器区域设计：

  • 在 index.wxml 中，使用 <video> 组件创建视频播放器，并设置必要的属性：

    <video id="myVideo" controls enable-danmu danmu-btn src="{{src}}" playback-rate="{{playbackRate}}"></video>

    组件配置说明：

    • controls 属性：显示播放、暂停、音量控制等常规操作按钮。
    • enable-danmu 和 danmu-btn 属性：开启弹幕功能并显示发送弹幕的按钮。

2.2 弹幕输入与发送区域设计：

  • 在视频播放器下方添加一个输入框和按钮区域，用户可以输入弹幕内容并点击按钮发送弹幕：

    <view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

    布局说明：

    • 使用 flex 布局，使输入框和按钮水平排列，并通过 flex-grow 让输入框根据屏幕宽度自适应扩展。

2.3 视频列表设计：

  • 通过 wx:for 循环动态生成多个视频列表项，每个项包含播放图标和视频标题。点击标题可切换播放内容：

    <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>

2.4 页面样式设计：

  • 在 index.wxss 中编写页面样式，确保不同设备下的布局效果良好。以下是视频列表和弹幕区域的样式代码示例：

    .danmuArea {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}
input {
  flex-grow: 1;
  border: 1rpx solid #987938;
  height: 100rpx;
  padding: 10rpx;
}
button {
  color: white;
  background-color: #987938;
  padding: 10rpx 20rpx;
}
.videoList {
  width: 100%;
  min-height: 400rpx;
}
.videoBar {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1rpx solid #987938;
  padding: 10rpx 0;
  margin: 10rpx 0;
}

3. 页面逻辑实现与功能调试

3.1 视频播放与切换功能实现：

  • 在 index.js 中，使用 onLoad 生命周期函数创建视频上下文：

    onLoad: function () {
  this.videoCtx = wx.createVideoContext('myVideo');
}

  • 点击视频列表中的任意标题时，使用 playVideo 函数切换视频播放地址并播放新的视频：

    playVideo: function (e) {
  this.videoCtx.stop(); // 停止当前视频
  this.setData({
    src: e.currentTarget.dataset.url
  });
  this.videoCtx.play(); // 播放新的视频
}

3.2 弹幕发送功能实现：

  • 使用 getDanmu 函数获取用户输入的弹幕内容，并使用 sendDanmu 函数将弹幕内容和颜色发送到视频中：

    getDanmu: function (e) {
  this.setData({
    danmuTxt: e.detail.value
  });
},

sendDanmu: function () {
  const text = this.data.danmuTxt;
  this.videoCtx.sendDanmu({
    text: text,
    color: this.getRandomColor()
  });
},

getRandomColor: function () {
  const 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('');
}

3.3 倍速播放功能实现：

  • 在页面中设计一个倍速选择区域，提供不同倍速选项，如 0.5x、1x、1.5x 和 2x。用户点击对应按钮即可设置播放速率：

    <view class="speedControl">
  <button bindtap="setSpeed" data-rate="0.5">0.5x</button>
  <button bindtap="setSpeed" data-rate="1.0">1x</button>
  <button bindtap="setSpeed" data-rate="1.5">1.5x</button>
  <button bindtap="setSpeed" data-rate="2.0">2x</button>
</view>

  • 在 index.js 中实现 setSpeed 函数，根据用户选择的倍速设置播放速率：

    setSpeed: function (e) {
  const rate = parseFloat(e.currentTarget.dataset.rate);
  this.setData({
    playbackRate: rate
  });
  this.videoCtx.playbackRate(rate); // 设置播放速度
}

  • 在布局上，通过使用 flex 布局，保证倍速按钮与其他功能区域之间的合理间距，避免按钮重叠或操作冲突。

4. 最终调试与功能验证

  • 完成上述代码后，进行多次调试，验证视频播放器、弹幕发送和倍速选择功能是否正常工作。
  • 修复页面显示不佳、按钮布局重叠、CSS 语法错误等问题，确保所有功能在不同设备上表现一致。

三、程序运行结果

1. 关键代码展示：
Page({
  data: {
    src: '',
    danmuTxt: '',
    playbackRate: 1.0, // 默认播放速度
    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 () {
    this.videoCtx = wx.createVideoContext('myVideo');
  },

  // 获取弹幕内容
  getDanmu: function (e) {
    this.setData({
      danmuTxt: e.detail.value
    });
  },

  // 播放视频
  playVideo: function (e) {
    this.videoCtx.stop();
    this.setData({
      src: e.currentTarget.dataset.url
    });
    this.videoCtx.play();
  },

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

  // 生成随机颜色
  getRandomColor: function () {
    const 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('');
  },

  // 设置播放速度
  setSpeed: function (e) {
    const rate = parseFloat(e.currentTarget.dataset.rate);
    this.setData({
      playbackRate: rate
    });
    this.videoCtx.playbackRate(rate); // 设置播放速度
  }
});


/* 全局样式 */
.container {
  padding: 20rpx;
}

/* 视频播放器样式 */
video {
  width: 100%;
  margin-bottom: 20rpx;
}

/* 弹幕区域样式 */
.danmuArea {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}

input {
  flex-grow: 1;
  border: 1rpx solid #987938;
  height: 100rpx;
  padding: 10rpx;
}

button {
  color: white;
  background-color: #987938;
  padding: 10rpx 20rpx;
}

/* 倍速选择器样式 */
.speedControl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.speedControl button {
  background-color: #987938;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}

/* 视频列表样式 */
.videoList {
  width: 100%;
  min-height: 400rpx;
}

.videoBar {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1rpx solid #987938;
  padding: 10rpx 0;
  margin: 10rpx 0;
}

image {
  width: 70rpx;
  height: 70rpx;
  margin-right: 20rpx;
}

text {
  font-size: 45rpx;
  color: #987938;
  flex-grow: 1;
}


<view class="container">
  <!-- 区域 1: 视频播放器 -->
  <video id="myVideo" controls enable-danmu danmu-btn src="{{src}}" playback-rate="{{playbackRate}}"></video>

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

  <!-- 区域 3: 倍速选择器 -->
  <view class="speedControl">
    <button bindtap="setSpeed" data-rate="0.5">0.5x</button>
    <button bindtap="setSpeed" data-rate="1.0">1x</button>
    <button bindtap="setSpeed" data-rate="1.5">1.5x</button>
    <button bindtap="setSpeed" data-rate="2.0">2x</button>
  </view>

  <!-- 区域 4: 视频列表 -->
  <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>
</view>
2. 运行结果截图：

在这里插入图片描述

四、问题总结与体会

问题总结：
1. 视频播放与弹幕功能的实现难点

在本次实验中，微信小程序的 <video> 组件是核心部分，如何高效地控制视频播放、暂停、切换以及弹幕功能是实验的重点。在实现过程中，我主要遇到了以下几个问题：

  • 在实现视频切换功能时，必须确保当前视频停止后再加载新的视频。通过 wx.createVideoContext 管理视频上下文，以及使用 videoCtx.stop() 和 videoCtx.play() 控制播放流程，有效解决了这个问题。
  • 为了增强用户体验，实现了弹幕颜色随机生成的功能。在最终代码中，通过三次随机生成 0-255 之间的值并转化为十六进制颜色代码，成功实现了该功能。
2. 倍速播放功能的实现

在视频 API 中，playbackRate 是控制播放速度的关键参数。虽然 API 本身支持设置不同速率，但如何将这一功能集成到良好的用户体验中需要注意以下几点：

  • 在设计倍速选择器时，考虑了用户操作的直观性和便捷性。通过为每个倍速按钮设置明确的标签（如 0.5x、1x、1.5x、2x），用户可以轻松选择合适的播放速度。
  • 在实际调试过程中，针对不同网络环境和视频资源类型，进行了多次测试，确保在切换倍速时视频播放流畅且无明显卡顿。
心得体会：

在本次实验中，我深入学习了微信小程序的视频 API，并在实验过程中实践了视频播放控制、弹幕发送以及视频倍速播放等功能的实现。整个实验过程让我对小程序开发有了更加系统的理解，也让我认识到在实际项目中解决问题的重要性。

首先，在开发中，视频播放和弹幕功能是小程序中常见的交互形式，如何通过简洁的代码实现复杂的功能是我在这次实验中着重思考的内容。微信小程序提供了丰富的 API 支持，但这些功能的实现往往需要我们对其背后的原理和最佳实践有更深入的理解。

对于倍速播放功能的实现，在实际操作中，虽然微信小程序的 API 已经提供了播放速率控制的接口，但在实际使用中，需要反复调试确保功能的稳定性和流畅性。这一部分让我意识到，技术的创新不仅在于功能实现本身，还在于如何通过良好的交互设计将技术更好地应用到实际项目中。

通过本次实验，我对小程序开发的整体流程有了更加全面的认识，从项目初始化、页面布局到功能实现、问题调试，每一步都让我在开发实践中积累了宝贵的经验。在未来的学习和项目开发中，我将更加注重代码的规范性、功能的实用性和用户体验的提升，同时继续探索更多具有创新性的开发方式。

m0_74074068
关注
  • 12
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
视频播放小程序-小程序媒体API-基础入门
m0_46965984的博客
03-20 3614
视频播放效果： 视频列表的切换方法 视频自动播放方法 视频随机颜色弹幕效果 一。界面设计 1.创建项目videoDemo 将app.json文件内pages属性中的”pages/logs/logs“删除 删除utils文件夹及其内容 删除index.wxml和index.wxss中的全部代码 删除index.js全部代码并输入page找到 按回车键自动补全函数 同理删除app.js全部代码，并且输入关键词app找到第一个选项按回车键补全代码 1.导航栏设计 ...
实验4：媒体API之口述校史小程序
m0_73768807的博客
08-27 712
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。【问题总结】1、编写 index.wxml 进行视图设计时，使用 image 单标签未生效解决：通过尝试发现，微信小程序中不支持 image 单标签结束，换用【体会】通过实现视频播放和弹幕等功能，进一步了解多数据展示、数据切换展示、前端数据获取&存储&发布 功能的开发流程，也逐步提高了前端代码编写和解读的能力。
移动软件开发--实验4：媒体API之口述校史
plumageee的博客
08-27 565
遇到问题：在发送弹幕时，color属性的值被设置为字符串 getRandomColor()，导致弹幕发送时颜色无法正确生成。解决方法：通过检查代码，发现应将其修改为this.getRandomColor()，调用函数本身，实现弹幕随机颜色生成。收获：通过本次实验，我学会了如何使用视频API和发送弹幕，进一步掌握了微信小程序的开发技能。
2024年夏季《移动软件开发》实验报告 - 实验4：媒体API之口述校史
reydelCampNou的博客
08-27 271
发现切换视频之后仍然能够看到一样的弹幕，说明是全局的，且不会随视频源改变而重置，可以通过如下代码解决（单纯就是为每一个视频设置一个有点蠢，就没有写进去。
OUC 2024夏 移动软件开发 实验四：媒体API之口述校史
m0_73384012的博客
08-27 751
（1）本次实验我掌握了视频API的操作方法和如何发送随机颜色的弹幕。（2）本次实验我还增加了遇到问题查阅官方文档的训练，从而更好地解决问题。
实验三媒体API之口述校史
08-28
实验三媒体API之口述校史
微信小程序口述校史设计思路
12-16
微信小程序口述校史的设计思路主要包括以下几个方面： 1. 视频列表的切换方法：使用wx:for循环渲染视频列表，通过bindtap事件绑定每个视频的点击事件，点击后切换到对应的视频。 2. 视频自动播放方法：在video标签中...
口述校史微信小程序设计思路
12-16
口述校史微信小程序的设计思路如下： 1. 首先，在app.json文件中设计导航栏，包括背景颜色和标题文字。 2. 在pages文件夹下创建index文件夹，用于存放小程序的主页面。 3. 在index.wxml文件中使用wx:for语法循环渲染...
基于HTML5+CSS3设计实现一个我的青春我的校园网站，网站具有校史、校园日常、校园美食、校园风景、位置信息.zip
02-14
在实际开发“我的青春我的校园”网站时，我们可以使用HTML5的新特性来展示丰富的校史图片、视频，通过CSS3的布局和动画效果来提升用户体验，同时利用Geolocation API展示学校的地理位置信息。通过合理运用这些技术，...
海外新闻稿发布：企业如何充分利用数字化媒体进行
qq_16891483的博客
08-30 531
在全球数字化进程加速的时代，企业要在激烈的国际市场中脱颖而出，利用数字化媒体进行海外新闻稿发布是一个不可或缺的战略。精确的策略和有效的执行能够帮助企业获得更高的曝光度和市场份额。企业需要明确的目标、精准的受众定位、多平台的联动发布，以及针对性的内容优化和数据监测。通过精确执行和持续优化，企业必能在全球市场中建立更高的品牌知名度和市场认可度。这能帮助企业制定更有针对性的内容和选择合适的平台。在新闻稿中合理添加链接，既可以增加内容的权威性，又能引导读者到企业官网或其他相关页面，增加网站的流量和SEO优化效果。
【软考】【多媒体应用设计师】媒体与技术2
软考鸭
08-29 426
控制性——多媒体技术是以计算机为中心，综合处理和控制多媒体信息，并按人的要求以多种媒体形式表现出来，同时作用于人的多种感官。在声学中，将自然界的声音分为“乐音”和“噪音”两类，如果一个物体振动所发出的泛音（overtones)频率为基音（fimdamentaltone)频率的整数倍，这个音就会具有清晰可辨的音高，称之为乐音，如钢琴、小提琴等发出的都是乐音；如果泛音频率无规律可言，即并非只有基音频率的整数倍频率的泛音，这个音就不具备清晰可辨的音高，称之为噪音。人类获取外部的信息是通过各种感知器官得到的。
鸿蒙（API 12 Beta3版）【媒体资源使用指导】Media Library Kit媒体文件管理服务
鸿蒙的技术博客
08-28 1368
应用可以通过photoAccessHelper的接口，对媒体资源（图片、视频）进行相关操作。
【软考】【多媒体应用设计师】媒体与技术
软考鸭
08-28 403
答案解析：媒体又称为传播媒体、传媒或媒介，是指传播信息的载体，即信息传输过程中从传播者到接收者之间携带和传递信息的一切形式的物质工具、载体或平台，是各种传播工具的总称，如电影、电视、广播、印刷品等，可以代指新闻媒体或大众媒体，也可指用于任何目的的、传播任何信息和数据的工具。“多媒体计算机”中所指的“媒体”是对后者而言，即计算机不仅能显示文字、声音、图像和动画，而且还能处理声音、图形、图像、视频、动画等各种不同形式的信息。答案解析：多媒体技术的主要特点包括5点：集成性、交互性、实时性、控制性和非线性。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 147
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 780
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
Window Performance API
Bruce__taotao的博客
08-28 1847
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 357
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
前端的面试题
本人小可爱
08-30 677
【代码】前端的面试题。
使用媒体API构建口述校史视频应用
"实验三媒体API之口述校史" 该实验是针对移动软件开发课程的一次实践，主要涉及微信小程序的开发，特别是与媒体相关的API使用。实验的主要目的是让学生掌握视频API的操作技巧以及如何实现弹幕功能，通过这两个具体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值