Pintura Image Editor v8.51.4

Video properties

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

A list of properties to read from and write to the current state of the video loaded in the editor.

Properties are still prefixed with image to maintain backward compatibility, this will be corrected in version 9 of the editor.

Readonly video properties.

Property	Description
`imageDuration`	The duration of the loaded video in seconds. Is set to `undefined` when an image is loaded.

Video properties to update the video state.

Property	Default value	Description
`imageTrim`	`undefined`	An array of numbers to describe the ranges that should be trimmed.

imageDuration

The duration of the loaded video. Is undefined when an image is loaded.

imageTrim

An array of fractions to describe the ranges that should be trimmed, .5 meaning halfway through the video.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageTrim: [
            [0.25, 0.5],
            [0.7, 0.9],
        ],
    });
</script>

App.jsx
App.css

import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                imageTrim={[
                    [0.25, 0.5],
                    [0.7, 0.9],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :imageTrim="[
                [0.25, 0.5],
                [0.7, 0.9],
            ]"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),
        };
    },

    methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import 'pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageTrim={[
            [0.25, 0.5],
            [0.7, 0.9],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [imageTrim]="[
        [0.25, 0.5],
        [0.7, 0.9]
    ]"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

<!DOCTYPE html>

<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageTrim: [
                [0.25, 0.5],
                [0.7, 0.9],
            ],
        });
    });
</script>