创建一个视频播放微信小程序

创建一个视频播放微信小程序

引用

CSDN

1.

https://blog.csdn.net/m0_74031588/article/details/141594249

本文将详细介绍如何创建一个具备视频播放和弹幕功能的微信小程序。通过本教程，你将掌握视频API的操作方法以及如何实现随机颜色弹幕的发送功能。

实验目标

1. 掌握视频API的操作方法
2. 掌握如何发送随机颜色的弹幕

实验步骤

1. 创建项目

依次输入项目名称、选择目录、APPID等，注意选择不使用云服务。

2. 修改与删除文件（及恢复文件初始化）

删除logs文件夹、utils文件夹，清空index.js、index.json、index.wxss、app.wxss文件中的内容，删除app.json文件中page属性里的"pages/logs/logs"，以及上一行的逗号。

3. 编写文件

（1）编译导航栏

通过对window属性中内容进行修改，可以达到修改导航栏的作用。例如将原本白底黑字修改为棕底黑字，并修改文字内容。

（2）编译主页面

在index.wxml中编写代码

下面是对代码的逐行解释：

视频播放器

• <video>标签：用于嵌入视频播放器。
• id='myVideo'：为视频元素分配一个唯一标识符，可以在JavaScript中进行控制和访问。
• src="{{src}}"：视频源地址，这里使用了数据绑定的语法，{{src}}表示数据中的src属性将被插入到此处。
• controls：表示播放器将展示标准的播放控件（如播放、暂停按钮等）。
• enable-danmu="danmu-btn"：一个自定义属性，用于启用弹幕功能，可能与后面的JavaScript相关联。

弹幕控制

• <view class='danmuArea'>：定义一个容器，用于放置输入框和按钮。
• <input type='text' placeholder='请输入弹幕内容' bindinput='getDanmu'>：
• 输入框，用户可以在这里输入想要发送的弹幕内容。
• placeholder='请输入弹幕内容'：当输入框为空时，显示的提示文本。
• bindinput='getDanmu'：事件绑定，表示用户每次输入时会触发getDanmu方法，在方法中可能处理输入的内容。
• <button bindtap='sendDanmu'>发送弹幕</button>：
• 按钮用于发送弹幕。
• bindtap='sendDanmu'：当按钮被点击时，触发sendDanmu方法，可能负责将用户输入的弹幕显示到视频上。

视频列表

• <view class='videoList'>：这是一个用于展示视频列表的容器。
• <view class='videoBar' wx:for='{{list}}' wx:key='video{{index}}' data-url='{{item.videoUrl}}' bindtap='playVideo'>：
• 使用wx:for循环展示list数组中的每个视频项目。
• wx:key='video{{index}}'：为每个条目指定唯一的 key，以提升渲染性能。
• data-url='{{item.videoUrl}}'：将视频的 URL 存储在每个条目中，便于后续操作。
• bindtap='playVideo'：点击此条目时触发playVideo方法，应该用于开始播放相应的视频。
• <image src='/image/play.png'></image>：用于显示播放图标的图片。
• <text>{{item.title}}</text>：展示视频的标题，使用数据绑定显示对应item的title属性。

（3）对主页面元素进行合适的整理

在index.wxss中编写代码,具体内容不再解释。

（4）程序逻辑的实现

在index.js文件中修改。

以下是对不同函数的解释

页面初始化 onLoad: function (options)

• Page({...})：定义了这个页面的逻辑。
• data对象：包含danmuTxt， 存放弹幕的基本信息，初始为空对象；list，集合，存放所有视频的id、title、url。
• onLoad: function (options)：页面加载时会被调用，options参数包含页面传递的参数（如果有）。
• this.videoCtx = wx.createVideoContext('myVideo')：创建视频上下文，'myVideo'是在 HTML 中定义的视频元素的id。通过videoCtx对象可以控制视频播放等功能。

播放视频 playVideo: function(e)

• playVideo: function(e)：定义了playVideo方法，当点击视频列表项时被调用。
• this.videoCtx.stop()：停止当前播放的视频（如果有的话）。
• this.setData({ src: e.currentTarget.dataset.url })：
• 使用setData方法更新页面数据，设置src属性为用户点击的项中的视频 URL（根据data-url）。
• this.videoCtx.play()：开始播放新设置的视频。

获取弹幕输入 getDanmu: function(e)

• getDanmu: function(e)：定义了获取弹幕内容的函数，当用户在输入框中输入内容时被调用。
• this.setData({ danmuTxt: e.detail.value })：
• 更新页面数据，存储用户输入的弹幕文本，使用e.detail.value获取输入框的值。

发送弹幕 sendDanmu: function(e)

• sendDanmu: function(e)：定义了发送弹幕的函数，当用户点击发送按钮时被调用。
• let text = this.data.danmuTxt;：从页面数据中获取用户输入的弹幕文本。
• this.videoCtx.sendDanmu({...})：调用视频上下文的sendDanmu方法，将弹幕内容和随机颜色发送到视频上。
• color: getRandomColor()调用getRandomColor()函数生成一个随机颜色。

随机颜色生成函数 function getRandomColor()

• function getRandomColor()：定义了一个用于生成随机颜色的函数。
• let rgb = []：创建一个数组，用于存储 RGB 颜色值。
• for (let i = 0; i < 3; ++i)：循环三次生成 RGB 各个分量（红、绿、蓝）。
• let color = Math.floor(Math.random() * 256).toString(16)：随机生成 0 到 255 之间的整数，并将其转换为十六进制字符串。
• color = color.length == 1 ? '0' + color : color：如果生成的颜色值只有一位，前面补零以确保为两位。
• rgb.push(color)：将生成的颜色值放入数组中。
• return '#' + rgb.join('')：将数组中的 RGB 值连接起来并返回一个完整的 HEX 颜色代码（以#开头）。

程序运行结果

运行结果如下：可自选列表中任何视频播放，同时可发送随机颜色的弹幕。

问题总结与体会

通过本次实验，开发者可以深入了解微信小程序中视频播放功能的实现方式，同时掌握发送弹幕功能的编译技巧，包括随机颜色的设置等。