Pintura Image Editor v8.51.4

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.

Live demo of Pintura with video editor extension

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,
                }),
            }),
        ]
    ),
});