Add videos: library, block and section background

Videos join the media library as their own table (schema v28), with a
video block and a looping background on sections. video.js starts loops
only while visible, offers a pause button and leaves the still image for
reduced motion and data saving.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PWYm8kjAWmZaB2QB2xuBhU

public/assets/editor.js

@@ -1,5 +1,5 @@
 import { EditorHistory, labels, blockLabel, blockIcon, isPluginBlock, setStyle, effectiveStyle, locate, clone, isContainer, canContain, insertBlock, insertBlockAt, insertionTarget, moveBlockTo, duplicateBlock, moveBlock, devices, effectiveDesign, setDesign, blockPath, insertPreset, insertRow, insertRowAt, setEffect, insertMedia, upgradeDocument, CATEGORIES, ROW_COLUMNS, whyNot, dropList } from './editor-model.js';
-import { openMedia, openDocuments, createMediaPreview } from './media.js';
+import { openMedia, openDocuments, openVideos, createMediaPreview } from './media.js';
 import { openPageDialog } from './page-picker.js';
 import { createDesignPanel } from './design-panel.js';
 import { renderButtonControls, setButtonDesign } from './button-design.js';
@@ -549,6 +549,13 @@ function renderContent(block, panel) {
     field('Höhe (px)', 'height', block.props.height, { number: true, help: 'Zwischen 150 und 1200.' });
     field('Hinweis im Platzhalter', 'hint', block.props.hint || '', { multiline: true, help: 'Leer lassen für den Standardtext.' });
   }
+  if (block.type === 'video') {
+    videoChoice(panel, block, 'src', 'Video', 'MP4 mit H.264 spielt jeder Browser ab.');
+    videoChoice(panel, block, 'srcWebm', 'Zweitformat WebM (optional)', 'Meist kleiner als das MP4. Browser, die es können, nehmen es zuerst.', 'video/webm');
+    posterChoice(panel, block);
+    field('Verhalten', 'mode', block.props.mode || 'player', { choices: { player: 'Spieler mit Steuerung', loop: 'Schleife ohne Ton' }, help: 'Die Schleife startet von selbst, sobald das Video zu sehen ist, und läuft nur stumm. Wer „Bewegung reduzieren“ eingestellt hat, sieht das Standbild.' });
+    field('Titel', 'title', block.props.title || '', { maxLength: 160, help: 'Worum es im Video geht. Screenreader lesen das vor. Bei einer rein dekorativen Schleife leer lassen.' });
+  }
   if (block.type === 'html') {
     // Rohes Markup. Dieselbe Rolle wie beim eigenen Skript, deshalb dieselbe Anzeige: sichtbar
     // fuer alle, beschreibbar nur fuer Administratoren - und der Server weist es ohnehin ab.
@@ -671,6 +678,8 @@ function renderContent(block, panel) {
     panel.append(images);
   }
   if (block.type === 'section') {
+    videoChoice(panel, block, 'backgroundVideo', 'Hintergrundvideo', 'Läuft stumm in der Schleife hinter dem Inhalt. Das Hintergrundbild unter Design bleibt das Standbild, bis das Video läuft, und für alle, die keine Bewegung möchten. Eine Überlagerung liegt nicht über dem Video.');
+    videoChoice(panel, block, 'backgroundVideoWebm', 'Zweitformat WebM (optional)', 'Meist kleiner als das MP4. Browser, die es können, nehmen es zuerst.', 'video/webm');
     field('Farbwelt', 'tone', block.layout?.tone || 'paper', { layout: true, choices: { paper: 'Hell · Papier', mint: 'Hellgrün · Akzent', ink: 'Dunkel · Tinte' } });
     field('Inhaltsbreite', 'width', block.layout?.width || 'normal', { layout: true, choices: { normal: 'Websitebreite (aus dem Theme)', narrow: 'Schmal (800 px)', wide: 'Breit (1600 px)', full: 'Randlos (volle Breite)' }, help: 'Randlos nutzt die gesamte Sektion. Text und Überschriften füllen ihren Container; eine eigene Begrenzung stellst du unter Design → Größe ein.' });
   }
@@ -866,6 +875,51 @@ function renderPluginFields(block, panel, plugin, field) {
   }
 }
 
+/** Ein Videofeld im Eigenschaftenfeld. Im Dokument steht die Adresse der Datei. */
+function videoChoice(panel, block, key, labelText, helpText, only = '') {
+  const value = block.props?.[key] || '';
+  const wrap = document.createElement('div'); wrap.className = 'plugin-media-field';
+  const label = document.createElement('p'); label.className = 'field-label'; label.textContent = labelText; wrap.append(label);
+  const set = src => {
+    history.change(doc => {
+      upgradeDocument(doc, 28);
+      const current = locate(doc.blocks, block.id)?.block;
+      if (!current) return;
+      current.props ??= {};
+      if (src) current.props[key] = src; else delete current.props[key];
+    });
+    renderProperties(); changed();
+  };
+  if (value) { const name = document.createElement('code'); name.textContent = value; wrap.append(name); }
+  const pick = document.createElement('button'); pick.type = 'button'; pick.className = 'secondary'; pick.textContent = value ? 'Anderes Video wählen' : 'Video wählen oder hochladen';
+  pick.addEventListener('click', () => openVideos({ only, onChoose: item => set(item.src) }));
+  wrap.append(pick);
+  if (value) { const remove = document.createElement('button'); remove.type = 'button'; remove.className = 'text-button danger-text'; remove.textContent = 'Video entfernen'; remove.addEventListener('click', () => set('')); wrap.append(remove); }
+  const help = document.createElement('p'); help.className = 'field-help'; help.textContent = helpText; wrap.append(help);
+  panel.append(wrap);
+}
+
+/** Das Standbild eines Videos: ein Bild der Mediathek, in einer Breite, die für ein Video reicht. */
+function posterChoice(panel, block) {
+  const value = block.props?.poster || '';
+  const wrap = document.createElement('div'); wrap.className = 'plugin-media-field';
+  const label = document.createElement('p'); label.className = 'field-label'; label.textContent = 'Standbild (optional)'; wrap.append(label);
+  const preview = createMediaPreview({ src: value }); wrap.append(preview.element);
+  const set = src => {
+    history.change(doc => {
+      const current = locate(doc.blocks, block.id)?.block;
+      if (!current) return;
+      if (src) current.props.poster = src; else delete current.props.poster;
+    });
+    renderProperties(); changed();
+  };
+  const pick = document.createElement('button'); pick.type = 'button'; pick.className = 'secondary'; pick.textContent = value ? 'Anderes Bild wählen' : 'Bild wählen';
+  pick.addEventListener('click', () => openMedia({ needsAlt: false, onChoose: ([item]) => { if (item) set((item.variants.find(variant => variant.width >= 1600) ?? item.variants.at(-1)).src); } }));
+  wrap.append(pick);
+  if (value) { const remove = document.createElement('button'); remove.type = 'button'; remove.className = 'text-button danger-text'; remove.textContent = 'Bild entfernen'; remove.addEventListener('click', () => set('')); wrap.append(remove); }
+  panel.append(wrap);
+}
+
 function chooseMedia(multiple) {
   const target = selected;
   openMedia({ multiple, onChoose: items => {