2024ouc《移动软件开发》Lab4

最新推荐文章于 2024-09-30 12:58:13 发布

dhgaghawe

最新推荐文章于 2024-09-30 12:58:13 发布

阅读量677

点赞数 19

文章标签：微信小程序

本文链接：https://blog.csdn.net/dhgaghawe/article/details/141597732

版权

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

一、实验目标

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

二、实验步骤

页面设计

首先修改导航栏，修改后的效果如下图所示：

请添加图片描述

然后是页面设计，此次页面分为了三个部分，分别为视频播放区域、弹幕发送区域以及视频列表。wxxs和wxml的内容分别如下：

video{
  width: 100%;
}

.danmuArea{
  display: flex;
  flex-direction: row;
}

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

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

<video id = 'myVideo' controls></video>

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

<view class="videoList">
  <view class="videoBar">
    <image src="/images/play.png"></image>
    <text>我是标题</text>
  </view>
</view>

界面如下图所示：
请添加图片描述

逻辑实现

更新播放列表

视频下方的视频列表应该有多个视频，因此这里对<view class = "videoBar">这一组件增加wx:for属性，并在js文件中的data中加入list数组，用来存放视频信息。
wxml修改后部分内容如下：

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

data内容如下，包含了视频的id（这里每个视频id不同即可）、title（标题）、vidoeUrl（视频播放地址）：

  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' 
    }] 
  },

修改后效果如下图所示：

请添加图片描述

点击播放视频

继续在<view class = "videoBar">组件中添加data-url、bindtap属性，前者能够记录每行视频对应的播放地址，后者用于触发点击事件，playVideo是后面要自定义的函数。

  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo">

在onLoad函数中创建视频上下文，用来控制视频播放与停止：

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

playVideo函数：

  playVideo:function(e){
    this.videoCtx.stop()  //暂停
    this.setData({
      src:e.currentTarget.dataset.url
    })  //更新视频地址
    this.videoCtx.play()  //播放新的视频
  }

修改后效果如下图所示：

请添加图片描述

发送弹幕

在<video>组件中添加enable-danmu和danmu-btn属性，前者用来允许发送弹幕，后者用来显示“发送弹幕”的按钮。同时将弹幕发送区域中的<input>组件和<button>组件分别添加bindinput属性和bindtap属性，分别用于获取弹幕文本内容和触发点击事件。

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

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

同时需要修改js中的内容：首先在data中添加danmuTxt，然后自定义getDanmu和sendDanmu函数

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

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

此时可以发出红色的弹幕，如下图所示：
请添加图片描述

下一步将弹幕颜色改为随机色：
首先自定义一个函数getRandomColor用来随机生成一种颜色，然后修改sendDanmu中的color即可实现：

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