Demonstration
Basic Usage
Basic useg of a video element:
Trim a video
Trim the start and end of a video. Using trimstart and trimend cuts in relative to the start and end of the video.
This matches the mental model of common user interfaces for simple video trimming.
The source media is 10 seconds long, but we trim it to 6 seconds by setting trimstart to 2 seconds and trimend to 2 seconds.
In and Out points
Set the source in and out points of a video. Using sourcein and sourceout cuts in absolute to the source media.
This matches the mental model of setting source in and out points in a video editor.
The source media is 10 seconds long, but we trim it to 2 seconds by setting sourcein to 2 seconds and sourceout to 4 seconds.
Simple Video Sequence
Videos can be combined into simple sequences by placing them directly into a timegroup with mode="sequence".
Each video will play in sequence, and the sourcein and sourceout properties will be respected.
Nested Timegroups
But often it is useful to use Timegroups to contain videos in a sequence. This allows for adding additional content with the timegroup acting as a layout container.
In this example, we have a timegroup that contains two nested timegroups. Each nested timegroup contains a video and a label.
The video has been given absolute positioning, so that it can act as a background for the group.
The labels are given relative positioning, so that they can have a z-index above the video.
First in sequence
Second in sequence
Filter effects
Because we're using css to style the video, we can use any css filter effects.
In this example, we're using a blur, saturation, brightness, and contrast effect to create a trippy washed out effect.
This can be combined with css animations as well:
Fade in and out
Attributes
assetId
asset-idassetIdstringThe asset ID of the video.
An asset ID is a unique identifier for a media file that has been uploaded to Editframe. This is documented in the Processing Files section.
src
srcsrcstringThe source URL/path of the video.
⚠️ This property is not yet supported in all circumstances. Providing an arbitrary URL or path will not work unless the server is configured to respond with a precise, not-yet-documented, format.
Demonstration projects with such a server are available via npm create @editframe@beta. These are not intended for production use. When complete, a specialized server should not be required, though there will be specific encoding/muxing limitations.
Instead upload media to Editframe and use the assetId property.
🚫 This property should only be used for development, testing, and previewing media to end-users in real-time. When submitting a render job, all media should be uploaded to Editframe and the assetId property should be used. Our render servers will render in parallel, and in order to operate efficiently we need to be able to load only the slice of media that is needed to render a small segment of the timeline.
startTimeMs
numberThe start time of the video in milliseconds. This time is relative to the timeline describe by the root timegroup the video is contained within.
endTimeMs
numberThe end time of the video in milliseconds. This time is relative to the timeline describe by the root timegroup the video is contained within.
durationMs
numberThe duration of the video in milliseconds. This is equivalent to the difference between endTimeMs and startTimeMs.
currentTimesMs
numberThe current time of the video in milliseconds. This time is the time within the timeline of the root timegroup the video is contained within.
ownCurrentTimeMs
numberThe current time of the video in milliseconds. This time is scoped directly to the video element itself.
currentSourceTimeMs
numberThis property is the current time of the video in milliseconds scoped to the source media. If no trimStart or sourceIn are set, this property is equivalent to ownCurrentTimeMs.
💡 If you want to associate data to a video clip, but it's important that the data is not affected by trimming, use this property. For example, if you were tracking an object in the video, you should use this time, so that tracking would hold true even if a trimStart value is set later.
trimStart
trimstarttrimStarttimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A duration of time to trim off from the start of the video.
This time is relative to the start of the video.
Setting trimStart to 10s will result in the video starting 10 seconds into the source media.
This property is intended to be used with the trimEnd property.
trimEnd
trimendtrimEndtimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A duration of time to trim off from the end of the video.
This time is relative to the end of the video.
Setting trimEnd to 10s will result in the video ending 10 seconds into the source media.
This property is intended to be used with the trimStart.
sourceIn
sourceinsourceIntimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A duration of time to trim off from the start of the video.
This time is an absolute value in the timeline of the source media.
Setting sourceIn to 10s will result in the video starting 10 seconds into the source media.
This property is intended to be used with the sourceOut property.
sourceOut
sourceoutsourceOuttimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A duration of time to trim off from the end of the video.
This time is an absolute value in the timeline of the source media.
Setting sourceOut to 10s will result in the video ending 10 seconds into the source media.
This property is intended to be used with the sourceIn property.
parentTimegroup
<ef-timegroup> | nullThe closest timegroup element that contains the video.
rootTimegroup
<ef-timegroup> | nullThe outermost timegroup element that contains the video.
fftSize
fft-sizefftSizenumber512The size of the FFT (Fast Fourier Transform) to use for audio analysis.
This property is used when associated the video with a waveform or other audio analysis.
The value MUST be a power of 2. Higher values will result in more granular waveforms. Though this is not always more aesthetically pleasing.
fftDecay
fft-decayfftDecaynumber8The decay of the FFT (Fast Fourier Transform) to use for audio analysis.
To create a smoother waveform animation, we average together several frames worth of audio data. This property controls the number of frames to average.
Higher values will result in a smoother animation. Extremely high values will increase computational cost.
fftGain
fft-gainfftGainnumber3The gain of the FFT (Fast Fourier Transform) to use for audio analysis.
This property is used when associated the audio with a waveform or other audio analysis.
Higher values will result in a more pronounced waveform.
interpolateFrequencies
interpolate-frequenciesinterpolateFrequenciesbooleanfalseSome input audio may have been fed through a highpass, resulting in waveform visualizations that appear to be missing data.
For example, if audio was recorded through a telephone network, which typically cuts out frequencies above ~4khz, the waveform will appear to be missing data above this frequency.
Setting this property will ignore zero values on the high end of the frequency spectrum, and interpolate the data to fill in the missing values.
This will result in a more aesthetically pleasing waveform, but it may also result in a loss of precision.