引言
在微信小程序开发中，`video` 组件是非常常用的媒体组件。但在近期的开发实践（如《案例 4.7 video组件》）中发现了一个有趣的兼容性问题：`video` 组件的 `danmu-btn`（弹幕按钮）属性，在较低的基础库版本中正常显示，但在较高的基础库版本中却不再显示。

为了优雅地解决这个问题并完成作业，本文记录了从零实现该视频播放与弹幕功能的完整过程，并通过代码动态判断基础库版本，实现了高低版本下弹幕按钮的自适应显示。

 一、 功能需求与现象分析
1. **基本功能**：页面包含视频组件、输入框、发送按钮。点击视频可播放，输入文字点击发送后，视频上会出现**随机颜色**的弹幕。
2. **版本差异**：
   * 基础库 **< 3.0.0**（低版本）：视频控制栏会自动显示弹幕按钮。
   * 基础库 **>= 3.0.0**（高版本）：官方为了优化体验，隐藏了该按钮。
3. **解决方案**：在 JS 中通过 `wx.getSystemInfoSync()` 获取当前 SDK 版本。如果是低版本，将 `danmu-btn` 绑定的变量设为 `true`；高版本设为 `false`。这样不仅能满足代码兼容性，也能完美录制作业要求的对比视频。

---

### 二、 核心代码实现

#### 1. 修改 `app.json` 开启 webview 渲染
首先，在 `app.json` 中确保配置了 webview 渲染引擎，保证组件稳定运行。
```json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "style": "v2",
  "renderer": "webview"
}
```

#### 2. 编写结构 `index.wxml`
在这里，我们将 `danmu-btn` 绑定到一个动态变量 `showDanmuBtn` 上。
```html
<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y="true">
  <view class="box">
    <view class="title">华为开发者大会-2026</view>
    <view class="video-layout">
      <!-- 绑定 showDanmuBtn 动态控制弹幕按钮 -->
      <video id="my-video" src="{{videoPath}}" controls="true" danmu-list="{{danmuList}}" enable-danmu="true" danmu-btn="{{showDanmuBtn}}"></video>
    </view>
    <view class="txt-style">弹幕内容</view>
    <input type="text" placeholder="在此处输入弹幕内容" bindblur="inputBlur" />
    <button type="primary" bind:tap="sendDanmu">发送弹幕</button>
  </view>
</scroll-view>
```

#### 3. 编写样式 `index.wxss`
保持页面简洁美观，中心对齐视频，底部使用蓝色下划线区分输入框。
```css
/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
.box {
  margin: 20rpx;
  padding: 20rpx;
  border: 4rpx solid #FF9500;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
  color: red;
}
.video-layout {
  display: flex;
  justify-content: center;
}
.txt-style {
  font-size: large;
  margin-top: 20rpx;
}
input {
  height: 80rpx;
  border-bottom: 2rpx solid blue;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}
```

#### 4. 编写逻辑 `index.js`
包含随机颜色生成、版本号判断、视频上下文获取及弹幕发送。
```javascript
// index.js

// 生成随机颜色的十六进制字符串
function getRandomColor() {
  let rgb = []
  for (let index = 0; index < 3; index++) {
    let color = Math.floor(Math.random() * 256).toString(16)
    // 补齐两位数
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({
  data: {
    // 测试视频链接（如失效请更换为实际有效的 mp4 直链）
    videoPath: 'https://baikebcs.bdimg.com/baike-other/big-buck-bunny.mp4', 
    danmuList: [
      { text: "鸿蒙世界，奔腾不息", color: "#ff0000", time: 1 },
      { text: "华为开发者大会2026", color: "#00ff00", time: 5 },
      { text: "携手助力，筑牢金融安全", color: "#00ff00", time: 10 }
    ],
    showDanmuBtn: false // 默认不显示弹幕按钮
  },

  onLoad() {
    // 【核心逻辑】获取系统信息，判断基础库版本
    const systemInfo = wx.getSystemInfoSync();
    const version = systemInfo.SDKVersion; // 例如 '2.32.3' 或 '3.5.8'
    
    // 字符串比较：如果版本号小于 '3.0.0'（即低版本），则显示弹幕按钮
    if (version < '3.0.0') { 
      this.setData({
        showDanmuBtn: true
      });
    }

    // 获取视频上下文（用于后续发送弹幕）
    const query = wx.createSelectorQuery()
    query.select('#my-video').context()
    query.exec((res) => {
      if (res[0]) {
        this.videoCtx = res[0].context
      }
    })
  },

  // 监听输入框失焦，获取用户输入内容
  inputBlur(e) {
    this.inputValue = e.detail.value
  },

  // 发送弹幕
  sendDanmu() {
    if (!this.inputValue) {
      wx.showToast({ title: '请输入弹幕内容', icon: 'none' })
      return
    }

    this.videoCtx.sendDanmu({
      text: this.inputValue,          // 弹幕文字
      color: getRandomColor()         // 弹幕颜色
    })
    
    // 发送完毕后清空输入状态
    this.inputValue = ''
  }
})

三、 总结
本文不仅完成了 video 组件的基本应用（包括获取上下文、发送自定义弹幕），还针对微信小程序不同基础库版本带来的 API/组件行为差异，给出了优雅的兼容方案。在开发过程中，如果遇到 `Failed to load media` 报错，通常是网络链接失效或被限制，及时更换稳定的视频直链或使用本地视频调试即可。