Editing a video clip

262

Editing a video clip

This article explains how to obtain from a video filtered with a canvas the equivalent effect in a clip and how editing the clip parameters is coded.

See the Programmer's manual.

Click in the video to start playing it. Click again to pause it, continue to play it.

horloge.phtml

<div style="display:inline-flex;align-items:start;background:black">
<video width="854" height="480" preload="auto" muted>
<source src="/files/videos/Horloge.webm" type="video/webm" />
</video>
</div>

<script>
const hflip=false, vflip=false;
const scale=0.5;
var video = document.querySelector('video');
video.style.display = 'none';
var canvas;

video.onloadedmetadata = function() {
canvas = document.createElement('canvas');
canvas.width=Math.floor(video.width*scale);
canvas.height=Math.floor(video.height*scale);
canvas.style.cursor = 'pointer';
var ctx = canvas.getContext('2d');
ctx.setTransform(hflip ? -scale : scale, 0, 0, vflip ? -scale : scale, hflip ? canvas.width : 0, vflip ? canvas.height : 0);
ctx.filter = 'sepia(1)';
video.after(canvas);
const keyframes = [ {transform: 'scale(1)'}, {transform: 'scale(0.8)'}, {transform: 'scale(1)'}];
const timing = { duration: 10000, iterations: Infinity };
canvas.animation = canvas.animate(keyframes, timing);
canvas.animation.pause();
function streamvideo() {
if (video.paused || video.ended)
return false;
ctx.drawImage(video, 0, 0);
requestAnimationFrame(streamvideo);
};
video.onplay = function() {
canvas.animation.play();
streamvideo();
};
video.onpause = function() {
canvas.animation.pause();
};
video.onseeked = function() {
canvas.animation.currentTime = video.currentTime*1000;
ctx.drawImage(video, 0, 0);
};
video.seek = function(ms) {
video.currentTime = ms / 1000;
};
video.onloadeddata = function() {
ctx.drawImage(video, 0, 0);
}
canvas.onclick = function() {
if (video.paused)
video.play();
else
video.pause();
};
};

Clip

Click in the video to start playing it. Click again to pause it, continue to play it.

testVideoClip.phtml

<?php $src='/files/videos/Horloge.webm'; ?>
<?php $type='video/webm'; ?>
<?php $width=854; ?>
<?php $height=480; ?>

Configures the URL of the video, its type and its size.

<?php $id=uniqid('id'); ?>

Defines the identifier of the <div> which surrounds the HTML of the interface.

.test_display {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
background: black;
}

Configures the CSS of the display of the video.

<div id="<?php echo $id; ?>" class="noprint">
<div class="test_display">
<video width="<?php echo $width; ?>" height="<?php echo $height; ?>" preload="auto">
<source src="<?php echo $src; ?>" type="<?php echo $type; ?>" />
</video>
</div>
</div>

Displays the video.

<?php head('javascript', '/objectivejs/Objective.js'); ?>
<?php head('javascript', '/objectivejs/Responder.js'); ?>
<?php head('javascript', '/objectivejs/View.js'); ?>
<?php head('javascript', '/objectivejs/Clip.js'); ?>
<?php head('javascript', '/objectivejs/VideoClip.js'); ?>
<?php head('javascript', '/objectivejs/DrawingArea.js'); ?>

Includes the code of all the necessary classes. REMINDER: The function head of the iZend library adds a tag such as <script src="/objectivejs/Objective.js"></script> to the <head> section of the document in HTML. Adapt the code to your development environment.

const clip = new VideoClip();
const container = document.querySelector('#<?php echo $id; ?>');
clip.setManagedWidget(container.querySelector('video'));

Creates the clip. Retrieves the <div> which surrounds the HTML of the program. Configures the interface of the clip.

const keyframes = [ {transform: 'scale(1)'}, {transform: 'scale(0.8)'}, {transform: 'scale(1)'}];
const timing = { duration: 10000, iterations: Infinity };
clip.animate([[keyframes, timing]]);

Configures and programs the animation of the clip, i.e. the shrink effect.

clip.dimension = [640, 360];

Resizes the clip.

clip.enablePlayer();

Enables the keyboard and the mouse controls of the clip.

Objective

Responder
- View
  - Clip
    - VideoClip

VideoClip

Objective

Model
- ClipModel
  - VideoModel

VideoModel

Editor

Move the pointer of the mouse over the video. Click in the video or press the space bar to start playing it. Click or press the space bar to pause it, to continue to play it. Use the right and left arrows to move forward or backward by one second, press the Shift key or the Ctrl key at the same time to move forward or backward by ten seconds or a hundred milliseconds. Press the 0 key to come back to the beginning. Press the plus key to play the video faster, the minus key to play it slower, the asterisk key to come back to the normal speed.

Activate the sound.

