实验 4：视频播放小程序

whyz蒟蒻

已于 2024-08-29 15:29:13 修改

阅读量1.7k

点赞数 38

分类专栏：移动软件开发实验（小程序）文章标签：微信小程序

于 2024-08-29 15:26:49 首次发布

本文链接：https://blog.csdn.net/whyz666/article/details/141679725

版权

移动软件开发实验（小程序）专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个项目实现了一个带有弹幕功能的视频播放器，并提供了视频列表供用户选择播放。

一、实验目标

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

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

二、实验步骤

1.项目创建

新建项目，选择空白文件夹，创建小程序，选择不使用云服务，模板选择JS基础。

2.页面配置

（1）删除和修改文件

将 app.json 文件内 pages 属性中的“ pages / logs / logs ”删除，并删除上一行末尾的逗号。
删除utils文件夹及其内部所有内容。
删除 pages 文件夹下的 logs 目录及其内部所有内容。
删除 index.wxml 和 index.wxss 中的全部代码。
删除 index.js 中的全部代码，并且输入关键词“ page ”找到选项让其自动补全函数。
删除 app.wxss中的全部代码。
删除app.js中的全部代码，并且输入关健间app找到选项让其自动补全函数。

（2）添加图片素材

通过https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip下载图片，在项目文件夹下新建文件夹images，然后解压图片素材放在此文件夹。

3.导航栏设计

在app.json文件中设计导航栏样式，字体为黑色，背景颜色为金棕色#987938，标题为口述校史。

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "口述校史",
    "navigationBarBackgroundColor": "#987938"
  },

4.页面设计

页面主要包含3个区域：

视频播放器区域：

这是一个视频播放器，带有控制按钮（如播放、暂停等）。src属性指定了视频的来源，enable-danmu和danmu-btn属性启用了弹幕功能。
弹幕发送区域：

这里是用户输入和发送弹幕的区域。input元素用于输入弹幕内容，button元素用于发送弹幕。bindinput和bindtap分别绑定了输入和点击事件处理函数。
视频列表区域：

这是一个视频列表，每个视频项包含一个播放按钮和视频标题。wx:for用于循环渲染视频列表，data-url存储视频的URL，bindtap绑定了点击事件处理函数以播放视频。

index.wxml文件代码：

<!-- 区域1：视频播放器 -->
<video id="myVideo" controls src='{{src}}' 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">
  <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: 1rpx solid #987938;
  height: 100rpx;
  flex-grow: 1;
}
button{
  color: white;
  background-color: #987938;
}
.videoList{
  width: 100%;
  min-height: 400rpx;
}
.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;
}

5.视频列表

index.wxml文件定义了视频列表的显示方式。wx:for用于循环渲染list中的每个视频项，data-url存储视频的URL，bindtap绑定了点击事件处理函数playVideo，用于播放视频。每个视频项包含一个播放按钮和视频标题。这段代码实现了一个带有视频列表页面，用户可以点击视频标题选择播放不同的视频。

<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.js文件定义了页面的初始数据，包括一个视频列表list，每个视频项包含一个ID、标题和视频URL。src用于存储当前播放视频的URL，danmuTxt用于存储弹幕文本。

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: ""
  }
});

6.播放视频

在index.js文件中，添加两个主要功能：播放视频和页面加载时的初始化。功能需要实现视频的切换和播放控制功能，确保用户点击视频列表中的视频时，能够正确播放相应的视频。

playVideo函数用于处理视频播放。当用户点击视频列表中的某个视频时，会触发这个函数。它首先停止当前播放的视频，然后更新src数据属性为点击的视频的URL，最后播放新的视频。

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

onLoad函数在页面加载时调用。它创建了一个视频上下文videoCtx，用于控制视频播放。'myVideo'是视频组件的ID，通过这个ID可以获取视频组件的上下文。

onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo'); // 创建视频上下文
}

7.发送弹幕

（1）实现发送弹幕

页面实现视频播放和弹幕发送功能，用户可以输入弹幕内容并发送到视频播放器中显示。

在index.wxml文件中：

视频播放器区域：

<video>标签创建了一个视频播放器，id为myVideo，controls属性启用了播放控制按钮，src属性绑定了视频的URL，enable-danmu和danmu-btn属性启用了弹幕功能。
弹幕发送区域：

<input>标签用于输入弹幕内容，placeholder属性提供了占位提示文本，bindinput绑定了输入事件处理函数getDanmu。

<button>标签用于发送弹幕，bindtap绑定了点击事件处理函数sendDanmu。

在index.js文件中：

getDanmu 函数：

函数在用户输入弹幕内容时触发，更新danmuTxt数据属性为输入的内容。
sendDanmu 函数：

函数在用户点击发送按钮时触发，获取当前输入的弹幕文本，并调用videoCtx.sendDanmu方法发送弹幕。弹幕的颜色通过getRandomColor函数随机生成。

index.wxml文件部分代码：

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

index.js文件部分代码：

getDanmu: function(e) {
    this.setData({
      danmuTxt: e.detail.value // 更新弹幕文本
    });
},
sendDanmu: function(e) {
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text: text, // 发送弹幕文本
      color: getRandomColor() // 随机颜色
    });

（2）彩色弹幕

在index.js文件中，定义一个名为 getRandomColor 的函数，用于生成随机颜色。

getRandomColor 的函数：

初始化一个空数组，用于存储RGB颜色值。循环三次，分别生成红、绿、蓝三个颜色值。生成0到255之间的随机整数，并转换为16进制字符串。如果生成的16进制字符串长度为1，则在前面补0。将生成的颜色值添加到数组中。将数组中的颜色值拼接成一个字符串，并在前面加上#号，返回最终的颜色值

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('')
}

三、程序运行结果

四、问题总结与体会

在本次实验中，我主要学习了如何使用视频API进行视频播放控制，以及如何发送随机颜色的弹幕。这不仅加深了我对小程序开发的理解，也让我在实际操作中掌握了许多实用的技巧。

首先，通过实验，我掌握了视频API的基本操作方法。视频API提供了一系列方法来控制视频的播放、暂停、停止等功能。在代码中，通过wx.createVideoContext('myVideo')创建了视频上下文videoCtx，并使用videoCtx.stop()和videoCtx.play()来控制视频的播放和停止。这些方法的使用可以灵活地控制视频的播放状态，满足用户的不同需求。

在实际操作中，我发现视频API的使用非常直观和方便。通过简单的几行代码，就可以实现复杂的功能。例如，在用户点击视频列表中的某个视频时，可以通过playVideo函数来切换视频的播放。这种灵活性和易用性使得视频API成为开发视频相关功能的强大工具。

其次，我学习了如何发送随机颜色的弹幕。弹幕是一种非常流行的互动方式，可以增强用户的参与感和互动性。在代码中，通过getDanmu函数获取用户输入的弹幕内容，并通过sendDanmu函数发送弹幕。在发送弹幕时，使用了getRandomColor函数生成随机颜色，使得弹幕的颜色更加丰富多彩。

在实际操作中，通过Math.random()生成随机数，并将其转换为16进制颜色值，可以轻松地生成各种不同的颜色。这不仅增加了弹幕的多样性，也提升了用户的体验。

在实验过程中，我也遇到了一些挑战。例如，在实现视频切换功能时，需要确保视频上下文的正确创建和使用；在生成随机颜色时，需要处理颜色值的格式问题。通过解决这些问题，我不仅提升了自己的编程能力，也积累了宝贵的经验。总的来说，本次实验让我对小程序开发有了更深入的理解和掌握。我相信这些技能和经验将在未来的开发工作中发挥重要作用，帮助我开发出更加优秀的应用。