微信小程序视频播放还有弹幕

### 微信小程序中实现视频播放与弹幕功能

#### 使用 `<video>` 组件支持弹幕显示

为了在微信小程序内实现带有弹幕效果的视频播放，主要依赖于内置的 `<video>` 组件及其相关属性设置。通过指定 `danmu-list` 属性可以定义一组预设好的弹幕消息；而启用 `enable-danmu` 和 `danmu-btn` 则允许用户发送实时弹幕以及控制界面内的弹幕开关按钮。

以下是具体的应用实例：

<view class="container">
  <!-- 定义一个具有弹幕能力的 video -->
  <video id="myVideo"
         src="{{src}}"
         danmu-list="{{danmuList}}"
         enable-danmu
         danmu-btn>
  </video>

  <!-- 用户输入框用于提交新弹幕 -->
  <input type="text" bindinput="bindInput"/>
  <button bindtap="sendDanmu">发送</button>
</view>

对于上述模板部分的数据绑定，在对应的 JavaScript 文件里需做如下初始化工作[^2]：

Page({
  data: {
    src: 'https://example.com/path/to/video.mp4', // 替换成实际视频地址
    inputValue: '',
    danmuList: [
      { text: "第一条弹幕", color: "#ff0000", time: 3 },
      { text: "第二条弹幕", color: "#00ff00", time: 7 }
    ]
  },

  sendDanmu() {
    const myVideo = this.selectComponent('#myVideo');
    let newMsg = this.data.inputValue;
    
    if (newMsg !== '') {
      myVideo.sendDanmu({ 
        text: newMsg, 
        color: '#ffffff' 
      });
      
      this.setData({ inputValue: '' }); // 清空输入框内容
    }
  },

  bindInput(e) {
    this.setData({ inputValue: e.detail.value });
  }
});

此段脚本实现了两个重要功能：一是预先设置了两条不同时间点出现的红色和绿色文字样式的静态弹幕；二是提供了动态创建白色字体的新弹幕的能力，并将其即时呈现在正在播放的画面之上。

#### 关键特性说明

- **danmu-list**: 预先设定好一系列弹幕对象数组，每个对象包含三个字段——`text`(字符串), `color`(颜色值)，及时刻(`time`)。
- **enable-danmu**: 开启或关闭弹幕显示，默认情况下为 false。
- **danmu-btn**: 是否展示弹幕切换按钮给终端使用者操作，默认也是不开启状态(false)[^1]。