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
| 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.
@include "../../shared-props/inputs/_visual-input-properties.md" @include "../../shared-props/outputs/_visual-output-properties.md"