Pintura Video Editor Examples
The video editor extension isn't included in the Pintura image editor product package, it's available as an upgrade on the pricing page
The extension currently doesn't support annotations, decorations, redactions, and frame styles.
The clientside video encoding is aimed at encoding short videos, it's strongly advised to use server side encoding for video's longer than a couple minutes.
Loading the Trim plugin
To load the Trim plugin we need to import the setPlugins
function and add the plugin locale object.
import { setPlugins, openDefaultEditor } from './pintura.js';
import { plugin_trim, plugin_trim_locale_en_gb } from './pinturavideo.js';
setPlugins(plugin_trim);
openDefaultEditor({
src: './my-video.mp4',
imageTrim: [[0.5, 0.7]],
locale: {
...plugin_trim_locale_en_gb,
},
});
Using MediaStream encoder
Loading and editing images and videos by combining the default image writer with the MediaStream video encoder.
import {
setPlugins,
openDefaultEditor,
createDefaultImageWriter,
createDefaultMediaWriter,
imageStateToCanvas,
} from './pintura.js';
import {
createDefaultVideoWriter,
createMediaStreamEncoder,
plugin_trim,
plugin_trim_locale_en_gb,
} from './pinturavideo.js';
setPlugins(plugin_trim);
openDefaultEditor({
src: './my-video.mp4',
locale: {
...plugin_trim_locale_en_gb,
},
imageCropAspectRatio: 1,
imageTrim: [[0.5, 0.7]],
imageWriter: createDefaultMediaWriter(
// Generic writer options, passed to image and video writer
{
targetSize: {
width: 512,
},
},
[
createDefaultImageWriter({
// Specific image writer options
}),
createDefaultVideoWriter({
// Specific video writer options
encoder: createMediaStreamEncoder({
// Required
imageStateToCanvas,
}),
}),
]
),
});
Using FFmpeg encoder
Loading and editing images and videos by combining the default image writer with the FFmpeg WASM video encoder.
import {
setPlugins,
openDefaultEditor,
createDefaultImageWriter,
createDefaultMediaWriter,
} from './pintura.js';
import {
createDefaultVideoWriter,
createFFmpegEncoder,
plugin_trim,
plugin_trim_locale_en_gb,
} from './pinturavideo.js';
setPlugins(plugin_trim);
openDefaultEditor({
src: './my-video.mp4',
locale: {
...plugin_trim_locale_en_gb,
},
imageCropAspectRatio: 1,
imageTrim: [[0.5, 0.7]],
imageWriter: createDefaultMediaWriter(
// Generic writer options, passed to image and video writer
{
targetSize: {
width: 512,
},
},
[
createDefaultImageWriter({
// Specific image writer options
}),
createDefaultVideoWriter({
// Specific video writer options
encoder: createFFmpegEncoder({
scriptPath: './ffmpeg/ffmpeg.min.js',
corePath: './ffmpeg/core/ffmpeg-core.js',
log: true,
}),
}),
]
),
});