微信小程序入门三 播放视频+弹幕实现

和以前一样 先看结果
实现弹幕随机生成颜色，切换播放视频的功能
写博客的原因是好记性不如烂笔头，加上对知识了解得不够，写好也是逼自己去学习的过程！

开始分享代码前 先分享一个大佬的个性签名，我就是个小菜鸡！！！

好了，废话不多说

index.wxml

     <!-- 视频播放器 -->
	<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>
	<!-- 弹幕 -->
	<view class="Area">
	<input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
	<button bindtap="sendDanmu">发送弹幕</button>
	</view>
	<!-- 视频列表 -->
	<view class="videoList">
	<view class="videoBar" wx:for ="{{list}}" wx:key ="index" data-url="{{item.videoUrl}}" bindtap="playVideo">
	<image src="/images/play.jpeg"></image>
	<text>{{item.title}}</text>
	</view>
	</view>
注意
wx:key="{{xxxx}}" does not look like a valid key name (did you mean wx:key="id" ?)
解决办法：去掉大括号

**index.wxss**
```php
   video{
  width: 100%
}
.Area{
  display: flex;
  flex-direction: row;
}
input{
  border: 1rpx solid #987938;
  height: 100rpx;
  flex-grow: 1;/*扩张多余空间*/
}
button{
  color: white;
  background: #987938
}
.videoList{
  width: 100%;
  min-height: 400rpx;
}
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #987938;
  margin: 10rpx;
}
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
text{
  font-size: 45rpx;
  color: #987938;
  margin: 20rpx;
  flex-grow: 1;
}

index.js

//生成随机颜色
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('')
}
Page({
  data: {
    list: [
      {
        id: '111',
        title: '大娃',
        videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
      },
      {
        id: '222',
        title: '二娃',
        videoUrl: 'http://www.w3school.com.cn//i/movie.mp4'
      },
      {
        id: '333',
        title: '三娃',
        videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
      },
      {
        id: '444',
        title: '四娃',
        videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
      }
    ],
    src: '',
    danmuTxt: ''
  },
  getDanmu: function (event) {
    this.setData({
      danmuTxt: event.detail.value
    })
  },
  sendDanmu: function (event) {
    let text = this.data.danmuTxt
    this.videoCtx.sendDanmu({
      text: text,
      color: getRandomColor()
    })
  },
  playVideo: function (event) {
    this.videoCtx.stop()
    //停止播放之前正在播放的视频
    this.setData({
      src: event.currentTarget.dataset.url
    })
    //更新视频地址
    this.videoCtx.play()
    //播放新的视频
  },
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },

`下面是一些细节知识点！

wx.createVideoContext(videoId, this)
创建 video 上下文 VideoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 组件

danmu-btn是否显示弹幕按钮，只在初始化时有效，不能动态变更
enable-danmu 是否展示弹幕，只在初始化时有效，不能动态变更

bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 (点击按钮发送弹幕)

bindinput 在输入框输入过程中触发事件

data-xx 的作用是在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理

使用data-xx 需要注意的 xx 是自己取的名字, 后面跟着的渲染一定要是使用的值,否则无效
比如点击的是list 后面跟的是list的值,如果是图片后面就要是图片url的地址,

好了 分享到此结束 有问题嘀嘀我 感谢阅读 共同进步