# 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](/pintura/pricing/)

Please note that client-side video encoding is useful for encoding short videos, it's advised to use [server side encoding](/pintura/docs/v8/api/video-editor/server/) 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](/pintura/video-editor/)

## Loading the Trim plugin

To load the [Trim plugin](../../plugins/trim/) we need to import the `setPlugins` function and add the plugin locale object.

```js
import { setPlugins, openDefaultEditor } from '@pqina/pintura';
import '@pqina/pintura/pintura.css';

import { plugin_trim, plugin_trim_locale_en_gb } 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](#createmediastreamencoder).

```js
import {
    setPlugins,
    openDefaultEditor,
    createDefaultImageWriter,
    createDefaultMediaWriter,
    imageStateToCanvas,
} from '@pqina/pintura';
import '@pqina/pintura/pintura.css';

import {
    createDefaultVideoWriter,
    createMediaStreamEncoder,
    plugin_trim,
    plugin_trim_locale_en_gb,
} 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](../exports/#createffmpegencoder).

```js
import {
    setPlugins,
    openDefaultEditor,
    createDefaultImageWriter,
    createDefaultMediaWriter,
} from '@pqina/pintura';
import '@pqina/pintura/pintura.css';

import {
    createDefaultVideoWriter,
    createFFmpegEncoder,
    plugin_trim,
    plugin_trim_locale_en_gb,
} 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,
                }),
            }),
        ]
    ),
});
```