移动软件开发 实验3

移动软件开发 实验3

一、 实验目标

1.掌握视频列表的切换方法；

2.掌握视频自动播放方法；

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

二、实验步骤

1.创建项目

·创建页面文件

·删除和修改文件

·创建其他文件

2.视图设计

（1）导航栏设计

（2）页面设计

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

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

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

3.逻辑实现

（1）更新播放列表

（2）点击播放视频

（3）发送弹幕

4.代码展示

<!--index.wxml-->
<view class="container">
    <!-- 区域1：视频播放器 -->
    <video id='myVideo'src='{{src}}'controls enable-danmu danmu-btn></video>
    <!-- 区域2：弹幕控制 -->
    <view class='danmuArea'>
        <input type='text'placeholder='请输入弹幕内容'bindinput='getDanmu'></input>
        <button bindtap='sendDanmu'>发送弹幕</button>
    </view>
    <!-- 区域3：视频列表 -->
    <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>
</view>

/**index.wxss**/

.cintainer{
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-around;
}

/*区域1：视频组件样式*/
video{
    width:100%;
}
/*区域2：弹幕控制样式*/
/*2-1：弹幕区域样式*/
.danmuArea{
    display:flex;
    flex-direction:row;
    width: 100%
}

/*2-2：文本输入框样式*/
input{
    border:1rpx solid #987938;
    flex-grow:1;
    height:100rpx;
}

/*2-3：按钮样式*/
button{
    color:white;
    background-color:#987938;
}

/*区域3：视频列表样式*/
/*3-1：视频列表区域样式*/
.videoList{
    width:100%;
    min-height:400rpx;
}

/*3-2：单行列表区域样式*/
.videoBar{
    width:95%;
    display:flex;
    flex-direction:row;
    border-bottom:1rpx solid#987938;
    margin:10rpx;
}

/*3-3：播放图标样式*/
image{
    width:70rpx;
    height:70rpx;
    margin:20rpx;
}

/*3-4：文本标题样式*/
text{
    font-size:45rpx;
    color:#987938;
    margin:20rpx;
    flex-grow:1;
}

// 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: {
    danmuTxt:'',
    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: function (options) {  this.videoCtx=wx.createVideoContext('myVideo')
  },

     /**
   *播放视频
   */
  playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play();
  },

    /**
   * 更新弹幕内容
   */
  getDanmu:function(e){
    this.setData({
      danmuTxt:e.detail.value
    })
  },

    /**
   * 发送弹幕
   */
  sendDanmu:function(e){
    let text=this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:getRandomColor()
    })
  }, 
})

/**app.json**/
{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationBarBackgroundColor": "#987938",
        "navigationBarTitleText": "口述校史"
    },
    "sitemapLocation": "sitemap.json"
}

三、程序运行结果