Component: Video ( Indicator): Difference between revisions

Latest revision as of 14:37, 13 July 2026

Author	MatrixTSL
Version	1.0
Category	Indicator

Video component

Web-based video component.

Detailed description

The Video component creates a media player which supports video playback into your Web App.

It can also be attached to a local camera feed, allowing images and video recordings to be made.

Examples

Playing videos

This simple example plays a selection of videos.

VideoPlayer.fcweb

The web app created by this example can be viewed here: Video Player Example

Taking pictures and videos with a web cam

This example attached to a web camera and allows still images and short videos to be taken and downloaded.

WebCameraExample.fcweb

The web app created by this example can be viewed here: Web Camera Example

Macro reference

AttachToDevice

	AttachToDevice
Requests permission to use a camera feed.
- BOOL	IncludeAudio
Captures the audio of the camera (if available)
- VOID	Return

GetImage

	GetImage
Captures a still image from the video.
- STRING	Return

GetRecording

	GetRecording
Returns the recorded data
- STRING	Return

HasMedia

	HasMedia
The media is currently available
- BOOL	Return

IsPlaying

	IsPlaying
The media is currently playing
- BOOL	Return

JumpBy

	JumpBy
Seeks the media to a new position relative to the current position
- FLOAT	Offset
The position offset of the media (in seconds)
- VOID	Return

Load

	Load
Loads new media (or resets the current media if the parameter is blank)
- STRING	Source
The source URL for the media (use empty string to keep use current media)
- VOID	Return

Pause

	Pause
Pauses the media
- VOID	Return

Play

	Play
Starts or resumes playing the media
- VOID	Return

StartRecording

	StartRecording
Starts recording the media
- VOID	Return

StopRecording

	StopRecording
Stops recording the media
- VOID	Return

Property reference

	Properties
	Video
	Source
The URL of the source media
	Type
The MIME type of the media (leave blank for auto)
	Thumbnail
Set an optional image to be shown before the video loads/plays
	Options
	Muted
Set true to mute the audio from the resource
	Loop
Set true to automatically seek to the start of the media once it has reached the end
	Show Controls
Shows or hides the default set of controls (e.g. pause/resume, volume, seeking)
	Autoplay
Automatically begin to play the media as soon as it is available
	Callbacks
	OnAttached
Send when a camera feed is attached to this component
	Advanced
	Custom Attributes

Component Source Code

Please click here to download the component source project: FC_Comp_Source_WEBEXP_Video.fcsx

Please click here to view the component source code (Beta): FC_Comp_Source_WEBEXP_Video.fcsx

@@ Line 46: / Line 46: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''AttachToDevice'''
+| width="90%" class="mtx-class-macrohead" | '''AttachToDevice'''
 |-
 | colspan="2" | Requests permission to use a camera feed.&nbsp;
@@ Line 65: / Line 65: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetImage'''
+| width="90%" class="mtx-class-macrohead" | '''GetImage'''
 |-
 | colspan="2" | Captures a still image from the video.&nbsp;
@@ Line 79: / Line 79: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetRecording'''
+| width="90%" class="mtx-class-macrohead" | '''GetRecording'''
 |-
 | colspan="2" | Returns the recorded data&nbsp;
@@ Line 93: / Line 93: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''HasMedia'''
+| width="90%" class="mtx-class-macrohead" | '''HasMedia'''
 |-
 | colspan="2" | The media is currently available&nbsp;
@@ Line 107: / Line 107: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''IsPlaying'''
+| width="90%" class="mtx-class-macrohead" | '''IsPlaying'''
 |-
 | colspan="2" | The media is currently playing&nbsp;
@@ Line 121: / Line 121: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''JumpBy'''
+| width="90%" class="mtx-class-macrohead" | '''JumpBy'''
 |-
 | colspan="2" | Seeks the media to a new position relative to the current position&nbsp;
@@ Line 140: / Line 140: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''JumpTo'''
+| width="90%" class="mtx-class-macrohead" | '''JumpTo'''
 |-
 | colspan="2" | Sseeks the media to the new time&nbsp;
@@ Line 159: / Line 159: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Load'''
+| width="90%" class="mtx-class-macrohead" | '''Load'''
 |-
 | colspan="2" | Loads new media (or resets the current media if the parameter is blank)&nbsp;
@@ Line 178: / Line 178: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Pause'''
+| width="90%" class="mtx-class-macrohead" | '''Pause'''
 |-
 | colspan="2" | Pauses the media&nbsp;
@@ Line 192: / Line 192: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Play'''
+| width="90%" class="mtx-class-macrohead" | '''Play'''
 |-
 | colspan="2" | Starts or resumes playing the media&nbsp;
@@ Line 206: / Line 206: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''StartRecording'''
+| width="90%" class="mtx-class-macrohead" | '''StartRecording'''
 |-
 | colspan="2" | Starts recording the media&nbsp;
@@ Line 220: / Line 220: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''StopRecording'''
+| width="90%" class="mtx-class-macrohead" | '''StopRecording'''
 |-
 | colspan="2" | Stops recording the media&nbsp;
@@ Line 235: / Line 235: @@
 |-
 | width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-prop-icon.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''
+| width="90%" class="mtx-class-macrohead" | '''Properties'''
 |-
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Video
+| width="90%" class="mtx-class-propfolder" | Video
 |-
 |-
@@ Line 257: / Line 257: @@
 | colspan="2" | Set an optional image to be shown before the video loads/plays&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Options
+| width="90%" class="mtx-class-propfolder" | Options
 |-
 |-
@@ Line 281: / Line 281: @@
 | colspan="2" | Automatically begin to play the media as soon as it is available&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Callbacks
+| width="90%" class="mtx-class-propfolder" | Callbacks
 |-
 |-
@@ Line 290: / Line 290: @@
 | colspan="2" | Send when a camera feed is attached to this component&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
+| width="90%" class="mtx-class-propfolder" | Advanced
 |-
 |-

	JumpTo
Sseeks the media to the new time
- FLOAT	Position
The position in the media (in seconds)
- VOID	Return

SteveT (talk | contribs)