【2024年夏季《移动软件开发》实验4】

一、实验目标

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

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

二、实验步骤

1. 创建项目：
       创建项目：videoplay，并在项目中创建文件夹images，将所需图片（播放键）复制粘贴进去。

1. 导航栏设计：

       在app.json中自定义导航栏标题和背景颜色，文件代码如下：

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

1. 页面布局和代码结构：

    先创建图像识别应用：

1. 区域1：视频播放器

    使用 <video> 组件。

    设置 id 为 myVideo，添加 controls 属性。

1. 区域2：弹幕发送区

    使用 <view> 组件，定义 class 为 danmuArea。

    内部包含 <input> 和 <button> 组件，用于输入弹幕内容并发送。

1. 区域3：视频列表

    使用 <view> 组件，定义 class 为 videoList。

    每个视频项使用 <view> 组件，定义 class 为 videoBar。

    每个视频项内部包含 <image> 用于显示播放图标，以及 <text> 显示视频标题。

    index.wxml文件代码：

<!--区域1：视频播放器-->  
<video id='myVideo' controls src="{{src}}"   
enable-danmu danmu-btn></video>  
<!--第二个区域：弹幕区域-->  
<view class='danmuArea'>  
  <input type='text' placeholder="请输入弹幕内容"  
  bindinput="getDanmu"></input>  
  <button bindtap="sendDanmu">发送弹幕</button>  
</view>  
<!--第三个区域：视频列表-->  
<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%;  
  margin-bottom: 20rpx; /* 增加视频底部的外边距 */  
}  
  
.danmuArea {  
  display: flex;  
  flex-direction: row;  
  margin: 20rpx 0; /* 增加上下外边距 */  
}  
  
input {  
  border: 1rpx solid #987938;  
  height: 100rpx;  
  padding: 0 20rpx; /* 增加左右内边距 */  
  flex-grow: 1; /* 扩展多余空间 */  
  border-radius: 10rpx; /* 圆角边框 */  
}  
  
button {  
  color: white;  
  background-color: #987938;  
  padding: 0 30rpx; /* 增加左右内边距 */  
  border-radius: 10rpx; /* 圆角边框 */  
  margin-left: 10rpx; /* 增加按钮与输入框之间的间距 */  
}  
  
/* 视频列表区域样式 */  
.videoList {  
  width: 100%;  
  min-height: 400rpx; /* 最小高度 */  
  margin-top: 20rpx; /* 增加顶部外边距 */  
}  
  
/* 单行列表区域样式 */  
.videoBar {  
  width: 95%;  
  display: flex;  
  flex-direction: row;  
  border-bottom: 1rpx solid #987938;  
  margin: 10rpx 0; /* 调整上下外边距 */  
  padding: 10rpx 0; /* 增加上下内边距 */  
}  
  
/* 播放图标样式 */  
image {  
  width: 70rpx;  
  height: 70rpx;  
  margin: 20rpx;  
  border-radius: 35rpx; /* 圆形图标 */  
}  
  
/* 文本标题样式 */  
text {  
  font-size: 48rpx; /* 略微增大字体 */  
  color: #987938;  
  margin: 20rpx 0; /* 调整上下外边距 */  
  flex-grow: 1; /* 扩展多余宽度 */  
  line-height: 1.4; /* 调整行高，增加可读性 */  
}  

    index.js文件代码：

/*生成随机颜色*/  
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('')  
}  
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:''  
  },  
  /*更新弹幕内容*/  
  getDanmu: function(e){  
    this.setData({  
      danmuTxt:e.detail.value  
    })  
  },  
  /*发送弹幕*/  
  sendDanmu: function(e){  
    let text=this.data.danmuTxt  
    this.videoCtx.sendDanmu({  
      text: text,  
      color:getRandomColor()  
    })  
  },  
  playVideo: function(e){  
    this.videoCtx.stop()  
    /*停止播放之前正在播放的视频*/  
    this.setData({  
      src: e.currentTarget.dataset.url  
    })  
    /*更新视频地址*/  
    this.videoCtx.play()  
    /*播放新的视频*/  
  },  
  /** 
   * 生命周期函数--监听页面加载 
   */  
  onLoad: function (options) {  
    this.videoCtx=wx.createVideoContext('myVideo')  
  },  
})  

1. 逻辑实现：

   更新播放列表：

   在区域3中，我们需要使用 wx:for 属性来循环展示视频列表，并在 data 中定义一个 list 数组来存储视频信息。

    点击播放视频：

    在区域3对组件添加data-url属性和bindtap属性。其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。

    在onLoad中创建视频上下文控制视频播放和停止。

   发送弹幕：

    在区域1中，添加 enable-danmu 和 danmu-btn 属性，允许发送弹幕并显示发送弹幕按钮。在区域2中，为文本框添加 bindinput 属性以获取用户输入的弹幕内容，为按钮添加 bindtap 属性以触发弹幕发送。

三、程序运行结果

测试视频播放功能、切换视频并播放、发送弹幕且弹幕颜色随机等功能：

四、问题总结与体会

实验问题

问题：一开始在视频列表中点击不同的视频时，新的视频无法正确加载并播放。

解决方法：在 onLoad 函数中，通过 wx.createVideoContext 方法为视频元素创建一个上下文。在 wxml 文件中，为视频列表中的每个视频项添加 data-url 属性，用于存储视频的播放地址，并绑定 bindtap 事件来触发视频切换的逻辑。在点击事件的处理函数 onVideoTap 中，通过获取 data-url 的值，使用 setSrc 方法更新视频的播放源，并调用 play 方法开始播放。

收获与体会

    通过本次实验，我深入学习了微信小程序的开发，特别是在实现视频播放功能时的技术要点。我掌握了如何使用 VideoContext 接口来控制视频的播放、暂停以及播放源的动态切换。