Videos

A video shape plays a video file on the board:

• Sources: a file you import, drop, or paste, or a pasted link to a video on YouTube, Vimeo, Mux, or Cloudflare Stream.
• Playback: it plays in place, with a range you choose, a cover picture shown while it is stopped, and controls you can show or hide.
• Styling: it can be cropped and warped, given a stroke, filtered, and masked, and Video Animation plays it at a given moment.

Adding a video

Brings a video onto the board, by any of these ways:

• Operation, one of:
  • Choose Import file in the App menu and pick the file.
  • Drop a video file on the board.
  • Paste a video file from the clipboard.
  • Paste the address of a YouTube, Vimeo, Mux, or Cloudflare Stream video.
• Needs: an MP4, QuickTime, or WebM file of up to 50 MB, or the address of a video on one of those sites. Playback depends on your browser supporting the file's codec.
• Result: the video at its own size, centered where you dropped it, with a placeholder while the file loads. It starts stopped, showing its first frame as cover.

Playing

Plays the video on the board.

• Operation: click the video to play or pause it. With Player on in the Controls section, a player bar under the video adds the timeline, volume, and speed.
• Needs: the video selected on its own. With the Explore canvas tool, every video takes the click, selected or not, as in the Player.
• Result: the video plays from the start of its clip to the end, and loops when Repeat is on. Clicking elsewhere ends the interaction with it, and the video keeps playing.

Playback range and repeat

• Tip: pick the clip with Tst and Ten in the Controls section to play only part of the file, or trim it for good with Edit asset.

Cover and activation

A playing video uses far more of your device than a drawing. To keep a board with many videos light, a video runs only when it is needed and shows a still picture, its cover, the rest of the time.

• Activation decides when the video wakes up: whenever it is on screen, when your device can afford it, or only after a click. A resting video costs no more than an image.
• Cover is the picture shown while it rests. It starts as the first frame of the clip and follows the clip start when you move it. A frame you capture, or an image you choose or paste, replaces it and stays through clip edits and compression until you remove it.
• Tip: provider videos such as YouTube draw their controls on the frame. Hide player interface in captures replays the video silently for a few seconds before capturing, so those controls fade out of the cover.

Both settings live in the Cover section of the Attributes panel.

Cropping

Shows only part of the video, without losing the rest.

• Operation: double-click the video and drag the crop handles, or the picture inside them. Click on empty board to finish.
• Result: only the part inside the frame shows. The rest is kept, so the crop can be changed later, and the Cropping Info section gives the exact values.
• Tip: double-click an edge while cropping to reset the crop.

Warping

Lays the video into a perspective by moving its four corners on their own.

• Operation: double-click the video, as for cropping, and drag a corner control point. Click on empty board to finish.
• Result: the picture is distorted so that corner follows the point, while the other three stay. The Warping Info section gives the corners as numbers.
• Tip: double-click a corner control point to reset that corner.

Sizing

Videos keep their proportions while resizing, since Locked Ratio in Selection info starts on. Turn it off to stretch.

Sharing a video between shapes

Shows the same video file in several shapes, each with its own clip.

• Operation: select the videos that should change, click the eyedropper of Source file in the Fill section, and click the video whose file you want.
• Needs: a source that is a video.
• Result: the selected videos play that file and share it. Each keeps its own clip, playback settings, crop, and styling, keeps its width, and takes the video's proportions. A clip that runs past the end of the new file is shortened to fit.
• Tip: to show several parts of one video, share it across shapes and set a different Tst and Ten on each. Edit asset on one of them gives that shape its own copy.

Attributes

A selected video shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.
• Corners radius: rounds the corners of the shape.
• Locked Ratio: keeps the proportion between width and height while resizing.
• Proportional: scales the stroke width, dashes, hatching, and tiles along with the shape, so a resized shape keeps its look.

Stroke

A stroke drawn around the frame.

• Stroke style: the kind of line. The style decides which of the controls below appear.
  • No stroke: no line at all. Arrows don't offer it.
  • Solid stroke: a continuous line.
  • Dashed stroke: a line made of dashes.
• Stroke color: the color of the line.
• Stroke opacity: the transparency of the line alone.
• Stroke width: the thickness of the line.
• Stroke gap: the space between dashes.
• Stroke dash length: the length of each dash.

Fill

The video is the fill of the shape, so this section holds its file and its opacity.

• Replace: swaps the video for another video file from your device. The shape keeps its width and takes the new file's proportions.
• Eyedropper of Source file: copies the file of another video so both share it, each with its own clip. See Sharing a video between shapes.
• Fill opacity: the transparency of the video.
• Info, a read-only list about the file:
  • Size: the file size.
  • File type: the file format.
  • Source file: the name of the file as it was added.
  • Resolution: the size in pixels.
  • Duration: the length of the video.
  • Overall bitrate, Video bitrate, and Audio bitrate: how much data per second the file, its video track, and its audio track use.
  • FPS: the frames per second.
  • Audio: whether the file has an audio track.
  • Provider, Source, and Video id: for a provider video such as YouTube, where it is hosted and its address.

Cover

The picture shown while the video rests, and when the video wakes up.

