OUC 移动软件开发实验四

离504

于 2024-08-27 09:31:56 发布

阅读量556

点赞数 15

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2203_75387758/article/details/141591509

版权

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

一、实验目标

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

二、实验步骤

1.导航栏设计

导航栏背景为棕色，标题为“口述校史”，将app.json中的window中的代码改为以下代码：

 "window": {

  "navigationBarBackgroundColor": "#987938",

  "navigationBarTitleText": "口述校史"

 },

效果如图所示：

2.页面设计

页面共三个区域，分别为：视频播放区，弹幕区以及视频列表。

视频播放区：

使用video组件来加入一个视频播放器，在.wxml中写入video组件：

<!-- 视频播放器 -->
<video  id='myVideo' controls=""></video>

同时在.wxss中为其设置样式：

video{
  width: 100%;
}

效果如图所示：

弹幕区域：

弹幕区域需要一个输入框组件和一个按钮，用来输入和发送弹幕，在.wxml中添加input组件和button组件：

<view class='danmuArea'>
  <input type="text" placeholder="请输入弹幕"></input>
  <button>发送弹幕</button>
</view>

在.wxss文件中为其设置样式：

.danmuArea{
  display: flex;
  flex-direction: row;
}
input{
  border: 1rpx solid #987938;
  flex-grow: 1;
  height: 100rpx;
}
button{
  color: white;
  background-color: #987938;
}

此时小程序效果如下：

视频列表：

视频列表需要实现的是一个可拓展的多行区域，因此使用wx:for属性循环添加内容，.wxml文件中继续添加代码：

<view class='videoList'>
  <view class='videoBar'>
    <image src="/images/play.png" ></image>
    <text>这是一个测试标题</text>
  </view>
</view>

同时在.wxss中为其设置样式：

.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;
}

此时可以看见只有一行的视频列表：

3.更新播放列表

修改.wxml中视频列表区域的代码：

<view class='videoList'>
  <view class='videoBar' wx:for='{{list}}' wx:key='video{{index}}'>
    <image src="/images/play.png" ></image>
    <text>{{item.title}}</text>
  </view>
</view>

同时在js文件中添加视频信息，以提供给播放列表。

在data中加入list数组，同时加入以下信息：

 list:[
      {
        id:'299371',
        title:'杨国宜先生口述校史实录',
        videoUrl:'https://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
      },
      {
        id:'299396',
        title:'唐成伦先生口述校史实录',
        videoUrl:'https://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
      },
      {
        id:'299378',
        title:'倪光明先生口述校史实录',
        videoUrl:'https://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
      },
      {
        id:'299392',
        title:'吴兴仪先生口述校史实录',
        videoUrl:'https://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
      }
    ],

此时可以看见全部的四个视频：

4.播放视频

为视频列表添加data-url属性和bindtap属性，用以提供播放地址和触发点击事件。

.wxml修改代码如下：

  <view class='videoBar' wx:for='{{list}}' wx:key='video{{index}}' data-url='{{item.videpUrl}}' bind:tap="playVideo">

在js中创建视频上下文，这里的videoCtx可以理解为一个视频的遥控器：

  onLoad: function (options) {
    this.videoCtx=wx.createVideoContext('myVideo', component)
  },

之后在js中添加bindtap绑定的playVideo函数，在点击后会先暂停当前播放的视频，之后修改url，再播放新的视频：


    playVideo:function(e){
      this.videoCtx.stop()
      this.setData({
        src:e.currentTarget.dataset.url
      })
      this.videoCtx.play()
    }

程序进行到此，已经能播放全部的四个视频：

5.彩色弹幕的实现

首先修改video组件的属性，为其添加enable-danmu属性，允许发送弹幕：

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

为input组件添加bindinput属性，为button组件添加bindtap属性，用于事件的触发。

 <button bind:tap="sendDanmu">发送弹幕</button>

同时修改js文件，在其中添加getDanu和sendDanmu两个函数：

   getDanmu:function(e){
      this.setData({
        danmuTxt:e.detail.value
      })
    },
    sendDanmu:function(e){
      let text=this.data.danmuTxt;
      this.videoCtx.sendDanmu({
        text:textStride,
        color:'red'
      })
    },

此时已经可以发送红色的弹幕：

之后再js中定义函数getRandomColor，生成随机的颜色：


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

同时修改sendDanmu中的color属性：