小程序--视频播放 以及弹幕发送

此小程序，能进行视频播放，发送多种颜色的弹幕，并包含一个视频列表，可进行视频的的选择播放。博客内容包括，程序界面，程序源码与涉及到的相关知识点。

一.界面

二.相关代码

1.index.wxml

<!-- 第一个区域：视频播放器-->
<video id='myVideo' controls src='{{src}}' enable-danmu danmu-btn></video>
<!-- 第二个区域：弹幕区域 -->
<view class='danmuArea'>
  <input type='text' placeholder='请输入弹幕内容' bindinput='getDanmu'></input>
  <button bindtap='sendDanmu'>发送弹幕</button>
</view>
<!--第三个区域 ： 视频列表-->
<view  class="videoList">
  <view class="videoBar"wx:for='{{list}}' wx:key='video{{index}}' data-url='{{item.videoUrl}}'  
  bindtap="playVideo">
    <image src="/images/bofang.jpg"></image>
    <text>{{item.title}}</text>
  </view>
</view>

2.index.wxss

#myVideo{
  width: 100%;
}
.danmuArea{
  display: flex;
  flex-direction: row;
}
input{
  border: solid #987938;
  height: 100rpx;
  flex-grow: 1;
}
button{
  color: white;
  background-color: #987938;
}
.videoList{
  width: 100%;
  min-height: 400rpx;
}
.videoBar{
  display: flex;
  flex-direction: row;
  width: 95%;
  border-bottom: 1rpx solid #987938;
  margin: 10rpx; 
}
image{
  width: 70rpx;
  height: 70rpx;
  margin-top: 15rpx;
}
text{
  font-size: 45rpx;
  margin: 20rpx;
  color: #987938;
  flex-grow: 1;
}

3.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:'123',
        title:"视频1",
        videoUrl:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
       },
      {
        id: '456',
        title: "视频2",
        videoUrl:'http://www.w3school.com.cn//i/movie.mp4'
      },
      {
        id: '789',
        title: "视频3",
        videoUrl:'http://www.w3school.com.cn//i/movie.mp4'
      },
      {
        id: '147',
        title: "视频4",
        videoUrl:'http://www.w3school.com.cn//i/movie.mp4'
      }
    ],
    src:'',
    danmuTxt:''
  },
  getDanmu: function (e) {
    this.setData({
      danmuTxt: e.detail.value
    })
  },
  sendDanmu: function (e) {
    let text = this.data.danmuTxt
    this.videoCtx.sendDanmu({
      text: text,
      color: getRandomColor()
    })
  },
  playVideo: function (e) {
    this.videoCtx.stop()
    // 停止播放之前正在播放的视频
    this.setData({
      src: e.currentTarget.dataset.url
    })
    // 更新视频地址
    this.videoCtx.play()
    // 播放新的视频
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },

三.相关知识点

1.wx-for:

a：数组名称 (array)
当前项的下标变量名 默认index (数组下标从0开始)
当前项的变量名 默认 item (就是数组每一个元素对应的内容，及花括号内的内容)

Page({
	data:{
		array:[
				{
					message:"元素1"
				},
				{
					message:"元素2"
				},
				{
					message:"元素3"
				}
			]
		}
})

在组件上使用“wx:for”控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为“index”，数组当前项的变量名默认为“item”

{{index}}:{{item.message}}

使用“wx:for-index”可以指定数组当前下标的变量名，
使用“wx:for-item”可以指定数组当前元素的变量名；

wx:for可以进行嵌套
输出九九乘法表的公式：

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
	<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
		<view wx:if="{{i <= j}}">
			{{i}} * {{j}} = {{i * j}}
		</view>
	</view>
</view>

wx:key
官方解释：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
翻译：在不使用 wx:key的情况下, 如果 array 内的数据发生改变，则会重新创建每个Item对象然后渲染列表（费时费力）
在使用 wx:key的情况下，如果array中的数据发生改变，只是将对应的对象重新排序。未发生变化的对象，不会重新创建(Very good)

使用情况：
（1）.第一种：wk:key=“字符串”，代表在for循环的array中的item的某个property，该property的值（不是property哦！）需要是列表中唯一的字符串或者或者数字

Page({
data:{
array:[
{
id:1,
message:"元素1"
},
{
id:2,
message:"元素2"
},
{
id:3,
message:"元素3"
}
]
}
})

（2）.第二种：wk:key="*this",代表在for循环中的item自身，这种表示需要item本身就是一个唯一的字符串或者数字。

2.video组件

主要是用到 controls 属性
video组件具体相关内容见开发文档链接如下：
开发文档