Modify the width or the height of the video in pixels. NOTE: The editor preserves the aspect ratio of the display and adjusts the other dimension automatically. Invert the display horizontally or vertically. Try a grayscale or a sepia effect. Blur the display. Modify the contrast, the brightness, the saturation, the tint of the video.

Try the Undo and Redo buttons.

Reload the page. The modifications are saved.

See Architecture of an editor.

testVideoEditor.phtml

<?php $debug=false; ?>

Setting $debug to true gives access in the console of the navigator to all the components of the interface. If $debug is false, all the code in JavaScript is protected by a closure function.

<?php $editor=true; ?>
<?php $player=true; ?>

Setting $editor to true displays the editor of the clip. Setting $player to true activates the controls of the clip. Try setting each option to false.

<?php $clipname='horloge'; ?>

Defines the name of the model which defines the name of the cookie which records the data of the model.

<?php $src='/files/videos/Horloge.webm'; ?>
<?php $type='video/webm'; ?>
<?php $width=854; ?>
<?php $height=480; ?>

Configures the URL of the video, its type and its size.

<?php head('javascript', 'js.cookie.js'); ?>

Adds the tag <script src="/js/js.cookie.js"></script> to the <head> section of the document in HTML. REMINDER: The function head is provided by iZend. Adapt the code to your development environment.

<?php $id=uniqid('id'); ?>

Defines the identifier of the <div> which surrounds the HTML of the interface.

<div id="<?php echo $id; ?>" class="clip">

<div class="ojs">
<div>
<div class="ojs_undo">
<button type="submit" class="ojs_button narrow control_undo" disabled><i class="fas fa-undo"></i></button>
<button type="submit" class="ojs_button narrow control_redo" disabled><i class="fas fa-redo"></i></button>
</div>
<span class="ojs_dimension">
<input class="ojs_width" type="number" min="120"/> <i class="fas fa-arrows-alt-h small"></i>
<input class="ojs_height" type="number" min="10"/> <i class="fas fa-arrows-alt-v small"></i>
</span>
</div>
<div>
<span><input id="<?php echo $id; ?>_video_hflip" type="checkbox" /><label for="<?php echo $id; ?>_video_hflip"><i class="fas fa-ellipsis-h small"></i></label></span>
<span><input id="<?php echo $id; ?>_video_vflip" type="checkbox" /><label for="<?php echo $id; ?>_video_vflip"><i class="fas fa-ellipsis-v small"></i></label></span>
<span><input id="<?php echo $id; ?>_video_grayscale" type="checkbox" /><label for="<?php echo $id; ?>_video_grayscale" class="grayscale"> </label></span>
<span><input id="<?php echo $id; ?>_video_sepia" type="checkbox" /><label for="<?php echo $id; ?>_video_sepia" class="sepia"> </label></span>
<span><input id="<?php echo $id; ?>_video_blur" type="checkbox" /><label for="<?php echo $id; ?>_video_blur"><i class="fas fa-brush small"></i></label></span>
</div>
<div>
<span><i class="fas fa-adjust fa-fw small"></i> <input id="<?php echo $id; ?>_video_contrast" type="range" min="0" max="2" step="0.05"/> <output for="<?php echo $id; ?>_video_contrast">1.0</output></span>
<span><i class="fas fa-fill-drip fa-fw small"></i> <input id="<?php echo $id; ?>_video_saturate" type="range" min="0" max="2" step="0.05"/> <output for="<?php echo $id; ?>_video_saturate">1.0</output></span>
</div>
<div>
<span><i class="fas fa-sun fa-fw small"></i> <input id="<?php echo $id; ?>_video_brightness" type="range" min="0" max="2" step="0.05"/> <output for="<?php echo $id; ?>_video_brightness">1.0</output></span>
<span><i class="fas fa-tint-slash fa-fw small"></i> <input id="<?php echo $id; ?>_video_invert" type="range" min="0" max="1" step="0.05"/> <output for="<?php echo $id; ?>_video_invert">1.0</output></span>
</div>
<div>
<output id="<?php echo $id; ?>_video_time">00:00:00</output>
<span><input id="<?php echo $id; ?>_video_muted" type="checkbox" /><label for="<?php echo $id; ?>_video_muted"><i class="fas fa-volume-mute"></i></label></span>
</div>
</div>

<div class="ojs_video">

<video width="<?php echo $width; ?>" height="<?php echo $height; ?>" preload="auto" muted>
<source src="<?php echo $src; ?>" type="<?php echo $type; ?>" />
</video>

</div>

