Skip to main content

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.

Inputs

SignalDescription
PlaySignal to start playing the video.
PauseSignal to pause the video.
RestartSignal to play the video from the beginning.
ResetSignal to reset the video to the beginning.
DataDescription
SourceThe source of the video. Either a local file in the project folder or an absolute url.
PosterAn image shown when the video is not started. Choose an image in the project folder.
AutoplaySets whether the audio/video should start playing as soon as it is loaded.
ControlsSets whether the audio/video browser native controls are visible.
VolumeThe volume of the video when played.
MutedSets whether the audio/video is muted or not.
LoopIndicates whether the video should loop when the end is reached during playback.

The Video node also has some special Video Layout properties:

DataDescription
Video Position XThe video's X position within the Video node's bounding box.
Video Position YThe video's Y position within the Video node's bounding box.
Object FitSpecifies 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:

Outputs

SignalDescription
On Can PlaySignal triggered when the video has loaded and is ready to be played.
On Time UpdateSignal 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).
DataDescription
DOM ElementA reference to the DOM Element representing this visual node.
videoWidthThe width of the video source.
videoHeightThe height of the video source.

Visual

This node supports the following Visual Output Properties.

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