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

帅气小王八

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

阅读量1k

点赞数 22

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

本文链接：https://blog.csdn.net/m0_74031588/article/details/141594249

版权

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中编写代码

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

视频播放器

弹幕控制

<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 颜色代码（以 # 开头）。