移动软件开发--实验4：媒体API之口述校史

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

一、实验目标

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

二、实验步骤

1. 前期准备：创建项目，删除和修改文件，创建images文件夹，保存播放图标文件，完成文件配置。

   

2. 视图设计：

   • 导航栏设计：

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

   • 页面设计：分为视频播放器（使用video组件）、弹幕控制（使用input和button组件）、视频列表（使用view组件）三个区域进行设计，并利用flex布局完成样式设计。

3. 逻辑实现

   • 更新播放列表：在视频列表区域，添加wx:for属性，实现循环展示列表；然后在JS文件的data属性中添加list数组，来存放视频信息。得到效果如下：

   

   • 点击播放视频：在视频列表区域，添加data-url属性和bind:tap属性：记录每行视频对应的播放地址和用于触发点击事件；在JS文件的onload函数创建视频上下文，来控制播放和停止；添加自定义函数playVideo。

   <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bind:tap="playVideo">
   <image src="/images/play.png"></image>
   <text>{{item.title}}</text>
   </view>
   

    // 自定义函数playVideo
   playVideo:function(e){
   this.videoCtx.stop()  //暂停
   this.setData({  //更新视频地址
     src:e.currentTarget.dataset.url
   })
   this.videoCtx.play()  //播放新的视频
   },
   //生命周期函数--监听页面加载
   onLoad: function (options) {
   this.videoCtx = wx.createVideoContext('myVideo')
   },
   

   • 发送弹幕：给video组件添加enable-danmu和danmu-btn属性，给input框增加bindinput属性，给button增加bind:tap属性；

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

   对应的JS代码修改如下：

   //更新弹幕内容
   getDanmu:function(e){
       this.setData({
       danmuTxt:e.detail.value
       })
   },
   //发送弹幕
   sendDanmu:function(e){
       let text = this.data.danmuTxt;
       this.videoCtx.sendDanmu({
       text:text,
       color:this.getRandomColor()
       })
   },
   

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

三、程序运行结果

• 页面如下：

• 播放/暂停/切换视频：

• 发送弹幕：

四、问题总结与体会

• 遇到问题：在发送弹幕时，color属性的值被设置为字符串 getRandomColor()，导致弹幕发送时颜色无法正确生成。
• 解决方法：通过检查代码，发现应将其修改为this.getRandomColor()，调用函数本身，实现弹幕随机颜色生成。
• 收获：通过本次实验，我学会了如何使用视频API和发送弹幕，进一步掌握了微信小程序的开发技能。