源码附件及视频在最后
1.三个控件（两个视频播放器，一个透明功能键）
2.分别设置控件属性
2.1 第1路【视频播放器】的属性
2.2 第2路【视频播放器】的属性
2.3 透明【功能键】属性
把边框设为0，透明度设为0，标题为空
3. 代码
主要是onLoad和功能键的点击事件代码
#include "Frm01.h"Frm01::Frm01(HmiApp* app, STTWidget *par, const string& id, const string& desc) : STTPage(app->getRuntime(), par, id, desc) {hmiApp = app;}Frm01::~Frm01() {}void Frm01::onInit(){}void Frm01::createParts() {setMainArg(0, 0, 1024, 600);setMainStyle(0, 0xffffff, 0xffffff, 0, 255, 0, 0xc0c0c0);/*----------------------------- Video : wMVideo1 -----------------------------*/wMVideo1 = new STTFFmpeg(p_rt, this, "wMVideo1");wMVideo1->channel = 0;wMVideo1->setRotate(0);wMVideo1->setMainArg(50, 75, 412, 500, "rtsp://192.168.1.101:8554/stream1");wMVideo1->setAutoRestart(true);wMVideo1->setVolume(50);/*----------------------------- Video : wMVideo2 -----------------------------*/wMVideo2 = new STTFFmpeg(p_rt, this, "wMVideo2");wMVideo2->channel = 1;wMVideo2->setRotate(0);wMVideo2->setMainArg(562, 75, 412, 500, "rtsp://192.168.1.101:8554/stream2");wMVideo2->setAutoRestart(true);wMVideo2->setVolume(50);/*----------------------------- Button : wMButton1 -----------------------------*/wMButton1 = new STTButton(p_rt, this, "wMButton1", 0);wMButton1->setMainArg(563, 10, 99, 47, false);wMButton1->setPressedArg("切换播放", 0x0, "文泉驿微米黑", 16, 0);wMButton1->setPressedStyle(8, 255, 0xebebeb, 0x999999, 1, 1, 0x999999, 1, 0xebebeb);wMButton1->setReleasedArg("切换播放", 0x0, "文泉驿微米黑", 16, 0);wMButton1->setReleasedStyle(5, 255, 0xebebeb, 0x999999, 1, 1, 0x999999, 1, 0xebebeb);wMButton1->onEventHandler(Event::CLICKED, this, (EHandler) &Frm01::wMButton1_clk_cb);/*----------------------------- Button : wMButton3 -----------------------------*/wMButton3 = new STTButton(p_rt, this, "wMButton3", 0);wMButton3->setMainArg(363, 10, 98, 48, false);wMButton3->setPressedArg("双路播放", 0x0, "文泉驿微米黑", 16, 0);wMButton3->setPressedStyle(8, 255, 0xebebeb, 0x999999, 1, 1, 0x999999, 1, 0xebebeb);wMButton3->setReleasedArg("双路播放", 0x0, "文泉驿微米黑", 16, 0);wMButton3->setReleasedStyle(5, 255, 0xebebeb, 0x999999, 1, 1, 0x999999, 1, 0xebebeb);wMButton3->onEventHandler(Event::CLICKED, this, (EHandler) &Frm01::wMButton3_clk_cb);/*----------------------------- Button : wMButton4 -----------------------------*/wMButton4 = new STTButton(p_rt, this, "wMButton4", 0);wMButton4->setMainArg(207, 11, 98, 48, false);wMButton4->setPressedArg("播放左路", 0x0, "文泉驿微米黑", 16, 0);wMButton4->setPressedStyle(8, 255, 0xebebeb, 0x999999, 1, 1, 0x999999, 1, 0xebebeb);wMButton4->setReleasedArg("播放左路", 0x0, "文泉驿微米黑", 16, 0);wMButton4->setReleasedStyle(5, 255, 0xebebeb, 0x999999, 1, 1, 0x999999, 1, 0xebebeb);wMButton4->onEventHandler(Event::CLICKED, this, (EHandler) &Frm01::wMButton4_clk_cb);/*----------------------------- Button : wMButton5 -----------------------------*/wMButton5 = new STTButton(p_rt, this, "wMButton5", 0);wMButton5->setMainArg(719, 11, 98, 48, false);wMButton5->setPressedArg("播放右路", 0x0, "文泉驿微米黑", 16, 0);wMButton5->setPressedStyle(8, 255, 0xebebeb, 0x999999, 1, 1, 0x999999, 1, 0xebebeb);wMButton5->setReleasedArg("播放右路", 0x0, "文泉驿微米黑", 16, 0);wMButton5->setReleasedStyle(5, 255, 0xebebeb, 0x999999, 1, 1, 0x999999, 1, 0xebebeb);wMButton5->onEventHandler(Event::CLICKED, this, (EHandler) &Frm01::wMButton5_clk_cb);/*called after widget created.*/return; //createParts END}void Frm01::onLoad(){ENCODER::showCursor(false);wMVideo1->setVolume(5);//声音设小一点wMVideo1->play(200);//不要自动启动，在onLoad里延时启动wMVideo2->play(1000);//不要自动启动，在onLoad里延时启动}bool Frm01::onClosing(){return true;}void Frm01::onDispose(){}//控制状态static int iVideo = 0;void Frm01::wMButton1_clk_cb(uint16_t code, LvEvent e) {/*wMButton1（）的点击事件*/if(iVideo == 0) {//显示第1路视频：两个控件的地址都设为第1路视频地址wMVideo1->setMainArg(50, 75, 924, 500, "rtsp://192.168.1.101:8554/stream1");wMVideo2->setMainArg(50, 75, 924, 500, "rtsp://192.168.1.101:8554/stream1");wMVideo1->play(200);//重新play一下，会刷新播放窗口大小wMVideo2->play(1000);//重新play一下，会刷新播放窗口大小} else if(iVideo == 1) {//显示第2路视频：两个控件的地址都设为第2路视频地址wMVideo1->setMainArg(50, 75, 924, 500, "rtsp://192.168.1.101:8554/stream2");wMVideo2->setMainArg(50, 75, 924, 500, "rtsp://192.168.1.101:8554/stream2");wMVideo1->play(200);//重新play一下，会刷新播放窗口大小wMVideo2->play(1000);//重新play一下，会刷新播放窗口大小} else if(iVideo == 2) {//同时显示2路视频：两个控件的地址都设为第2路视频地址wMVideo1->setMainArg(50, 75, 412, 500, "rtsp://192.168.1.101:8554/stream1");wMVideo2->setMainArg(562, 75, 412, 500, "rtsp://192.168.1.101:8554/stream2");wMVideo1->play(200);//重新play一下，会刷新播放窗口大小wMVideo2->play(1000);//重新play一下，会刷新播放窗口大小}iVideo++;iVideo %= 3;}void Frm01::wMButton4_clk_cb(uint16_t code, LvEvent e) {/*wMButton4（播放左路）的点击事件*///显示第1路视频：两个控件的地址都设为第1路视频地址wMVideo1->setMainArg(50, 75, 924, 500, "rtsp://192.168.1.101:8554/stream1");wMVideo2->setMainArg(50, 75, 924, 500, "rtsp://192.168.1.101:8554/stream1");wMVideo1->play(200);//重新play一下，会刷新播放窗口大小wMVideo2->play(1000);//重新play一下，会刷新播放窗口大小iVideo = 1;}void Frm01::wMButton3_clk_cb(uint16_t code, LvEvent e) {/*wMButton3（双路播放）的点击事件*///同时显示2路视频：两个控件的地址都设为第2路视频地址wMVideo1->setMainArg(50, 75, 412, 500, "rtsp://192.168.1.101:8554/stream1");wMVideo2->setMainArg(562, 75, 412, 500, "rtsp://192.168.1.101:8554/stream2");wMVideo1->play(200);//重新play一下，会刷新播放窗口大小wMVideo2->play(1000);//重新play一下，会刷新播放窗口大小iVideo = 0;}void Frm01::wMButton5_clk_cb(uint16_t code, LvEvent e) {/*wMButton5（播放右路）的点击事件*///显示第2路视频：两个控件的地址都设为第2路视频地址wMVideo1->setMainArg(50, 75, 924, 500, "rtsp://192.168.1.101:8554/stream2");wMVideo2->setMainArg(50, 75, 924, 500, "rtsp://192.168.1.101:8554/stream2");wMVideo1->play(200);//重新play一下，会刷新播放窗口大小wMVideo2->play(1000);//重新play一下，会刷新播放窗口大小iVideo = 2;}
;}.cls-2{fill:%230868f7;}.cls-3{fill:url(%23未命名的渐变_44);}.cls-4{fill:%23333;}%3c/style%3e%3clinearGradient%20id='未命名的渐变_8'%20x1='33.73'%20y1='100.61'%20x2='-0.03'%20y2='-1.06'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%237ae9fb'/%3e%3cstop%20offset='0.67'%20stop-color='%232b90f8'/%3e%3cstop%20offset='1'%20stop-color='%230868f7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='未命名的渐变_44'%20x1='27.86'%20y1='18.67'%20x2='68.36'%20y2='22.22'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%235ac7f2'/%3e%3cstop%20offset='1'%20stop-color='%230868f7'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M29,28.74V81.91l-9.51-3.68v0L8.52,74A7.17,7.17,0,0,1,4,67.32V24.54A3.76,3.76,0,0,1,9.08,21Z'/%3e%3cpath%20class='cls-2'%20d='M68.09,78.07a13.15,13.15,0,0,1-17.9,12.06L29,81.91h0V28.74L50.19,37A13.17,13.17,0,0,0,68.08,25.3h0Z'/%3e%3cpath%20class='cls-3'%20d='M68.08,25.3a13.19,13.19,0,0,1-6.73,10.87A13.09,13.09,0,0,1,50.19,37L29,28.74V6A3.76,3.76,0,0,1,34.1,2.52l25.59,9.91A13.22,13.22,0,0,1,68.08,25.3Z'/%3e%3cpath%20class='cls-4'%20d='M129.06,81.76a4.33,4.33,0,0,1-3.19-1.31,4.4,4.4,0,0,1-1.31-3.24V56.86H97.65V77.21a4.36,4.36,0,0,1-1.35,3.2A4.68,4.68,0,0,1,93,81.76a4.32,4.32,0,0,1-3.19-1.31,4.37,4.37,0,0,1-1.32-3.24V27.27A4.58,4.58,0,0,1,89.83,24a4.59,4.59,0,0,1,7.82,3.27V48.15h26.91V27.27A4.58,4.58,0,0,1,125.91,24a4.59,4.59,0,0,1,7.82,3.27V77.21a4.37,4.37,0,0,1-1.36,3.2A4.65,4.65,0,0,1,129.06,81.76Z'/%3e%3cpath%20class='cls-4'%20d='M163.77,81.66c-6.57,0-11.76-1.92-15.44-5.7s-5.54-9.07-5.54-15.74a26.76,26.76,0,0,1,2.09-10.43,17.72,17.72,0,0,1,6.67-8.06,19.15,19.15,0,0,1,10.68-2.95,19,19,0,0,1,10.46,2.8,18.7,18.7,0,0,1,6.55,7.36,22.53,22.53,0,0,1,2.36,10.28A4.51,4.51,0,0,1,177,63.77H152.23a10.8,10.8,0,0,0,3.49,6.65c2,1.68,4.88,2.52,8.66,2.52a22.25,22.25,0,0,0,7.54-1.21c.74-.3,1.55-.67,2.37-1.07a3.75,3.75,0,0,1,1.84-.4,4.09,4.09,0,0,1,3,1.15,4,4,0,0,1,1.12,3,4.38,4.38,0,0,1-2.58,3.82,32.34,32.34,0,0,1-6.36,2.61A28.67,28.67,0,0,1,163.77,81.66ZM172.4,55.9a9.72,9.72,0,0,0-1.63-4.56A9.9,9.9,0,0,0,167,48a10.38,10.38,0,0,0-4.64-1.14,12,12,0,0,0-4.77,1.06,9.54,9.54,0,0,0-4.89,5.66,11.78,11.78,0,0,0-.51,2.3Z'/%3e%3cpath%20class='cls-4'%20d='M193,81.64a4.49,4.49,0,0,1-4.51-4.55V27.28A4.58,4.58,0,0,1,189.84,24a4.48,4.48,0,0,1,3.28-1.36A4.36,4.36,0,0,1,196.35,24a4.46,4.46,0,0,1,1.31,3.31V77.09a4.34,4.34,0,0,1-1.35,3.2A4.67,4.67,0,0,1,193,81.64Z'/%3e%3cpath%20class='cls-4'%20d='M263.79,81.71a5.7,5.7,0,0,1-4.2-1.74,5.76,5.76,0,0,1-1.73-4.19V27.37a4.58,4.58,0,0,1,1.35-3.27A4.59,4.59,0,0,1,267,27.37V72.53h24a4.58,4.58,0,0,1,3.27,7.82A4.66,4.66,0,0,1,291,81.71Z'/%3e%3cpath%20class='cls-4'%20d='M424.48,81.74a4.71,4.71,0,0,1-2.71-.88,5.43,5.43,0,0,1-1-1l-.07-.09-12.41-17-5.41,5v9.44a4.31,4.31,0,0,1-1.36,3.19,4.66,4.66,0,0,1-3.3,1.36A4.29,4.29,0,0,1,395,80.42a4.36,4.36,0,0,1-1.32-3.23V27.37A4.58,4.58,0,0,1,395,24.1a4.52,4.52,0,0,1,6.58.12,4.54,4.54,0,0,1,1.24,3.15V56.31l17.72-16.38.05,0a4.8,4.8,0,0,1,2.94-1.11,4.4,4.4,0,0,1,3.27,1.2,4.57,4.57,0,0,1,1.2,3.27,4.44,4.44,0,0,1-.77,2.33,7.45,7.45,0,0,1-1.43,1.65l-11,9.64,13.34,17.68a5,5,0,0,1,1,2.71,4.12,4.12,0,0,1-1.36,3.24A4.64,4.64,0,0,1,424.48,81.74Z'/%3e%3cpath%20class='cls-4'%20d='M317.93,81.76a21.5,21.5,0,1,1,21.17-21.5A21.37,21.37,0,0,1,317.93,81.76Zm0-34.1a12.61,12.61,0,1,0,12.42,12.6A12.52,12.52,0,0,0,317.93,47.66Z'/%3e%3cpath%20class='cls-4'%20d='M212.18,101.22a4.12,4.12,0,0,1-3.05-1.26,4.17,4.17,0,0,1-1.26-3.1V43.34a4.37,4.37,0,0,1,1.3-3.14,4.26,4.26,0,0,1,3.13-1.3,4.19,4.19,0,0,1,3.1,1.26,4.32,4.32,0,0,1,1.26,3.16,20.77,20.77,0,0,1,13-4.54,21.51,21.51,0,0,1,0,43,20.51,20.51,0,0,1-13-4.57V96.86a4.15,4.15,0,0,1-1.3,3.06A4.5,4.5,0,0,1,212.18,101.22Zm17.43-53.63c-6.23,0-12.93,4.11-12.93,12.72a12.73,12.73,0,0,0,25.46,0A12.71,12.71,0,0,0,229.61,47.59Z'/%3e%3cpath%20class='cls-4'%20d='M365.76,81.76a21.5,21.5,0,1,1,21.18-21.5A21.37,21.37,0,0,1,365.76,81.76Zm0-34.1a12.61,12.61,0,1,0,12.42,12.6A12.52,12.52,0,0,0,365.76,47.66Z'/%3e%3c/svg%3e)