实验3：视频播放小程序

m0_63153208

已于 2023-08-28 16:33:47 修改

阅读量62

点赞数

文章标签： css 前端 html

于 2023-08-28 16:33:17 首次发布

本文链接：https://blog.csdn.net/m0_63153208/article/details/132541930

版权

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


本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验3：视频播放小程序

一、实验目标

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

二、实验步骤

项目创建与页面配置

根据之前项目经验，新建小程序，删除相关数据，初始化相关文件即可完成项目初始化。

创建其他文件

项目根目录下新建images文件夹用于存放播放图标:

视图设计

导航栏设计

根据文档在app.json文件中更改导航栏的颜色与标题文字:

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

更改后的效果如下:

页面设计

视频组件设计

利用<video>组件实现视频播放器，首先在index.wxml中添加组件:

<video id="myVideo" controls></video>

在index.wxss中修改组件的样式，使其宽度为100%:

video {
  width: 100%;
}

修改后的效果如下:

弹幕区域设计

修改index.wxml页面代码，添加弹幕控制相关的组件，包括文本输入框和发送按钮:

<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" />
  <button>发送弹幕</button>
</view>

同样的，在index.wxss中修改组件的样式:

.danmuArea {
  display: flex;  /*flex模型布局*/
  flex-direction: row;
}
input {
  border: 1rpx solid #987938; /*设置边框线*/
  flex-grow: 1;   /*多余空间扩张*/
  height: 100rpx;
}
button {
  color: white;
  background-color: #987938;
}

修改后的效果如下:

视频列表设计

修改index.wxml添加视频列表:

<view class="videoList">
  <view class="videoBar" >
    <image src="/images/play.png"/>
    <text>测试标题</text>
  </view>
</view>

修改index.wxss更改组件样式:

.videoList {
  width: 100%;
  min-height: 100rpx;
}
.videoBar {
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #987938;
  margin: 10rpx;
}
image{
  width: 60rpx;
  height: 60rpx;
  margin: 20rpx;
}
text{
  font-size: 40rpx;
  color: #987938;
  margin: 20rpx;
  flex-grow: 1;
}

修改后的效果如下:

逻辑实现

更新播放列表

利用wx:for功能实现多个视频列表的展示：

<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" >
    <image src="/images/play.png"/>
    <text>{{item.title}}</text>
  </view>
</view>

同时在index.js 文件的data属性中添加list列表用于存放视频数据。

添加后的效果如下:

点击播放视频

在<view>组件中添加data-url属性用于在点击时传回点击的视频的URL地址，添加bindtap属性用于相应点击事件:

<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo" >
    <image src="/images/play.png"/>
    <text>{{item.title}}</text>
  </view>
</view>

在index.js中的监听页面加载函数中添加函数用于获取VideoContext实例:

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

添加自定义函数:

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

添加后的播放效果如下:

发送弹幕

为<vedio>组件添加enable-danmu 和 danmu-btn属性，同时为文本输入框添加bindinput属性

用于获取弹幕的文本内容，为按钮添加bindtap属性，用于触发点击事件:

<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>

<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu" />
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

修改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(), 
      });
  },

在文件中添加自定义函数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('')
}