使用视频api开发微信小程序-CSDN博客

本文链接：https://blog.csdn.net/lysall/article/details/141612931

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

姓名：刘演森学号：22020007064

姓名和学号	刘演森，22020007064
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称	实验1：第一个微信小程序
博客地址	https://blog.csdn.net/lysall?type=blog
Github仓库地址？	XXXXXXX

一、实验目标

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

二、实验步骤

页面布局

创建空白模板小程序，从导航栏开始布局：金棕色回背景，黑色字体
```
"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "口述校史",
    "navigationBarBackgroundColor": "#987938"
  },
```
下面依次是三个区域：视频区域、发送弹幕区域、视频列表区域。下面是与显示效果。

视频区域：视频播放器，用于播放视频。

发送弹幕：包含文本输入区域，弹幕发送区域。

视频列表：垂直排列读个视频标题，点击会播放对应的视频。

区域1使用了组件，id设置为myvedio，方便后续逻辑实现。
```

<video id="myvedio" src="{{src}}" enable-danmu danmu-btn></video>
```
区域2使用，里面包含、组件，手机输入文本发送弹幕。组件添加一个点击函数getdanmu获取弹幕，组件添加一个点击函数senddanmu发送弹幕。
```

<view class="danmuarea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getdanmu">
  </input>
  <button bind:tap="组件添加一个点击函数senddanmu获取弹幕">发送弹幕</button>
</view>
```
区域3使用两层，里面使用wx：for循环渲染列表减少代码量。嵌套设置一个点击函数playvedio用于视频播放，list数据在逻辑实现部分说明。
```

<view class="videolist">
  <view class="videobar" wx:for="{{list}}"   data-url="{{item.videoUrl}}" wx:key="video{{index}}" bind:tap="playvedio" >
    <image src="/images/play.png"></image>
    <text>{{item.title}}</text>
  </view>
</view>
```

逻辑实现

在js文件data写入初始数据danmu、list数组，数组元素包含title，videoUrl。

data:{
danmu:'',
list: [{
      id: '299371',
      title: '杨国宜先生口述校史实录',
      videoUrl: 
     'https://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4',
      },{},{},{}
}

在onLoad监听函数创建视频上下文videoCtx。

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

设置我们声明的三个点击函数

播放视频函数：先暂停视频的播放，更新视频的链接后播放。

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

获取弹幕函数

getdanmu:function(e){
    this.setData({danmu:e.detail.value})
  },

发送弹幕函数，先获取弹幕，设置一个随机颜色函数。把弹幕设置为随机颜色后发布。

senddanmu:function(e){
    let text = this.data.danmu;
    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)
    }
    this.videoCtx.sendDanmu({
      text:text,
      color:'#'+rgb.join('')
    })
  },