Image
The <ef-image> element is a custom HTML element that extends the functionality of the standard HTML image element. It provides essential integration with the Editframe rendering system.
Basic Usage
Attributes
assetId
asset-idassetIdstringThe asset ID of the image.
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 audio.
⚠️ 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.
duration
durationdurationtimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A fixed duration for the image. Typically, an image will expand to fill the duration of its parent timegroup. However, sometimes you may want to display an image for a fixed duration, such is in a simple slideshow inside a timegroup.
Demonstrations
Single image
This example demonstrates a single image being displayed for 5 seconds. Because all videos require a root timegroup, this is the simplest way to display a single image.
Image With Fixed Duration
In that example, the root timegroup was set to a fixed duration of 5 seconds. By default, an image will expand temporally to fill it's parent timegroup.
We can invert this relationship by using the contain mode on the timegroup and giving the image a fixed duration.
Simple Image Sequence
We can create a simple slideshow of images by using the sequence mode on the timegroup, and giving each image a fixed duration.
Rich Slideshow
In practice, you may want to include more content on each "slide". For those cases, it would be better to wrap each image in a timegroup to contain the other content.