Pintura Image Editor v8.89.6

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

Please note that client-side video encoding is useful for encoding short videos, it's advised to use server side encoding for content longer than a couple minutes.

The Redact, Frame, and Fill util are currently not supported when using the video extension.

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,
    plugin_trim_locale_en_gb,
} from '@pqina/pintura';
import '@pqina/pintura/pintura.css';

import { plugin_trim } from '@pqina/pintura-video';
import '@pqina/pintura-video/pinturavideo.css';

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,
    plugin_trim_locale_en_gb,
} from '@pqina/pintura';
import '@pqina/pintura/pintura.css';

import {
    createDefaultVideoWriter,
    createMediaStreamEncoder,
    plugin_trim,
} from '@pqina/pintura-video';
import '@pqina/pintura-video/pinturavideo.css';

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,
    plugin_trim_locale_en_gb,
} from '@pqina/pintura';
import '@pqina/pintura/pintura.css';

import {
    createDefaultVideoWriter,
    createFFmpegEncoder,
    plugin_trim,
} from '@pqina/pintura-video';
import '@pqina/pintura-video/pinturavideo.css';

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