2024年夏季《移动软件开发》实验报告------实验4：视频播放小程序

2024年夏季《移动软件开发》实验报告------实验4：视频播放小程序

实验说明

1.实验中需要使用四个视频的地址，代码如下：

list: [{
 id: '1001',
 title: '杨国宜先生口述校史实录',
 videoUrl: 
'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C5
95_025F0082_ABD7AE2.mp4?e=.mp4'
 },
 {
 id: '1002',
 title: '唐成伦先生口述校史实录',
 videoUrl: 
'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F
97_425ABEDD_7167F22.mp4?e=.mp4'
 },
 {
 id: '1003',
 title: '倪光明先生口述校史实录',
 videoUrl: 
'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE
67_AAD8D222_925F3FF.mp4?e=.mp4'
 },
 {
 id: '1004',
 title: '吴仪兴先生口述校史实录',
 videoUrl: 
'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B5220
05_A29CB142_6525BCF.mp4?e=.mp4'
 }
 ]

2.播放器图片下载地址：

https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip

3.本实验参考文档：

lab4.pdf (gitee.com)

一、实验目标

1、掌握视频API的操作方法；

2、掌握如何发送随机颜色的弹幕。

二、实验步骤

1.首先创建项目，创建相应的页面文件，新建index images文件夹及app.js app.json app.wxss文件

2.在app.json 中添加背景颜色等信息，修改界面样式

app.json文件代码如下：

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

效果如下：

3.在index.wxss 文件中添加小程序信息，包括视频播放窗口、发送弹幕区域、发送弹幕按钮、视频信息、暂停键等，并添加恰当的wxss样式，调整页面布局大小等

注：暂停键图片在‘’说明‘’里

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="id" data-url='{{item.videoUrl}}' bindtap='playVideo'>
    <image src="/images/play.png"></image>
    <text>{{item.title}}</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;
  border-style: ridge;
}
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
text{
  font-size: 45rpx;
  color: #987938;
  margin: 20rpx;
  flex-grow: 1;
}

效果如下：

4.在index.js文件中添加List数组，添加视频信息；并添加控制视频播放的函数

index.js文件代码如下：

// 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:[
      {
        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:''
  },



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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.videoCtx=wx.createVideoContext('myVideo')
  },

效果如下：

5.在index.js文件中添加getDanmu````sendDanmu函数，使之更新弹幕内容、发送弹幕

添加的index.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() 
    })
  },

三、程序运行结果

四、问题总结与体会

这次实验我学会了视频API的操作方法，还学会了如何发送随机颜色的弹幕。这次实验不仅让我在技术操作层面有了显著提升，还加深了我对视频内容管理、实时互动功能设计以及微信小程序开发的全面理解，为未来在相关领域的工作或项目提供了坚实的基础。