移动软件开发实验3

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.创建小程序

 

 

2.创建images文件夹，将要用到的图片放入其中。

 

 

3.关键代码

index.wxml

<!--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>
<!--视频列表-->
<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

/**index.wxss**/
/**1.视频组件样式**/
video{
  width:100%;
}
/**2.弹幕控制样式**/
/**2-1弹幕区域样式**/
.danmuArea{
  display:flex;
  flex-direction: row;
}
/**2-2文本输入框样式**/
input{
  border: 1rpx solid #984e38;
  flex-grow: 1;
  height: 100rpx;
}
/**2-3按钮样式**/
button{
  color: white;
  background-color: #984e38;
}
/**3.视频列表样式**/
/**3-1视频列表区域样式**/
.videoList{
  width: 100%;
  min-height: 400rpx;
}
/**3-2单行列表区域样式**/
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom:1rpx solid #984e38;
  margin: 10rpx;
}
/**3-3播放图标样式**/
image{
  width: 70rpx;
  height: 70rpx;
  margin: 10rpx;
}
/**3-4文本标题样式**/
text{
  font-size: 45rpx;
  color: #984e38;
  margin: 20rpx;
  flex-grow: 1;
}

​
index.js

​​​​​​​// index.js
//获得随机颜色
function getRandomColor(){
  let rgb=[]
  for(let i=0;i<3;++i){
    let color=Math.floor(Math.random()*256).toString(16)//用16进制来表示颜色
    color=color.length==1?'0'+color:color//用0来补差
    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'
    }
  ]
  },
  /**
   * 
   * 更新弹幕内容
   */
  getDanmu:function(e){
    this.setData({
      danmuTxt:e.detail.value
    })
  },
  /**
   * 
   * 发送弹幕 
   */
  sendDanmu:function(e){
    let text=this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:getRandomColor()//实现彩色弹幕
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx=wx.createVideoContext('myVideo')
  },
   /**
   * 
   * 播放视频
   */
  playVideo:function(e){
    this.videoCtx.stop()//播放停止
    this.setData({
      src:e.currentTarget.dataset.url
    })//更新视频地址
    this.videoCtx.play()//播放新视频
}
})
​

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#984e38",//可以自己选颜色
    "navigationBarTitleText": "口述校史",
    "navigationBarTextStyle": "white"
  }
}

4.写完代码后的页面

 

三、程序运行结果

列出程序的最终运行结果及截图。

1.初始页面

 

 

2.点击视频播放

 

 

3.在弹幕框里输入弹幕内容

 

 

4.彩色弹幕的呈现

 

 

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

总结：

1.偶尔会有拼写错误导致报错，可以根据错误提示来找到错误的地方

例如本次实验中，无法播放视频，根据错误提示，找到index.js中74行，发现是dataset未拼写完整。

 

 

2.会产生一定的警告和渲染层错误，不知道为什么，但是不会影响结果

 

体会：

本次实验中，学习了在小程序播放视频，以及发送弹幕。用到了很多组件，以及许多函数，对于小程序的页面布局也有了一定的了解与熟悉，希望能够多学习巩固，下次用到时会更加熟练一点。