实验15 视频控件实验

三易串口屏s系列均支持视频功能，用户可在工程界面中制作播放器实现视频的播放与控制。（本片文档使用的素材，工程以及其他文件均包含在例程压缩包，用户可下载）

1. 实验目的

以vp软件的视频控件为主其他相关控件配合使用，制作一个视频播放器工程，实现功能

  • 视频切换

  • 暂停/开始播放

  • 全屏/窗口播放

  • 播放进度可视化及控制

  • 视频音量可视化及调节

2. 实验准备

2.1 软件

  • 三易串口屏专用开发软件VisualPiX

  • 视频转换软件（本实验以videoconverter为例，相关软件均可在官网打包下载）

2.2 素材

  • 图片素材（视频播放器中按键功能的背景图片）

  • 视频素材

2.3 硬件

  • 串口屏(本实验以SANY-WV-S43-01-C为例)

  • SD卡和卡套或读卡器

  • USB数据线

  • usb转串口小板4pin连接线。

3. 控件介绍

所用到相关控件（本例所用其他控件均有对应控件教程实例，可至官网下载中心查看，本例简单描述相关功能）

  • 按钮：通过按下或者弹起事件的脚本控制视频的部分功能（开始，切换等)

  • 双态按钮：通过按下和弹起事件的不同脚本实现视频的暂停与播放

  • 触摸热区：通过按下和弹起事件的脚本控制视频全屏或者窗口播放

  • 进度条：展现视频播放进度

  • 滑块：通过控制滑块游标位置控制和现实视频的音量和播放进度

  • 滚动文本：制作弹幕在视频上滚动

  • 定制器：设置定时事件自动执行脚本读取播放状态

  • 变量：设置变量标记播放状态，使触摸热区可以控制视频窗口或全屏播放

4. 视频要求

4.1 视频格式要求

  • H.264编码，MP4格式

4.2 转换过程

打开视频转换软件videoconverter；

按以下步骤转换：

a. 导入视频

b. 打开选择格式

c. 格式选择MPEG-4 AVC

d. 打开参数面板

e. 按图设置参数（分辨率可以手动输入）

f. 设置存储路径

g. 转换

5. 创建工程

  • 打开vp软件

  • 选择串口屏对应型号，产品主板或者外壳上标签贴附型号（本篇以SANY-WV-S43-01-C为例）

  • 设置好工程名称和存储路径

  • 点击确定创建工程

6. 设置界面

设计自己的播放界面，根据各功能位置合理摆放控件，控件在左侧工具栏左键拖曳至设计区域即可

1：视频控件

2：滚动文本（弹幕）

3：触摸热区

4：按钮（弹幕）

5：进度条（播放进度）

6：按钮（音量减）

7：滑块（音量条）

8：按钮（音量加）

9：按钮（下一条）

10：双态按钮（播放/暂停）

11：按钮（上一条）

7. 功能和素材应用

7.1 添加素材

  • 选择素材类型

  • 点击添加

  • 选择素材文件并确认（添加素材时按照素材库下方素材类型添加，同一类型可同时添加多条）

7.2 素材应用

7.3 界面效果

8. 视频存放路径和功能脚本

8.1 视频路径

8.1.1 flash存储（视频素材可直接在添加在素材库中，适合少量或者占存小的视频放置）

  • 控件属性Srcloc选择flash

  • 视频内容选择素材库中内容

