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.
|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.|
|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:
|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.|
This node supports the following Visual Input Properties:
- Layout, Position
- Border Style
- Corner Radius
- Box Shadow
- Dimension Constraints
- Advanced HTML
|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).|
|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.|
This node supports the following Visual Output Properties.
@include "../../shared-props/inputs/_visual-input-properties.md" @include "../../shared-props/outputs/_visual-output-properties.md"