实验3：视频播放小程序_src:e.currenttarget.dataset.url-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52008972/article/details/126491707

一、实验目标

1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。

二、实验步骤

准备工作

首先创建页面，按照文档要求删除和修改相关文件及代码。创建images文件夹，放置下载好的图标素材。

视图设计

页面主要包括三个区域，分别是视频播放器、弹幕发送区域和视频列表。

视频播放器用于播放特定的视频。用一个<video>组件实现一个视频播放器，并在index.wxss中设置好组件宽度。

//index.wxml
<!--区域一：视频播放器-->
<video id='myVideo'src='{{src}}'controls enable-danmu danmu-btn></video>  

//index.wxss
/*一、视频组件样式*/
video{
  width:100%;   /*视频组件宽度为100%*/
}

弹幕发送区域包含文本输入框和发送按钮，用<view>组件实现一个单行区域，在index.wxss中设置好文本输入框和按钮样式。

//index.wxml
<!--区域二：弹幕控制样式-->
<view class='danmuArea'>
  <input type='text'placeholder='请输入弹幕内容'bindinput='getDanmu'></input>
  <button bindtap='sendDanmu'>发送弹幕</button>
</view>

//index.wxss
/*二、弹幕控制样式*/
.danmuArea{
  display:flex;    
  flex-direction:row;
}
/*文本输入框样式*/
input{
  border:1rpx solid #987938;  //金棕色
  flex-grow:1;
  height:100rpx;
}
/*按钮样式*/
button{
  color:white;    //字体颜色
  background-color:#987938;   //背景颜色
}

视频列表垂直排列多个视频标题，点击不同的标题播放对应的视频内容。需要使用<view>组件实现一个可扩展的多行区域，每一行包括一个播放图标和一个视频文本标题。先设计第一行效果，然后用for循环添加全部内容。为了能够顺利实现功能，添加data-url属性和bindtap属性。其中，data-url用于记录每行视频中对应的播放地址，bindtap用于触发点击事件。

//index.wxml
<!--区域三：视频列表-->
<view class='videoList'>
  <view class='videoBar' wx:for='{{list}}'wx:key='video{{index}}'data-url='{{item.videoUrl}}'bindtap='playVideo'>
    <image src='/images/play.png'></image>
    <text>{{item.title}}</text>
  </view>
</view>

//index.wxss
/*三、视频样表样式*/
/*a.视频列表区域样式*/
.videoList{
  width:100%;      /*宽度*/
  min-height:400rpx;  /*最小高度*/
}
/*b.单行列表区域样式*/
.videoBar{
  width:95%;
  display:flex;
  flex-direction: row;
  border-bottom: 1rpx solid #987938;
  margin: 10rpx;
}
/*c.播放图标样式*/
image{
  width:70rpx;
  height:70rpx;
  margin: 20rpx;
}
/*d.文本标题样式*/
text{
  font-size:45rpx;
  color:#987938;
  margin: 20rpx;
  flex-grow:1;
}

逻辑实现

在上面我们已经完成了基本的视图设计，现在需要实现我们的播放器功能。

首先是更新视频列表，在之前用for循环展示列表，现在在index.js文件中添加list数组，用来存放视频信息。

//index.js
Pages({
  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'
  }
 ]
  }
})

我们还需要一些控件来控制视频的播放与停止。首先是onLoad()函数控制视频的播放和暂停。再添加一个playVideo()函数来控制播放新视频。

//index.js
Pages({
    /*生命周期函数--监听页面加载 */
  onLoad:function(options){
    this.videoCtx=wx.createVideoContext('myVideo')
  },
  /*播放视频*/
  playVideo:function(e){
    //停止之前正在播放的视频
    this.videoCtx.stop()
    //更新视频地址
    this.setData({
      src:e.currentTarget.dataset.url
    })
    //播放新的视频
    this.videoCtx.play()
  }
})

最后一个功能是发送弹幕功能，再文本框输入弹幕后，点击发送即可在屏幕上看到。我们需要在区域一<video>组件中添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮。在区域二中为文本框追加bindinput属性和bindtap属性，用于获取文本内容和触发点击事件。

//index.wxml
<!--区域一：视频播放器-->
<video id='myVideo'src='{{src}}'controls enable-danmu danmu-btn></video>  
<!--区域二：弹幕控制样式-->
<view class='danmuArea'>
  <input type='text'placeholder='请输入弹幕内容'bindinput='getDanmu'></input>
  <button bindtap='sendDanmu'>发送弹幕</button>
</view>

//index.js
  /*更新弹幕内容 */
  getDanmu:function(e){
    this.setData({
      danmuTxt:e.detail.value
    })
  },
  /*发送弹幕 */
  sendDanmu:function(e){
    let text=this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      //color:'red'
      color:getRandomColor()
    })
  }

弹幕功能已经实现，为了让弹幕更加多彩，我们随机设置弹幕颜色。用一个自定义函数getRandomColor随机生成一个十六进制的颜色，实现彩色弹幕效果。

  //生成随机颜色
  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('')
  }