移动软件开发实验三

一、实验目标

1、掌握视频API的操作方法；2、掌握如何发送随机颜色的弹幕。

二、实验步骤

项目创建

创建一个空白的项目

页面配置

视图设计

1.导航栏设计

2.页面设计

定义页面背景容器，页面上主要包含3个区域.具体内容解释如下。

·区域1：组件，视频播放器，用于播放指定的视频; ·区域2：组件.并定义class=‘danmuArea’;区域2内部:和组件。弹幕发送区域，包含文本输人框和发送按钮;

·区域3：组件，并定义class='videoList’视频列表，垂直排列多个视频标题，点击不同的标题播放对应的视频内容。区域3内单元行: 组件.并定义class= ‘videoBar’，区域3单元行内:每行一个组件用于显示播放图标、一个 组件用于显示视频标题。

逻辑实现

1.更新播放列表

对<view class ='videoBar'>组件添加wx:for属性

在js文件的data属性中追加list数组，用于存放视频信息

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'
      }
    ]

2.点击播放视频

在js中添加自定义函数playVideo和onload

onLoad:function(options){

this.videoCtx=wx.createVideoContext('myVideo')

},

playVideo:function(e){

this.videoCtx.stop()

this.setData({

src:e.currentTarget.dataset.url

})

this.videoCtx.play()

},

3.发送弹幕

在js中添加自定义函数getDanmu和sendDanmu

getDanmu:function(e){

this.setData({

danmuTxt:e.detail.value

})

},

sendDanmu:function(e){

let text=this.data.danmuTxt;

this.videoCtx.sendDanmu({

text:text,

color:'red'

})

},

三、程序运行结果

四、问题总结与体会

我初步掌握了视频列表的切换方法，掌握了视频自动播放方法，又学习了button组件，然后学习了怎么发送弹幕，并通过写了随机生成颜色的函数实现了随机颜色弹幕效果。