ouc_移动软件开发_实验三

一、实验目标

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

二、实验步骤

1.准备阶段：

（1）为了方便后续实验，我们需要准备格式为MP4的视频链接，记录与记事本，以便后续使用，而我选择的是风都侦探前三集

（ps：视频链接只需要在网页打开想播放的视频，并且右击便可以复制链接，但是需要注意的是，有的视频软件商家会对自己的视频有加密，所以所提供的链接其实是不能在微信小程序开发是使用的，这里推荐一个网站：茶杯狐 Cupfox - 努力让找电影变得简单，里面有部分视频是可以直接复制链接使用的。

（2）准备播放图标的图片，以便后续使用，这里我选择并对其进行了一定程度的抠图的图标是

（3）搭建微信开发工具的编程环境，准备开始编程

2.首先对小程序的UI进行设计，下面是相关代码以及作用功能的注释

app.json源码

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "风都侦探",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "sitemapLocation": "sitemap.json"
}

index.wxml源码

<!--pages/index/index.wxml-->
<!-- <text>pages/index/index.wxml</text> -->
<!-- 第一个区域：视频播放器 -->
<video id='myVideo' controls src='{{src}}' 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="/image/play-button-icon-png-23.png" class="images"></image><!-- 播放图标 -->
    <text>{{item.title}}</text><!-- 选集时的点击的选集框 -->
  </view>
</view>

index.wxss源码

/* pages/index/index.wxss */
/* video样式 */
video{
  width: 100%;/*保证在每种机型上video都可以满足沿行满屏*/
}
/* 弹幕区域的UI设计 */
.danmuArea{
  display: flex;
  flex-direction: row;
}
/* input区域UI设计 */
input{
  border:1rpx solid #987938;
  height:100rpx;
  flex-grow: 1;/*扩展多余空间*/
}
/* 按钮区域设计 */
button{
  color: white;/*白色按钮边框使其更容易融入白色背景*/
  background-color: #987938;
}
.videoList{
  width: 100%;
  min-height: 400rpx;
}
​
/* 设置videoBar相关属性 */
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1rpx solid #987938;/*设置底边*/
  margin:10rpx;/*外边距*/
}
​
/* 播放图片属性设置 */
.images{
  width: 100rpx;
  height: 100rpx;
}
​
text{
  color: #987938;
  flex-grow: 1;/*扩展多余空间*/
  font-family: kaiti;
  font-weight: 800;
  font-size: 50rpx;
}

3.对编写的小程序进行功能实现

index.js源码

// pages/index/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,里面储存着不同的集数以及对应的url*/
  /*并且能够让index.wxml里的wx.for功能成功对齐进行遍历*/
    list:[
      {
        id:'1',
        title:'第一集',
       videoUrl:'https://v3-default.ixigua.com/89a4c517510baf4f86ebf228621ffdaa/62ff34b0/video/s/220v0d041g10000cbon7g3c77u0a72djoo011448b4000008b85a415704/?hdmoli&filename=360P.mp4'
      },
      {
        id:'2',
        title:'第二集',
        videoUrl:'https://v6-default.ixigua.com/caa62b61958979cba21300245731c67e/62ff3a33/video/tos/cn/tos-cn-v-0064/cb3803d33f9644e49388350eaba4b818/?hdmoli&filename=1080P.mp4'
      },
      {
        id:'3',
        title:'第三集',
        videoUrl:'https://v9-default.ixigua.com/8c6d7eb054d77aa429709fb8d2d49e5c/62ff3b8b/video/tos/cn/tos-cn-v-0064/df60828d09f64a6f89856d5fe4ec97ff/?hdmoli&filename=1080P.mp4'
      },
      {
        id:'4',
        title:'第四集（未更新）',
        // videoUrl:'https://player.youku.com/embed/XNTg0NTM4NDA4OA==?client_id=f7d81b29f4146ce2'
      }
    ],
    src:'',
    danmuTxt:''
  },
​
/*实现playVideo函数*/
playVideo:function(e){
  this.videoCtx.stop()
  // 停止播放之前正在播放的视频
  this.setData({
    src:e.currentTarget.dataset.url
  })
  // 更新视频地址
  this.videoCtx.play()
},
​
/*实现getDanmu函数*/
getDanmu:function(res){
  this.setData({
    danmuTxt:res.detail.value
  })
},
​
/*实现sendDanmu函数*/
sendDanmu:function(res){
  let text = this.data.danmuTxt
  this.videoCtx.sendDanmu({
    text:text,
    color:getRandomColor()
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.videoCtx = wx.createVideoContext('myVideo')/*监听页面加载，使得进入页面就能加载到id为‘myVideo’的部分*/
  },
​
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
​
  },
​
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
​
  },
​
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
​
  },
​
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
​
  },
​
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
​
  },
​
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
​
  },
​
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
​
  }
})

4.上传实验结果,进入测试阶段

三、程序运行结果

运行结果:

小程序成功运行,但是在调试框内会有警告出现

运行截图:

初始界面:

分别点击第一集,第二集,第三集后的界面(并且视频可以正常播放)

弹幕截图: