移动软件开发-制作视频播放器

一、实验目标

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

二、实验步骤

一.实验准备：

1.1：先下载相应的播放图片，图片下载地址如下：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip

1.2：创建项目，输入相应的appid和选择相应的文件夹和模板。

1.3：页面文件配置：

将app.json文件内的pages/logs/logs删除，并删除上一个逗号

删除和修改其他文件：

 

接下俩创建一个images文件夹，存储下载好的播放图片。

二.视图设计：

2.1：导航栏设计：

{
​
 "pages":[
​
  "pages/index/index"
​
 ],
​
 "window":{
​
  "backgroundTextStyle":"light",
​
  "navigationBarBackgroundColor": "#987938",
​
  "navigationBarTitleText": "口述校史",
​
  "navigationBarTextStyle":"black"
​
 },
​
 "style": "v2",
​
 "sitemapLocation": "sitemap.json"
​
}

页面的实现效果图：

 

2.2：页面的设计：

这里我们主要设计三个区域，第一个区域用来播放指定的视频，第二个区域用来发送我们输入的弹幕，第三个区域用来排列我们需要播放的视频选项。

区域一：我们用<video>组件来实现一个视频播放器，其中controls属性用于显示播放/暂停、音量等控制组件。

代码片段如下：

同时在wxss中修改相关的格式：

 

区域二：我们用<view>组件来实现一个单行区域，用于输入文本弹幕和发送按钮。

代码片段如下：

 

wxss中的样式如下：

 

区域三：用<view>组件实现多行区域，每一行包括一个播放图标和视频的标题。

这里我们可以先设计一行的内容，后面用wx:for添加全部内容。

代码如下：

<view class="videoList">
  <view class="videoBar">
    <image src="/images/play.png"></image>
    <text>这是一个标题</text>
  </view>
</view>

wxss中的样式如下：

/* 视频列表样式 */
.videoList{
  width:100%;
  min-height: 400rpx;
}
/* 单行列表区域样式 */
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  margin: 10rpx;
  border-bottom: 1rpx solid #983838;
  border-style:ridge;/*这里是后面为美观加上去的*/
}
/* 播放图标样式 */
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
/* 文本标题样式 */
text{
  font-size: 45rpx;
  color: #983838;
  margin: 20rpx;
  flex-grow: 1;
}

最后的效果图如下：

 

三.逻辑实现：

3.1：更新播放列表：

在区域三中我们用wx:for展示全部的播放列表，代码如下：

<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>

同时在js文件中追加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'
      }
    ]

效果图：

 

3.2播放视频：

在区域三的<view class='videoBar'>组件中添加data-url属性和bindtap属性，data-url用于记录每一个视频的播放地址，bindtap用于触发点击事件，然后在js文件中的onLoad函数中创建视频上下文，用于控制视频的播放和暂停。

代码如下：

<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>

js文件中的修改：

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.3：发送弹幕：

对<video>组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮，然后在区域二中的文本输入框中追加bindinput属性，用于获取弹幕，再为弹幕追加bindtap属性，用于触发点击事件。

代码如下：

 

对应的js文件修改如下：

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:'red'
​
  })
​
 },

如果想要得到随机的弹幕颜色，只需要在page页面之前追加一个函数，用来获取随机颜色的弹幕，它先将颜色转换成16进制，然后再根据颜色的长度是否等于1来判断是否获取该颜色。成功之后，再在发送弹幕的那个函数里面调用这个函数，获取相应的颜色。

获取随机颜色的弹幕函数如下：

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
    rgb.push(color)
  }
  return '#'+rgb.join('')
}

之前的弹幕效果图：

 

修改获取随机颜色的弹幕的效果图：

 

三、程序运行结果

四、问题总结与体会

1.该实验是教我们掌握视频列表的切换方法，然后对视频的播放和暂停的同时加上相应的弹幕，但是当我们发送出一个弹幕的时候，原来的弹幕还停留在输入框中，并不能随之消失。

2.通过这个实验我知道了有关视频播放小程序的相关组件的使用方法，同时为了美观化，我也在这个小程序中修改了一些样式，在<input>和<videoBar>组件中加入了

border-style: ridge;

让边框显得更饱满。