• Activation: when the content runs.
  • Active: runs whenever the shape is visible.
  • Auto: runs when the device has capacity for it.
  • Manual: waits for a click on the shape, and goes back to rest when the shape leaves the visible canvas.
  • On devices with little memory, web embeds and HTML shapes wait for a click whatever their Activation. In the Player, phones and tablets always wait for a tap.
• Cover: the image shown while the content rests.
  • Capture: takes the cover from the content itself.
  • Choose image: uses an image file from your device as the cover.
  • Paste image from clipboard: uses the image in the clipboard as the cover.
  • Remove cover: clears the cover. Shown once the shape has a cover.
  • Once the shape has a cover, Capture reads Recapture and Choose image reads Replace. Capture works with one shape selected, and puts a running shape to rest.
• For provider videos only:
  • Hide player interface in captures: replays the video silently before capturing, so the player's controls and overlays fade out of the cover.

Controls

The playback range, the player interface, and the current time.

• Timeline: shows the video's timeline under it.
• Player: shows the playback buttons.
• Isolate clip: makes the player over the shape show only the clip between the start and end times, as if the rest of the video did not exist. Shown while Timeline is on.
• Internal Player: uses the video's own controls, the provider's or the browser's, instead of Irakasi's.
• Mini Player: shows the compact version of the playback buttons. Shown while Player is on.
• Playback buttons: the same controls the shape draws on the board.
  • Play to start: rewinds to the start of the clip.
  • Play: starts or pauses playback.
  • Play to end: jumps to the end of the clip.
  • Repeat: plays the clip again when it ends.
• Tst: the time where the clip starts.
• Ten: the time where the clip ends.
• T: the current time. When the clip does not start at zero, it splits in two:
  • Tab: the absolute time, counted from the start of the whole video.
  • Tre: the relative time, counted from the start of the clip.
• Playback rate: the speed of the video, as a multiplier.
• Volume: the volume of the video.

Cropping Info

The visible window of the picture while cropping.

• X: the distance from the left edge of the full media to the window.
• Y: the distance from the top edge of the full media to the window.
• W: the width of the window.
• H: the height of the window.

Warping Info

The position of the four corners when the picture is warped.

• Top left: the horizontal and vertical position of the top left corner.
• Top right: the horizontal and vertical position of the top right corner.
• Bottom left: the horizontal and vertical position of the bottom left corner.
• Bottom right: the horizontal and vertical position of the bottom right corner.

Filter

A chain of SVG filter primitives applied to how the shape is drawn. See Filters.

Mask

A video can be masked. See Masks.

Actions

Besides the actions every shape has, covered in What every shape shares, a video offers these in the Actions panel.

Edit asset

Re-encodes the video file to make it lighter, resizes it, or trims it to its clip.

• Operation: click Edit asset.
• Result: the Edit asset panel opens. There you pick the codec, frame rate, and bitrates, change the size in pixels, or keep only the clip, and the result replaces the file. See Media optimization.

Download source asset

Saves the video's current file to your device.

• Operation: click Download source asset.
• Needs: a video whose file has finished loading.
• Result: the file the shape uses downloads. With several shapes selected, every file downloads once, in selection order, whatever kinds of shapes they are; shapes without a file are skipped.

Convert video to GIF

Shows a video that came from an animated GIF as an image again, without changing the file.

• Operation: click Convert video to GIF.
• Needs: a single video created from an animated GIF.
• Result: the same file shown as an image again. Size, crop, and styling are kept.

Convert to file card

Keeps the video as a downloadable card instead of showing it.

• Operation: click Convert to file card.
• Result: a file card holding the same file. See Convert shapes to file cards.

Convert to Image

Replaces the video with a still picture of the frame shown, which draws faster but no longer plays.

• Operation: click Convert to Image. When the conversion would lose something, a dialog lists what, and you confirm with Convert.
• Needs: a single video whose file is on the board. A YouTube, Vimeo, or other provider video, or a video converted together with other shapes, is instead flattened into a picture of how it looks on the board.
• Result: a JPEG image of the frame the video was stopped at, at the video file's own resolution and up to 5000 pixels per side. The image keeps the video's size, position, crop, corner radius, stroke, filter, and mask, all still editable, so undoing the crop later reveals the whole frame. It no longer plays, and video animations are removed. Move, rotate, scale, resize, and fade animations move to the image.
• Tip: a video from another site is captured from the screen first: the view jumps to it and the screen may flicker, so wait until the board is back. After that, an empty image marks its place while it is saved, and the original stays untouched, so you can keep working.

Player interaction

In the Player, a video works like the other interactive shapes:

• Playing: a click on the video plays or pauses it. A video whose Activation is set to Active plays on its own.
• Controls: while you interact with the video, you use the controls chosen in the Controls section. A click outside ends the interaction, and the video keeps playing or stays on its frame.
• Videos from YouTube and other sites: the first tap only starts the interaction. After that, the site's own player takes your clicks.

An image of the board, exported or made with Convert to Image, shows the frame each video is stopped at. Provider videos such as YouTube need permission to capture the screen; without it, they show their cover.

Animating videos

Video Animation plays the video at a moment of the animation, between a start and an end time and at a given speed.