2024年夏季《移动软件开发》作业4-校史视频

2024年夏季《移动软件开发》作业4-校史视频

姓名：冯欣怡 学号：22020006029

姓名和学号？	冯欣怡，22020006029
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验1：第一个微信小程序
博客地址？
Github仓库地址？	Fxinyi/3_24_summer_WeiXinMiniprogram_SchoolVideo (gitee.com)

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

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

二、实验步骤

1. 创建项目

首先创建一个项目，不适用云服务。

2. 设计页面

此口述校史小程序主体之有一个页面，为了实现点播多个视频，应该有一个类似视频列表的区域。

除此之外要有视频区和弹幕区，共三个分区。页面如下所示：

最终呈现如下的样子：

用到 #64baaa 和 #c4fcf0 #055745颜色，呈现绿色系

使用的按键照片：Play Button Icon - 素材 - Canva可画

展现三个区域的样子：

（1） 区域一:视频区

用到微信自带的 controls

wxml:

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

wxss:

.video{
  width: 100%;
  margin:0 auto;
  display: flex;
  justify-content: center;
}

（2） 区域二：弹幕区

弹幕区有三个容器：首先是danmuArea,内部放两个水平放置的块，因此：

wxss:

.danmuArea{
  display: flex;
  flex-direction:row;
  margin: 20rpx 10rpx 25rpx 10rpx ;
}

然后是输入弹幕区：

wxss:

input{
  border : 1rpx solid #64baaa;
  height:100rpx;
  display: flex;
  justify-content: center;
}

最后，提交按键：

wxss:

button{
  color:white;
  background-color:#64baaa;
  display: flex;
  justify-content: center;
  align-items: center;
}

将input和button放在 danmuArea里：

wxml：

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

(3) 区域三：视频列表区

这个区域是一个视频词条的列表，每一个卡片占一行:包括列表区和词条区

先用一个静态的尝试设计样式

列表区wxss：

.videoList{
  width: 100%;
  min-height: 400rpx;
}

词条区:

应该包括一个播放按钮和一个视频标题，二者水平放置

wxss:

.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #c4fcf0;
  margin:10rpx;
}

wxml:

  <!--视频列表-->
  <view class='videoList'>
  <view class='videoBar'>
    <image src='/images/tl.webp'></image>
    <text>这是一个测试标题</text>
  </view>
</view>

呈现出的样子：

3. 视频列表实现

上述视频列表区已经测试通过，下面要做的是给每个视频都加对应的词条，对应各自的标题：

使用wx：for/key 的循环：对于每个视频都在view videoBar中按同样的方法展示，因此要在js中先上传视频的信息：

data: {
    src:"",
    list: [{
      id: '1001',
      title: '杨国宜先生口述校史实录',
      videoUrl: 
     'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4',
     imageUrl:"/images/icons/play.png"
      },
      {
      id: '1002',
      title: '唐成伦先生口述校史实录',
      videoUrl: 
     'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4',
     imageUrl:"/images/icons/play.png"
      },
      {
      id: '1003',
      title: '倪光明先生口述校史实录',
      videoUrl: 
     'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4',
     imageUrl:"/images/icons/play.png"
      },
      {
      id: '1004',
      title: '吴仪兴先生口述校史实录',
      videoUrl: 
     'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4',
     imageUrl:"/images/icons/play.png"
      }
      ],
      danmuTxt:'',

  },

然后就可以在wxml中实现：注意 wx:key=“index” （而不是 wx:key=“video{{index}}”）

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

呈现出如此样式：

4. 播放按键实现

视频词条逻辑&&播放器逻辑

给视频词条放上url和bindtap绑定函数：

<view class='videoList'>
  <view class="videoBar" wx:for="{{list}}" wx:key="index" data-url="{{item.videoUrl}}" bindtap='playVideo'>
    <image src='/images/tl.webp'></image>
    <text>{{item.title}}</text>
  </view>
</view>

给播放器补充src：

  <video id="myVideo" controls src="{{src}}"></video>

在js中定义播放函数:

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

暂停当前的播放，获取选择的新的视频url传递给src，播放现在的视频

这样就实现了视频播放

5. 弹幕按键实现

点击输入区域，实时获取输入的内容bindinput=“getdanmu”：

<!--弹幕区域-->.
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
</view>

在js中编写从input中获得弹幕“getdanmu"

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

点击发送按钮时触发发送弹幕功能,进行bindtap：

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

发送弹幕，调用.videoCtx.sendDanmu方法，设置一个默认颜色：

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

为了高级弹幕，我们设置随机的弹幕颜色，只要随机生成数，组合成16进制即可：

将发送弹幕中color改成：

   color:this.getRandomColor()

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

256内整随机数转换成16禁止，组合成color

三、程序运行结果

列出程序的最终运行结果及截图。

四、问题总结与体会

在写

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

时，开始用到

wx:key=“{{index}}”>是不可以的，必须把{{}}去掉。

片转存中…(img-gjpm9Din-1724767071675)]

[外链图片转存中…(img-f4IGlMm8-1724767071676)]

[外链图片转存中…(img-rNjLobif-1724767071676)]

四、问题总结与体会

在写

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

时，开始用到

wx:key=“{{index}}”>是不可以的，必须把{{}}去掉。

通过这次实验学会了基本的视频控制方法~