移动软件开发实验三

实验三：视频播放小程序

一、实验目标

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

二、实验步骤

1、学习视频中内容。

2、创建项目名为videoDemo的项目，填写AppId，点击确认。

3、下载老师提供的播放图标，创建images文件夹，将图标复制到文件夹中去。

4、按照视频中的步骤对代码进行修改，以下为修改后的代码：

// 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: {
  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’
  }
  ],
  src:‘’,
  danmuTxt:‘’
  },
  getDanmu:function(e){
  this.setData({
  danmuTxt:e.detail.value
  })
  },
  sendDanmu:function(e){
  let text=this.data.danmuTxt
  this.videoCtx.sendDanmu({
  text:text,
  color:getRandomColor()
  })
  },
  playVideo:function(e){
  this.videoCtx.stop()
  this.setData({
  src:e.currentTarget.dataset.url
  })
  this.videoCtx.play()
  },

/**

• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  this.videoCtx=wx.createVideoContext(‘myVideo’)
  },
  })

//index.wxss

video{

width:100%;

}

.danmuArea{

display: flex;

flex-direction: row;

}

input{

border: 1rpx solid #987938;

height:100rpx;

flex-grow: 1;

}

button{

color:white;

background-color: #987938;

}

.videoList{

width:100%;

min-height:400rpx;

}

.videoBar{

width:95%;

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;

}

//app.json
{

“pages”: [

“pages/index/index”

],

“window”: {

“navigationBarBackgroundColor”: “#987938”,

“navigationBarTextStyle”: “black”,

“navigationBarTitleText”: “校史”,

“backgroundColor”: “#eeeeee”,

“backgroundTextStyle”: “light”,

“enablePullDownRefresh”: false

},

“sitemapLocation”: “sitemap.json”

}

三、程序运行结果

在手机上预览的结果：

四、问题总结与体会

实验过程中一直跟着老师提供的视频和文档进行实验，整个实验过程较为顺畅。通过这次实验，我掌握了通过代码控制视频列表切换和视频自动播放的方法，学会了设置视频随机颜色弹幕。通过这个实验我也明白一个小程序的诞生绝不是一件容易的事，需要考虑很多问题，我也应该多多钻研。