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.
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 |
|
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>
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>