8.1.2 SD卡存储(适合视频占存较大的素材）

  • 选中视频控件，右侧属性栏中找到srcLoc属性，在右边下拉选项中选择Sdcard

  • 在path属性中填英文路径路径例如bcd/abc.mp4（样例路径）即”文件夹/文件”格式

  • 将视频素材下载到SD卡中，bcd文件夹直接放置在SD卡根目录下，视频素材abc放在bcd文件夹中

  • 工程下载到串口屏之后，SD卡直接插在串口屏tf卡槽，视频控件就可直接调用SD卡中的视频素材

  • 如要在vp中模拟调试播放器，则模拟路径与文件名要与SD卡保持一致!

  1. 点击vp左上方文件选项

  2. 点击”创建一个SD卡目录”

  3. 创建一个bcd文件夹

  4. 将视频素材abc.mp4放于此目录下

8.2 功能脚本

8.2.1 上一条视频

  • 功能：播放的上一条视频

  • 控件：按钮控件

  • 脚本：如右图

8.2.2 暂停/开始

  • 功能：视频暂停/播放

  • 控件：双态按钮

  • 脚本：

按下事件：

video0.pSts=1;//视频开始播放
timer5.en=1;//定时器打开，进度条开始读取播放进度

弹起事件：

video0.pSts=2;//视频播放暂停
timer5.en=0;//定时器关闭，进度条归零

8.2.3 下一条视频

  • 功能：播放下一条视频

  • 控件：按钮

  • 脚本：

8.2.4 播放进度

  • 功能：表现播放进度

  • 控件：进度条控件

  • 脚本：进度条本身没有脚本，利用其它控件下脚本读取播放进度，赋值给进度条

8.2.5 播放进度前进后退

  • 功能：展示播放进度

  • 控件：滑块，定时器

  • 脚本

播放进度前进：

video0.progress=video0.progress+5;//视频播放进度前进5%

播放进度后退：

video0.progress=video0.progress-5;//视频播放进度后退5%

8.2.6 音量加/减

  • 功能：调高或者调低音量

  • 控件：按钮

  • 脚本：

调高音量：

video0.volume=video0.volume+10;//音量在原有基础上增加10
slider8.val=video0.volume;//滑块获取音量值

调低音量：

video0.volume=video0.volume-10;//音量在原有基础上减少10
slider8.val=video0.volume;//滑块获取音量值

8.2.7 音量条

  • 功能：通过游标位置控制音量

  • 控件：滑块

  • 脚本：

video0.volume=slider8.val;//设置视频音量为滑块值

8.2.8 弹幕

  • 功能：在视频显示或隐藏弹幕

  • 控件：滚动文本，按钮

  • 使用方法：

  1. 将滚动文本控件与视频控件重叠

  2. 选中视频或者滚动文本控件

  3. 点上方按键可调整控件层级顺序

  4. 层级高的控件在重叠时优先显示

  5. 设置滚动条背景颜色为透明

  • 脚本：

    按钮

按下事件：

scrollText17.scrSts=1;//滚动文本开始滚动

弹起事件：

scrollText17.scrSts=0;//滚动文本停止滚动，回到初始位置

滚动文本无须脚本，只需在滚动文本属性中设置文本内容即可

8.2.9 触摸热区

  • 功能：窗口播放和全屏播放

  • 控件：触摸热区，变量

  • 脚本：如图

9. 编译调试和下载

9.1 编译

  • 工程制作完之后点击编译

  • 输出区域提示，则编译成功

  • 若出现红色编译不成功信息，按错误提示给出的路径和错误修改工程即可。

9.2 调试

  • 编译之后点击编译旁边调试，进入调试画面，鼠标模拟触摸测试播放器功能效果。

  • usb或者串口连接串口屏，如下图样式勾选可以实现在vp串口屏同步显示。

9.3 下载

9.3.1 Usb直连下载：

  • usb连电脑与串口屏，vp下方显示串口已连接字样即表示连接成功

  • 点击下载

  • 使用USB下载速度可达200kbtes/s，方便快捷推荐使用。

9.3.2 串口下载

  • 连线：电脑-usb-usb转串口工具-4pin连接线-串口屏

  • 连接成功后vp下方显示已连接字样

  • 点击下载选择对应波特率，默认是115200bps，确认下载即可。

  • 串口下载速度较慢，不推荐使用。

9.3.3 Tf卡下载：TF卡下载工程方便快捷

  • 设置好工程之后点击上方菜单栏设置选项，在生成二进制文件选框里打√，

  • 保存之后编译项目，在pix源文件路径之下就生成了.pix.bin文件

  • 将bin文件改名成指定名称”USER.bin”

  • 在TF卡根目录下新建文件下夹”HMI”,将刚才生成并改好名称的”USER.bin”文件放在”HMI”文件夹中

  • 将TF卡插入串口屏卡槽

  • 串口屏上电

  • 串口屏显示加载中的绿色画面

  • 加载完成取下TF卡，串口屏断电

  • 串口屏上电显示工程画面，下载完成。

9.3.4 VP软件下载二进制文件

  • 按上述方法生成bin文件之后无须改名

  • 在工具栏中选择下载二进制文件

  • 点击选定刚才生成的bin文件点击下载

了解更多请至三易串口屏官方网站www.sany-semi.com