ouc2022 移动软件开发 实验三：视频播放小程序

一、实验目标

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

二、实验步骤

1、项目创建与页面配置

具体操作与前两个实验相同，不在赘述。

加入images文件夹，用来存放播放图标（https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip）：

2、小程序设计

2.1 app.json

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

2.2 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='video{{index}}' data-url="{{item.videoUrl}}" bindtap="playVideo">
        <image src="/images/play.png"></image>
        <text>{{item.title}}</text>
    </view>
</view>

小程序页面共分为三个板块，自上而下分别为播放器、弹幕发送器、剧集列表。

2.3 index.wxss

video {
    width: 100%;
}
​
.danmuArea {
    display: flex;
    flex-direction: row;
}
​
input {
    border: 1rpx solid #987938;
    flex-grow: 1;
    height: 100rpx;
}
​
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;
}

2.4 index.js

Page({
    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: this.getRandomColor()
        })
    },
​
    playVideo: function (e) {
        this.videoCtx.stop()
        this.setData({
            src: e.currentTarget.dataset.url
        })
        this.videoCtx.play()
    },
​
    onLoad: function (options) {
        this.videoCtx = wx.createVideoContext('myVideo')
    },
​
    getRandomColor: function () {
        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('')
    }
})

整体实现了发送彩色弹幕的功能。

三、程序运行结果

程序编译运行，结果如下：

四、问题总结与体会

1、问题总结：

这次试验没有多大问题，源代码在实验文档中都有给出，而且不难理解。有人说 getRandomColor 这个函数按照文档编写后不能正常调用，我的处理方法是定义后通过 this.getRandomColor() 来调用

getRandomColor: function () {
        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('')
    }
    
color: this.getRandomColor()

2、体会

本次实验让我们体会了制作一个播放视频的小程序，难度不大，主要是让我们体会各个组件之间的联系，还是挺有意思的，期待下一个实验🌹🌹🌹