Skip to main content


A Video is a widget capable of playing Motion JPEG videos in AVI format.

Video running in the simulator

Audio is not supported.

Widget Group

The Video can be found in the Miscellaneous widget group in TouchGFX Designer.

Video in TouchGFX Designer

Use TouchGFX Generator to configure a HAL with Video Decoding capabilities to play videos on target.


The properties for a Video in TouchGFX Designer.

Property GroupProperty Descriptions
NameName of the widget. Name is the unique identifier used in TouchGFX Designer and code.
LocationX and Y specify the top left corner of the widget relative to its parent.

W and H specify the width and height of the widget.

Lock specifies if the widget should be locked in its current X, Y, W and H.
Locking the widget also disables interacting with the widget through the screen.

Visible specifies the visibility of the widget. Making the widget invisible also disables interacting with the widget through the screen.
SampleSample specifies a sample video for the widget.
These samples are free to use.
VideoVideo specifies the video the widget should use.

Auto Play specifies whether or not the video should automatically play when screen is entered.

Loop specifies whether or not the video should loop.
MixinsDraggable specifies if the widget is draggable at runtime.

ClickListener specifies if the widget emits a callback when clicked.

MoveAnimator specifies if the widget can animate changes to X and Y values.


The actions and triggers supported by a Video in TouchGFX Designer.


Widget specific actionsDescription
PlayPlay the video
PausePause the video
StopStop the video
Standard widget actionsDescription
Move widgetMove a widget to a new position over time.
Hide widgetHides a widget (sets visibility to false).
Show widgetMake a hidden widget visible (sets visibility to true).


Video is doneA video widget has ended playing its video.


The Video Widget is an intensive component. Therefore, the Video is considered a demanding widget on most platforms.

For more details on drawing performance, read the General UI Component Performance section or MJPEG Video article.


Generated Code

In the generated code for the View base class we can see how the Designer sets up a Video.

#include <gui_generated/main_screen/mainViewBase.hpp>
#include <videos/VideoDatabase.hpp>

video.setPosition(0, 0, 480, 272);
video.setVideoData(video_SampleVideo1_480x272_bin_start, video_SampleVideo1_480x272_bin_length);;


TouchGFX Designer Examples

To further explore the Video, try creating a new application within TouchGFX Designer with one of the following UI templates:

Video Example UI template in TouchGFX Designer

API Reference