noodl-docs/nodes/basic-elements/video/README.md

hide_title, hide_table_of_contents, title

hide_title	hide_table_of_contents	title
true	true	Video node

{/##head##/}

Video

This node places a video surface in the visual tree. It features a wide range of design options and settings for playback.

The source can be set from a URL or a file. You can drag videos from your computer and drop them into Noodl to add them to the project folder. This will make them selectable as the source in the Video node Property Panel.

{/##head##/}

Inputs

Signal	Description
Play	Signal to start playing the video.
Pause	Signal to pause the video.
Restart	Signal to play the video from the beginning.
Reset	Signal to reset the video to the beginning.

Data	Description
Source	The source of the video. Either a local file in the project folder or an absolute url.
Poster	An image shown when the video is not started. Choose an image in the project folder.
Autoplay	Sets whether the audio/video should start playing as soon as it is loaded.
Controls	Sets whether the audio/video browser native controls are visible.
Volume	The volume of the video when played.
Muted	Sets whether the audio/video is muted or not.
Loop	Indicates whether the video should loop when the end is reached during playback.

The Video node also has some special Video Layout properties:

Data	Description
Video Position X	The video's X position within the Video node's bounding box.
Video Position Y	The video's Y position within the Video node's bounding box.
Object Fit	Specifies how the video will behave when scaled to other size than the default size. Contain: The video will be scaled by keeping aspect ratio and making sure the video fits in the bounding box. This may introduce transparent areas within the Video node's bounding box. Cover: The video will be scaled by keeping aspect ratio and making sure the video fills the entire bounding box. Portions of the video may be clipped. Fill: The video will fill the bounding box by scaling without keeping aspect ratio. None: The video will not be scaled. May be clipped.

Visual

This node supports the following Visual Input Properties:

• Margin
• Alignment
• Dimensions
• Layout, Position
• Style
• Border Style
• Corner Radius
• Box Shadow
• Placement
• Dimension Constraints
• Other
• Advanced HTML

Outputs

Signal	Description
On Can Play	Signal triggered when the video has loaded and is ready to be played.
On Time Update	Signal triggered when the playing position of the audio/video has changed. Event is invoked both by playing the media as well as when the playback position is being moved (for example when fast forward is being used).

Data	Description
DOM Element	A reference to the DOM Element representing this visual node.
videoWidth	The width of the video source.
videoHeight	The height of the video source.

Visual

This node supports the following Visual Output Properties.

• Bounding Box
• Mounted
• Pointer Events
• Hover Events
• Other

@include "../../shared-props/inputs/_visual-input-properties.md" @include "../../shared-props/outputs/_visual-output-properties.md"