实验15 视频控件实验

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

  1. 实验目的
  1. 以vp软件的视频控件为主其他相关控件配合使用,制作一个视频播放器工程,实现功能
  2. 视频切换
  3. 暂停/开始播放
  4. 全屏/窗口播放
  5. 播放进度可视化及控制
  6. 视频音量可视化及调节
  1. 实验准备
  1. 软件

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

视频转换软件(本实验以videoconverter为例,相关软件均可在官网打包下载)

  1. 素材

图片素材(视频播放器中按键功能的背景图片)

视频素材

  1. 硬件

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

SD卡和卡套或读卡器

USB数据线

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

  1. 控件介绍

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

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

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

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

进度条:展现视频播放进度

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

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

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

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

  1. 视频要求
  1. 视频格式要求

H.264编码,MP4格式

  1. 转换过程

打开视频转换软件videoconverter;

按以下步骤转换:

  1. 导入视频
  2. 打开选择格式
  3. 格式选择MPEG-4 AVC
  4. 打开参数面板
  5. 按图设置参数(分辨率可以手动输入)
  6. 设置存储路径
  7. 转换
  1. 创建工程

打开vp软件

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

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

点击确定创建工程

  1. 设置界面

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

  1. 视频控件
  2. 滚动文本(弹幕)
  3. 触摸热区
  4. 按钮(弹幕)
  5. 进度条(播放进度)
  6. 按钮(音量减)
  7. 滑块(音量条)
  8. 按钮(音量加)
  9. 按钮(下一条)
  10. 双态按钮(播放/暂停)
  11. 按钮(上一条)
  1. 功能和素材应用
  1. 添加素材

选择素材类型

点击添加

选择素材文件并确认(添加素材时按照素材库下方素材类型添加,同一类型可同时添加多条)

  1. 素材应用
  1. 界面效果
  1. 视频存放路径和功能脚本
  1. 视频路径
  1. flash存储(视频素材可直接在添加在素材库中,适合少量或者占存小的视频放置)

控件属性Srcloc选择flash

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

  1. SD卡存储(适合视频占存较大的素材)

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

在path属性中填英文路径路径例如bcd/abc.mp4(样例路径)即"文件夹/文件"格式

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

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

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

点击vp左上方文件选项

点击"创建一个SD卡目录"

创建一个bcd文件夹

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

  1. 功能脚本
  1. 上一条视频

功能:播放的上一条视频

控件:按钮控件

脚本:如右图

  1. 暂停/开始

功能:视频暂停/播放

控件:双态按钮

脚本:

按下事件:

video0.pSts=1;//视频开始播放

timer5.en=1;//定时器打开,进度条开始读取播放进度

弹起事件:

video0.pSts=2;//视频播放暂停

timer5.en=0;//定时器关闭,进度条归零

  1. 下一条视频

功能:播放下一条视频

控件:按钮

脚本:

  1. 播放进度

功能:表现播放进度

控件:进度条控件

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

  1. 播放进度前进后退

功能:展示播放进度

控件:滑块,定时器

脚本

播放进度前进:

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

播放进度后退:

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

  1. 音量加/减

功能:调高或者调低音量

控件:按钮

脚本:

调高音量:

video0.volume=video0.volume+10;//音量在原有基础上增加10

slider8.val=video0.volume;//滑块获取音量值

调低音量:

video0.volume=video0.volume-10;//音量在原有基础上减少10

slider8.val=video0.volume;//滑块获取音量值

  1. 音量条

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

控件:滑块

脚本:

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

  1. 弹幕

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

控件:滚动文本,按钮

使用方法:

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

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

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

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

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

脚本:

按钮

按下事件:

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

弹起事件:

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

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

  1. 触摸热区

功能:窗口播放和全屏播放

控件:触摸热区,变量

脚本:如图

  1. 编译调试和下载
  1. 编译

工程制作完之后点击编译

输出区域提示,则编译成功

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

  1. 调试

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

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

  1. 下载
  1. Usb直连下载:

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

点击下载

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

  1. 串口下载

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

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

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

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

  1. Tf卡下载:TF卡下载工程方便快捷

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

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

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

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

将TF卡插入串口屏卡槽

串口屏上电

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

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

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

  1. VP软件下载二进制文件

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

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

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

了解更多请至三易串口屏官方网站

相关推荐
sN2vuQ08W2 小时前
uni-app 实现视频聊天、屏幕分享,支持Android、HarmonyOS、iOS
android·uni-app·音视频
Tech-Net2 小时前
YT视频怎么下载?2026最新4K/8K超清YT视频下载与批量解析教程
经验分享·音视频·视频编解码·视频下载·视频下载工具·视频解析·视频下载器
OpenApi.cc15 小时前
2026年最新openapi:免费图片人脸识别和视频人脸识别工具
音视频
FlightYe19 小时前
HDR详解
linux·音视频·显示器·视频编解码·hdr
做萤石二次开发的哈哈19 小时前
ERTC-产品介绍-产品功能
音视频·实时音视频
searchforAI21 小时前
2026年音视频笔记工具横评:通义听悟、讯飞听见、Get笔记、Ai好记
人工智能·笔记·gpt·aigc·音视频·语音识别·知识图谱
jiayong2321 小时前
AI精准控制图片视频生成完全指南
人工智能·计算机视觉·音视频
云水一下21 小时前
HTML5 从入门到精通:有声有色——音频、视频与嵌入内容,让网页告别沉默
前端·音视频·html5
学如逆水,不进则退21 小时前
浏览器端视频转音频技术实现:Web Audio API 实战
前端·音视频