微信小程序开发——视频播放与发送弹幕

Sslyda

于 2024-08-27 10:19:41 发布

阅读量290

点赞数 5

文章标签：微信小程序音视频小程序

本文链接：https://blog.csdn.net/Sslyda/article/details/141595964

版权

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

姓名：林舒坦学号：22020007056 课程名称：中国海洋大学24夏《移动软件开发》实验4：视频播放小程序

一、实验目标

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

二、实验步骤

1.预先准备

本次实验所要使用的四个视频的地址，代码如下：

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.创建微信小程序项目

使用微信开发者工具创建一个新项目，并进行如下操作：

(1)删除utils文件夹及其内部所有内容。
(2)删除 pages文件夹下的 logs目录及其内部所有内容。
(3)删除index. wxml和 index. wxss中的全部代码。
(4)删除 index. js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数。
(5)删除app. wxss中的全部代码。
(6)删除 app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数。
(7)添加一个新文件夹，命名为images，在其中添加播放器图标

在这里插入图片描述

3.视图设计

(1)导航栏设计在app.json中添加代码如下:

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#987939",
    "navigationBarTitleText": "口述校史"
  }
}

在这里插入图片描述

(2)WXML处的代码如下

<!--1:视频播放器-->
<video id='myVideo' controls></video>
<!--2:弹幕控制-->
<view class='danmuArea'>
    <input type='text'placeholder='请输入弹幕内容'></input>
    <button>发送弹幕</button>
</view>
<!--3:视频列表-->
<view class='videoList'>
    <view class='videoBar'>
        <image src='/images/play.png'></image>
        <text>这是一个测试标题</text>
    </view>
</view>

(3)WXSS代码如下：

/**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;
}

在这里插入图片描述

4.逻辑实现

(1)更新播放列表
WXML代码片段修改如下：

<!--1:视频播放器-->
<video id='myVideo' src='{{src}}' controls enable-danmu danmu-btn></video>
<!--2:弹幕控制-->
        ·······
<!--3:视频列表-->
<view class='videoList'>
    <view class='videoBar'wx:for='{{list}}'wx:key='video{{index}}'>
        <image src='/images/play.png'></image>
        <text>{{item.title}}</text>
    </view>
</view>

js文件中追加初始化列表信息即之前预先准备中的list

Page({
    /*页面初始化*/
    data:{
        danmuTxt:'',
        list:···
        ······
    }
}）

效果如图
在这里插入图片描述

(2)点击播放视频
将WXML处代码修改如下：

<!--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文件中添加代码如下：

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

在这里插入图片描述

(3)发送弹幕
将WXML处代码修改如下：

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

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:getRandomColor()
            })
    },
    }
})

此时可以发出红色的弹幕
在这里插入图片描述

5.修改弹幕颜色

如果想要能够发出随机颜色的弹幕，则只需要在js中追加自定义的函数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('')
}
//再将之前的sendDanmu函数中的color修改为   
    color:getRandomColor()

一定要注意，getRandomColor函数是写在page外面的，不要添加到page里面

三、程序运行结果

在这里插入图片描述

四、问题总结与体会

在本次实验中按照实验方案进行微信小程序视频播放器和弹幕的制作，在实验过程中遇见的主要问题在于编写随机弹幕颜色函数的时候将其写在了page里面，导致一直无法产生预期效果。后来发现并及时修改后成功运行.
通过本次实验掌握视频列表的切换方法、视频自动播放方法、掌握视频随机颜色弹幕效果，收获颇丰。

Sslyda

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发——视频播放与发送弹幕

在本次实验中按照实验方案进行微信小程序视频播放器和弹幕的制作，在实验过程中遇见的主要问题在于编写随机弹幕颜色函数的时候将其写在了page里面，导致一直无法产生预期效果。后来发现并及时修改后成功运行.通过本次实验掌握视频列表的切换方法、视频自动播放方法、掌握视频随机颜色弹幕效果，收获颇丰。
复制链接

扫一扫