视频播放小程序

GitHub仓库地址：GitHub - Lsy0929/videoDemo: 移动软件开发实验

一、实验目标

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

二、实验步骤

1.项目创建

创建空白文件夹videoDemo，用测试号新建项目

2.页面配置

删除多余的页面文件和代码，创建文件夹images，并将事先下载好的video图标存入其中

3.视图设计

1.导航栏设计：在app.json中修改导航栏标题和背景颜色

"navigationBarBackgroundColor": "#987938",
"navigationBarTitleText": "口述校史",

2.页面设计：页面包括三个区域：视频播放器，弹幕发送区域和视频列表，用<video>、<view>、<input>、<button>、<image>和<text>组件在wxml文件中写出对应代码，并在wxss中进行渲染

 

4.逻辑实现

1.更新播放列表：在区域3对<view class=’videoBar’>组件添加wx:for属性，改写为循环展示列表。在js文件的data属性中追加list数组，用于存放视频信息。

 

 

2.点击播放视频：在区域3对<view class=’videoBar’>组件添加data-url属性和bindtap属性

<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>

在js文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止。

添加playVideo函数

playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play();
  },

 

3.发送弹幕：在区域1对<video>组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示”发送弹幕“按钮。在区域2为文本输入框添加bindinput属性和bindtap属性，在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'
    })
  },

此时已可以发送红色文本的弹幕

 在js文件中追加getRandomColor函数，把sendDanmu函数中的color赋值为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('')
}

三、程序运行结果

程序最终运行顺利，能成功播放不同的视频及发送随机颜色的弹幕 

四、问题总结与体会

• 问题及解决方法：时常会报错[渲染层网络层错误] Failed to load media，经过查询，每次编译前清除网络缓存能解决该问题。
• 收获和体会：本次实验我能更加熟练地运用bindtap、bindinput等属性，第一次学习到可以用wx:for属性来实现循环列表，掌握了视频列表的切换方法和视频的播放、暂停控制，学习了如何给视频发送随机颜色弹幕，收获颇丰。