实验记录：校史播放器

harykali
66 阅读2分钟

一、实验目标

编写一个简单的校史播放器

二、实验步骤

2.1页面样式初步设计

  • 首先先对调整app.json文件，为小程序的导航栏设定样式，代码如下:
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "口述校史",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
  • 编写index.wxml，初步形成小程序的主页界面外观，代码如下
<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>test</text>
    </view>

</view>
  • 编写index.wxcss，为小程序的主页界面外观提供样式支持，代码如下:
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;
}

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

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

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

此时小程序外观如下所示：

2.2交互逻辑：视频播放

  • 此处先加入视频播放的控制逻辑，先对index.ts的代码进行更改，此处的大体逻辑是调用接口来获取url中的视频，然后进行播放，此处我们调用了createVideoContext这个方法，其可以通过 videoId 跟一个 video 组件绑定，并可以操作一个 video 组件。
    playVideo: function(e) {

      // 视频暂停
      this.videoCtx.stop()

      // 获取新的视频地址
      this.setData({
        src: e.currentTarget.dataset.url
      })

      // 开始播放另一个视频
      this.videoCtx.play()
    }

    //视频的上下文获取
   onLoad: function(options) {
      this.videoCtx = wx.createVideoContext("myVideo")

    },
  • 设置页面的数据
data: {
      danmuTxt:'test',
      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'
        }
      ]

    },
  • 此时还需要对小程序的前端进行调整，此时需要打开index.wxml，更改一个视频列表区域的代码
<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="id" data-url="{{item.videoUrl}}" bindtap="playVideo">
    <image src="../images/play.png"></image>
    <text>{{item.title}}</text>
  </view>
</view>

2.3 逻辑实现：发送弹幕

  • 弹幕的后端逻辑实现主要有三个，均需要在index，index.ts当中实现

    • 为弹幕设置随机的颜色
    • 获取弹幕列表
    • 发送弹幕

  • 函数如下所示

//获取随机颜色
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('')
  },

//获取弹幕
  getDanmu: function (e) {
      this.setData({
        danmuTxt:e.detail.value
      })
    },

//发送弹幕
 sendDanmu: function () {

      let text = this.data.danmuTxt

      this.videoCtx.sendDanmu({
        text:text,
        color:getRandomColor()
      })
    },
  • 这里同时需要修改index.wxml文件，确保弹幕可以成功显示在小程序的页面上
<!-- 区域1：视频播放器 -->
<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>
<!-- 区域2：弹幕控制 -->
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

三、实验结果

四、问题总结与体会

在本次实验当中，我遇到的主要问题是如何编写弹幕颜色随机生成的函数，在一开始的时候我以为弹幕的颜色实参应该是一个代表RGB值的三元数，然而传入之后我发现视频中的所有弹幕都被设置为了白色，多次检查之后我才发现弹幕颜色是一个16进制的数，改写后成功实现了不同颜色的弹幕

avatar
文章
阅读
粉丝