小程序：视频播放-CSDN博客

本文链接：https://blog.csdn.net/2201_75450113/article/details/132565256

一、实验目标

1、掌握视频列表的切换方法。

2、掌握视频自动播放方法。

3、掌握视频随机颜色弹幕效果。

二、实验步骤

2.1 项目准备

创建视屏播放项目并删除和修改相关文件
在data中添加四个视频的地址等如下图所示

list: [{
      id: '1001',
      title: '杨国宜先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
    },
    {
      id: '1002',
      title: '唐成伦先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
    },
    {
      id: '1003',
      title: '倪光明先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
    },
    {
      id: '1004',
      title: '吴仪兴先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
    }
  ]
  },

下载播放图片（下载地址：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip），置于images文件中

2.2 视图设计

2.2.1 页面设计

添加相关元素和设计样式后，效果图（具体代码见2.3）

2.2.2 点击播放视频

对videoBar控件添加data–url和bindtap播放视频事件。
onload创建视频上下文。
如图已经可以播放视频。（具体代码见2.3）

2.2.3 发送弹幕

对video添加enable-danmu和danmu-btn属性用于是否允许发送弹幕和显示发送弹幕按钮
为文本框添加bindinput属性，获取弹幕内容；并为按钮追加bindtap发送弹幕事件。
如图已经可以发送红色弹幕。（具体代码见2.3）

2.3 代码

2.3.1 html

<view class="container">
  <video id='myVideo' controls autoplay enable-danmu danmu-btn src="{{src}}"/>
  <view class="danmuArea">
   <input id="danMu" type="text" placeholder="输入弹幕文字" bindinput="getDanmu"/>
   <button bind:tap="sendDanmu">发送按钮</button>
  </view>
 <view class="videoList">
   <view class="videoBar" wx:for="{{list}}" wx:key="index" data-url="{{item.videoUrl}}" bind:tap="playVideo">
     <image src="/images/images_play/images/play.png" mode="aspectFill"/>
    <text>{{item.title}}</text>
   </view>
 </view>
</view>

2.3.2 CSS

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

video{
  width: 90%;
  height: 35%;
}

.danmuArea{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 90%;
  height: 100rpx;
  margin:20rpx;
}

input{
  height: 100rpx;
  margin-right: 20rpx;
  flex-grow: 1;
  background-color: aqua;
  border: 1px solid #3c5F81;
}

button{
  background-color: bisque;
}

.videoList{
  width: 100%;
  min-height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.videoBar{
  width: 90%;
  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;
}

2.3.3 JS

data: {
    danmuList:"",
    list: [{
      id: '1001',
      title: '杨国宜先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
    },
    {
      id: '1002',
      title: '唐成伦先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
    },
    {
      id: '1003',
      title: '倪光明先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
    },
    {
      id: '1004',
      title: '吴仪兴先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
    }
  ]
  },
  playVideo:function(e){
    this.videoContext.stop();
    this.setData({
        src:e.currentTarget.dataset.url
      });
    this.videoContext.play();
  },
  getDanmu:function(e){
    this.setData({
      danmuList:e.detail.value
    })
  },
  getRandomColor:function(){
    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("");
  },
  sendDanmu:function(e){
    let text = this.data.danmuList;
    this.videoContext.sendDanmu({
      text: text,
      color: this.getRandomColor()
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoContext = wx.createVideoContext("myVideo");
  },