2024年《移动软件开发》实验四：口述校史

一、实现功能

（一）基本功能

1.实现视频播放

2.更新播放列表

3.发送随机颜色弹幕

（二）额外功能

1.增加scroll-view，当视频列表边长可以下滑

2.存储字幕。再次播放视频时同时播放之前的弹幕

3.长按视频二倍速。

二、实现效果

视频播放效果

字幕效果：

滚轮：

字幕存储功能：

长按视频二倍速：
 

三、实现步骤

1.创建项目

2.导航栏设计

进入app.json文件，修改window属性

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "口述校史",
    "navigationBarBackgroundColor": "#ffb8c6"
  },

3.页面设计

(1) 视频组件设计

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

video {
  width: 100%;
}

效果图如下：

(2) 弹幕区域设计

<!--弹幕区域-->.

<view class="danmuArea">

  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>

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

</view>

.danmuArea {
  display: flex;
  flex-direction: row;
  margin-left: 3%;
  margin-right: 3%;
}

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

效果图如下：

(3) 视频列表设计

<!--视频列表-->
<view class='videoList'>
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bind:tap="playVideo">
    <image src="{{item.imageUrl}}" mode="aspectFit"></image>
    <text>{{item.title}}</text>
  </view>
</view>

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

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

image {
  width:150rpx;
  height: 150rpx;
  margin: 20rpx;
}

text {
  font-size: 45rpx;
  color: #987938;
  margin: 20rpx;
  flex-grow: 1;
}

效果如下：

4.基本逻辑实现

(1)首先创建data

  data: {
    isDoubleSpeed: false,
    src:"",
    id:"",
    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"
      },
      {
        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: '1001',
          title: '杨国宜先生口述校史实录',
          videoUrl: 
         'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4',
         imageUrl:"/images/icons/play.png"
          }
      ],
      danmuTxt:'',

  },

(2)添加视频上下文

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

(3)编写视频播放函数

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

(4)编写随机颜色函数

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

(5)编写弹幕发送函数

  sendDanmu:function(e){
    let text = this.data.danmuTxt;
    const c = this.getRandomColor()
    const danmu = {
      text: text,
      color: c,
      time: new Date().getTime(),
      videoId: this.data.id
    };
    console.log(danmu)
    this.saveDanmu(danmu)
    this.videoCtx.sendDanmu({
      text:text,
      color:c
    })
  },

效果如下：

5.其他页面及功能实现

(1)滚轮视图设计

<!--添加滚轮-->
<scroll-view scroll-y="true" class="scroll-view">
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <button bind:tap="sendDanmu" class="danmu-btn">发送弹幕</button>
</view>

<!--视频列表-->

  <view class="videoBar" wx:for="{{list}}" wx:key="index" data-url="{{item.videoUrl}}"  data-id="{{item.id}}" bind:tap="playVideo">
    <image src="{{item.imageUrl}}" mode="aspectFit"></image>
    <text>{{item.title}}</text>
    </view>
</scroll-view>

.scroll-view {
  height: 67vh; /* 设置高度，避免滚动内容超出范围 */
  overflow-y: auto;
}

(2)长按二倍速设计

首先在video中添加绑定函数:

然后编写函数:

    // 处理长按事件
    handleLongPress: function() {
      this.setData({
        isDoubleSpeed: true
      });
      this.videoCtx.playbackRate(2); // 设置二倍速播放
    },
  
    // 处理松开手指事件
    handleTouchEnd: function() {
      if (this.data.isDoubleSpeed) {
        this.setData({
          isDoubleSpeed: false
        });
        this.videoCtx.playbackRate(1); // 恢复正常播放速度
      }
    },

(3)存储弹幕设计

使用wx.getStorageSync函数，存储到本地文件中。存储内容包括时间、文本、颜色和视频ID。

当视频开始播放时，调用handlePlay函数，查找相应的字幕。

  // 保存弹幕到本地存储
  saveDanmu:function (danmu) {
    console.log("保存一个弹幕")
    let danmuList = wx.getStorageSync('danmuList') || [];
    danmuList.push(danmu);
    wx.setStorageSync('danmuList', danmuList);
  },
  // 读取存储的弹幕
  loadDanmu:function () {
  return wx.getStorageSync('danmuList') || [];
  },
  // 加载并展示本地存储的弹幕
  loadAndDisplayDanmu(videoId) {
    console.log(videoId)
    const danmuList = wx.getStorageSync('danmuList') || [];
  
      // 过滤出当前视频的弹幕
    const filteredDanmuList = danmuList.filter(danmu => danmu.videoId === videoId);
  
    // 将弹幕发送到视频中
    filteredDanmuList.forEach(danmu => {
        this.videoCtx.sendDanmu({
          text: danmu.text,
          color: danmu.color
        });
      });
    },
  
    // 播放视频时触发
    handlePlay:function(e) {
      console.log(e)
      this.loadAndDisplayDanmu(this.data.id);
    }

四、遇到问题

问题：写好播放视频函数后，视频无法正常播放，一直加载。当直接打开视频链接后可以播放。

解决方案：清除模拟器缓存，重新编译。

收获和体会：我掌握了控件video的使用方法，学习的视频api的使用，掌握如何发送随机颜色的弹幕。