<?php head('javascript', '/objectivejs/Objective.js'); ?>
<?php head('javascript', '/objectivejs/Responder.js'); ?>
<?php head('javascript', '/objectivejs/View.js'); ?>
<?php head('javascript', '/objectivejs/Clip.js'); ?>
<?php head('javascript', '/objectivejs/Model.js'); ?>
<?php head('javascript', '/objectivejs/Validator.js'); ?>
<?php if ($editor): ?>
<?php head('javascript', '/objectivejs/Editor.js'); ?>
<?php head('javascript', '/objectivejs/Inspector.js'); ?>
<?php head('javascript', '/objectivejs/BooleanInspector.js'); ?>
<?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
<?php head('javascript', '/objectivejs/StringInspector.js'); ?>
<?php head('javascript', '/objectivejs/SelectInspector.js'); ?>
<?php head('javascript', '/objectivejs/DimensionInspector.js'); ?>
<?php head('javascript', '/objectivejs/RangeInspector.js'); ?>
<?php head('javascript', '/objectivejs/Undo.js'); ?>
<?php head('javascript', '/objectivejs/Panel.js'); ?>
<?php head('javascript', '/objectivejs/UndoPanel.js'); ?>
<?php else: ?>
<?php head('javascript', '/objectivejs/ClipController.js'); ?>
<?php endif; ?>
<?php head('javascript', '/objectivejs/DrawingArea.js'); ?>
<?php head('javascript', '/objectivejs/ClipModel.js'); ?>
<?php head('javascript', '/objectivejs/VideoModel.js'); ?>
<?php head('javascript', '/objectivejs/VideoClip.js'); ?>
<?php head('javascript', '/objectivejs/ModelCookieDelegate.js'); ?>

<?php if (!$debug): ?>
(function() {
<?php endif; ?>

Isolates all the code in JavaScript in a closure function if $debug is false.

const clip = new VideoClip();
const model = new VideoModel('<?php echo $clipname; ?>');
const container = document.querySelector('#<?php echo $id; ?>');
clip.setManagedWidget(container.querySelector('video'));
clip.set(model.get());

clip.enablePlayer();

clip.addTimeWidget(container.querySelector('#<?php echo $id; ?>_video_time'));
clip.addMutedWidget(container.querySelector('#<?php echo $id; ?>_video_muted'));
const panel = new UndoPanel();
panel.setManagedWidget(container.querySelector('.ojs_undo')).resetWidget();
const size = model.getValue('size');
const sizeInspector = new DimensionInspector(size[0], size[1], {minWidth: VideoModel.minWidth, maxWidth: VideoModel.maxWidth, minHeight: VideoModel.minHeight, maxHeight: VideoModel.maxHeight});
sizeInspector.setManagedWidget(container.querySelector('.ojs_dimension')).resetWidget();
const hflipInspector = new BooleanInspector(model.getValue('hflip'));
hflipInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_hflip')).resetWidget();
const vflipInspector = new BooleanInspector(model.getValue('vflip'));
vflipInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_vflip')).resetWidget();
const sepiaInspector = new BooleanInspector(model.getValue('sepia'));
sepiaInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_sepia')).resetWidget();
const grayscaleInspector = new BooleanInspector(model.getValue('grayscale'));
grayscaleInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_grayscale')).resetWidget();
const blurInspector = new BooleanInspector(model.getValue('blur'));
blurInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_blur')).resetWidget();
const contrastInspector = new RangeInspector(model.getValue('contrast'), {min: VideoModel.minContrast, max: VideoModel.maxContrast, fixed: 2});
contrastInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_contrast')).resetWidget();
const saturateInspector = new RangeInspector(model.getValue('saturate'), {min: VideoModel.minSaturate, max: VideoModel.maxSaturate, fixed: 2});
saturateInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_saturate')).resetWidget();
const brightnessInspector = new RangeInspector(model.getValue('brightness'), {min: VideoModel.minBrightness, max: VideoModel.maxBrightness, fixed: 2});
brightnessInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_brightness')).resetWidget();
const invertInspector = new RangeInspector(model.getValue('invert'), {min: VideoModel.minOpacity, max: VideoModel.maxOpacity, fixed: 2});
invertInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_video_invert')).resetWidget();
const inspectors = {
size: sizeInspector,
hflip: hflipInspector,
vflip: vflipInspector,
invert: invertInspector,
contrast: contrastInspector,
saturate: saturateInspector,
brightness: brightnessInspector,
grayscale: grayscaleInspector,
sepia: sepiaInspector,
blur: blurInspector
};
const editor = new Editor(model, clip, inspectors, panel);

const controller = new ClipController(clip, model);

model.setDelegate(new ModelCookieDelegate());
model.readIn();
model.enableSync(1000);

<?php if (!$debug): ?>
})();
<?php endif; ?>
</script>

Closes the function which isolates the code in JavaScript if $debug is false.

A clip can always be converted into a video.

horloge.mp4

horloge.webm

Click in the video to start it. Click again to pause it.

objectivejs.org