实验3：视频播放小程序

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

姓名：窦海彤 学号：20020007011

姓名学号	窦海彤，20020007011
课程	中国海洋大学22夏《移动软件开发》
实验名称	实验3：视频播放小程序
博客地址	https://www.cnblogs.com/dht21/
Github仓库地址	https://github.com/Domingo21/summer-term

一、实验目标

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

二、实验步骤

1. 页面配置

1.1 创建页面文件

​ 新建一个如图的项目，并且将app.json内pages属性中的“pages/logs/logs”删除

1.2 删除和修改文件

​ 1)删除utils文件夹及其所有内容

​ 2)删除pages文件夹下的log目录及其所有内容

​ 3)删除index.wxml和index.wxss和app.wxss中全部代码

​ 4)删除index.js中代码并输入page自动补齐，删除app.js中代码并输入app自动补齐

1.3 创建其他文件

​ 在该项目的根目录下新建一个images 文件夹用于存放视频播放图标素材

2. 视图设计

2.1 导航栏设计

​ 更换导航栏文字和颜色

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#87CEEB",  
    "navigationBarTitleText": "视频播放",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.2 页面设计

​ 主要分为三个区域，区域一：视频播放区域、区域二：弹幕发送区域、区域三、视频列表，具体代码如下：

index.wxml:

<!--区域一：视频播放器-->
<video id="myVideo"controls></video>
<!--区域二：弹幕发送区-->
<view class="danmuArea">
  <input type="text"placeholder="请输入弹幕内容"></input>
  <button>发送弹幕</button>
</view>
<!--区域三：视频列表栏-->
<view calss = "videolist">
  <view class = "videoBar">
    <image src="/images/play.png"></image>
    <text>测试标题</text>
  </view>
</view>

index.wxss:

<!--区域一：视频播放器-->
<video id="myVideo"controls></video>
<!--区域二：弹幕发送区-->
<view class="danmuArea">
  <input type="text"placeholder="请输入弹幕内容"></input>
  <button>发送弹幕</button>
</view>
<!--区域三：视频列表栏-->
<view calss = "videolist">
  <view class = "videoBar">
    <image src="/images/play.png"></image>
    <text>测试标题</text>
  </view>
</view>

效果如图：

3.逻辑实现

3.1 更新播放列表

​ index.html

<!--区域一：视频播放器-->
<video id="myVideo"controls src="{{src}}"></video>
<!--区域二：弹幕发送区-->
<view class="danmuArea">
  <input type="text"placeholder="请输入弹幕内容"></input>
  <button>发送弹幕</button>
</view>
<!--区z域三：视频列表栏-->
<view calss = "videolist">
  <view class = "videoBar" wx:for="{{list}}" wx:key="video{{index}}">
    <image src="/images/play.png"></image>
    <text>{{item.title}}</text>
  </view>
</view>

​ index.js

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'
    }
  ]
  }
})

效果如图：

3.2 点击播放视频

​ 对组件添加data-url属性和bindtap属性(data-url用于记录视频的播放地址，bindtap用于触发点击事件)

​ index.wxml:

<!--区域三：视频列表栏-->
<view calss = "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>

​ index.js:

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'
    }
  ]
  },
onLoad() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },

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

效果如图：

3.3 发送弹幕

​ 对组件添加属性使得其可发送弹幕，并在屏幕显示

index.wxml:

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

index.js:

Page({
  data: {
    danmuTxt:'',
	list: [...]
  },
  getDanmu:function(e){
  	this.setData({
  		danmuTxt:e.detail.value
    })
  },

  sendDanmu:function(e){
    let text=this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:'red'
    })
  }
})

效果如图：

3.4 添加随机彩色弹幕

​ 修改index.js文件,使发送弹幕的颜色为函数getcolor的返回值

index.js:

function getRandomColor(){
  var letter = "0123456789ABCDEF";
  var color = [];
  var c = "#";
  for (var i = 0; i < 6; i++) {
    c = c + letter[Math.floor(Math.random() * 16)]
  }
  color.push(c);
  return color;
}

Page({
  sendDanmu:function(e){
    let text=this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:getRandomColor()
    })
  }
})

三、运行截图

四、问题总结与体会

问题

将弹幕改为随机颜色弹幕时，无返回值，导致无法发出弹幕，检查后发现是返回值有误，将其改成如下即可获取随机颜色弹幕并发送

function getRandomColor(){
  var letter = "0123456789ABCDEF";
  var color = [];
  var c = "#";
  for (var i = 0; i < 6; i++) {
    c = c + letter[Math.floor(Math.random() * 16)]
  }
  color.push(c);
  return color;
}

体会

通过本次实验，我掌握了视频列表的切换方法、掌握了视频自动播放的方法、掌握了视频随机颜色弹幕效果，并且明白了随机颜色的原理，更加熟悉了html、css和JavaScript语言，和制作微信小程序。