移动软件开发实验三：小程序媒体API:口述校史

最新推荐文章于 2024-07-12 18:17:11 发布

·午后葡萄冰·

最新推荐文章于 2024-07-12 18:17:11 发布

阅读量366

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/m0_63773979/article/details/132539892

版权

2022年夏季《移动软件开发》实验报告

本实验属于哪门课程？	中国海洋大学23夏《移动软件开发》
实验名称？	实验3：小程序媒体API:口述校史
博客地址？	m0_63773979_-CSDN博客
Github仓库地址？	XXXXXXX

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

二、实验步骤

1.首先按照快速启动模板创建小程序的步骤得到一个小程序模板

2.创建页面文件并删除和修改其他文件

将app. json文件内 pages属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。按快捷键Ctrl+S保存当前修改。

删除 utils文件夹及其内部所有内容。删除 pages文件夹下的 logs目录及其内部所有内容。删除 index. wxml和 index. wxss中的全部代码。删除 index. js中的全部代码，并且输入关键词“page”找到第二个选项按回车键让其自动补全函数

删除 app. wxss中的全部代码。删除 app. js中的全部代码，并且输入关键词“app”找到第一个选项按回车键让其自动补全函数

3.视图设计

（1）导航栏设计

在app.json中自定义导航栏标题和背景颜色，文件代码如下

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "口述校史",
    "navigationBarTextStyle":"black"
  },

上述代码可以更改所有页面的导航栏标题为“口述校史”、背景颜色为金棕色

（2）页面设计：页面主要包括3个区域

1）区域1（视频组件）：这里需要使用<video>组件来实现视频播放器，其中controls属性用于显示播放、暂停、音量等控制组件

2）区域2（弹幕区域）设计：需要使用<view>组件实现一个单行区域，包括文本输入框(<input>组件）和发送按钮（<button>组件），还需定义class='danmuArea'

3）区域3（视频列表）设计：需要使用<view>组件实现一个可以扩展的多行区域，每行包括一个播放图标和一个视频标题文本，为方便，先设计第一行效果，后续使用wx:for属性循环添加全部的内容

index.wxml文件全部代码如下：

<!--区域1：视频播放器-->
<video id='Video' controls src="{{src}}"
<!--区域2：弹幕区域-->
<view class='danmuArea'>
<input type='text' placeholder=‘请输入弹幕内容’></input>
<button>发送弹幕</button>
</view>
<!--区域3：视频列表-->
<view class="videoList">
<view class="videoBar" >
<image src="/image/play.png"></image>
<text>这是一个测试标题</text>
</view>
</view>

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;
}
wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}"bindtap="playVideo"

效果图如下：

4.逻辑实现

（1）更新播放列表：在区域3对组件添加wx:for属性，采用循环展示列表，在js文件中的data属性中追加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'
      }
  ],

},

（2）点击播放视频：在区域3对其中的组件添加data-url属性和bindtap属性，分别用于记录每行视频对应的播放地址和触发点击事件

<!--区域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>

然后在JS文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止

onLoad: function (options) {
    this.videoCtx=wx.createVideoContext('myVideo')   
  },

接着添加自定义函数playVideo

playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play()
  },

（3）发送弹幕：在区域1中对<video>组件添加enable-danmu和danmu-btn属性，用来允许发送弹幕和显示“发送弹幕”按钮，区域2为文本框追加bindinput属性，用于获取弹幕文本内容；为按钮追加bindtap属性，用于触发点击事件。

<!--区域1：视频播放器-->
<video id='Video' controls src="{{src}}"
enable-danmu danmu-btn></video>
<!--区域2：弹幕区域-->
<view class='danmuArea'>
<input type='text' placeholder="请输入弹幕内容"
bindinput="getDanmu"></input>
<button bindtap="sendDanmu">发送弹幕</button>
</view>

对应的JS文件代码修改如下（随机生成一个十六进制的颜色的弹幕）：

getDanmu:function(e){
  this.setData({
    danmuTxt:e.detail.value
  })
},
sendDanmu:function(e){
  let text=this.data.danmuTxt;
  this.videoCtx.sendDanmu({
    text:text,
    color:getRandomColor()
  })
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('')
  
}