diff --git a/apps/docs/content/sdk-features/default-shapes.mdx b/apps/docs/content/sdk-features/default-shapes.mdx index 5dc0f7b6c610..268303a015aa 100644 --- a/apps/docs/content/sdk-features/default-shapes.mdx +++ b/apps/docs/content/sdk-features/default-shapes.mdx @@ -324,6 +324,12 @@ const ConfiguredVideoUtil = VideoShapeUtil.configure({ }) ``` +To disable autoplay across the board — including for pasted or restored shapes — set the editor-level `allowVideoAutoplay` option to `false` instead: + +```tsx + +``` + ### Bookmark The bookmark shape displays a URL as a card with metadata including title, description, and preview image. Bookmarks are created when you paste URLs onto the canvas. The editor fetches metadata from the URL and stores it in an associated asset record. Bookmark shapes have fixed dimensions and can't be resized. diff --git a/apps/docs/content/sdk-features/options.mdx b/apps/docs/content/sdk-features/options.mdx index f75ecd581ada..6076ce839dab 100644 --- a/apps/docs/content/sdk-features/options.mdx +++ b/apps/docs/content/sdk-features/options.mdx @@ -201,6 +201,7 @@ When `debouncedZoom` is enabled and the page has more shapes than `debouncedZoom | `laserDelayMs` | 1200 | Duration laser pointer remains visible | | `laserFadeoutMs` | 500 | Duration for laser pointer fadeout animation | | `quickZoomPreservesScreenBounds` | true | Whether quick zoom brush keeps viewport scale | +| `allowVideoAutoplay` | true | Whether video shapes are allowed to autoplay | | `branding` | undefined | App name for accessibility labels | | `nonce` | undefined | CSP nonce for inline styles | diff --git a/packages/editor/api-report.api.md b/packages/editor/api-report.api.md index d81483ab2186..2a9b69ae7d02 100644 --- a/packages/editor/api-report.api.md +++ b/packages/editor/api-report.api.md @@ -718,6 +718,7 @@ export const DefaultSvgDefs: () => null; export const defaultTldrawOptions: { readonly actionShortcutsLocation: "swap"; readonly adjacentShapeMargin: 10; + readonly allowVideoAutoplay: true; readonly animationMediumMs: 320; readonly camera: TLCameraOptions; readonly cameraMovingTimeoutMs: 64; @@ -3754,6 +3755,7 @@ export interface TldrawOptions { readonly actionShortcutsLocation: 'menu' | 'swap' | 'toolbar'; // (undocumented) readonly adjacentShapeMargin: number; + readonly allowVideoAutoplay: boolean; // (undocumented) readonly animationMediumMs: number; readonly branding?: string; diff --git a/packages/editor/src/lib/options.ts b/packages/editor/src/lib/options.ts index b69837a50f43..c984fabb47a4 100644 --- a/packages/editor/src/lib/options.ts +++ b/packages/editor/src/lib/options.ts @@ -209,6 +209,17 @@ export interface TldrawOptions { * viewport's page dimensions regardless of overview zoom changes. */ readonly quickZoomPreservesScreenBounds: boolean + /** + * Whether video shapes are allowed to autoplay. When `true` (the default), each + * video respects its own `shape.props.autoplay` value. When `false`, no video + * autoplays regardless of its shape prop — useful for host apps that want to + * disable autoplay across the board, including for pasted or restored shapes. + * + * This does not change the per-shape `autoplay` prop on new video shapes — that + * default is controlled by `VideoShapeOptions.autoplay` on `VideoShapeUtil`. The + * `prefers-reduced-motion` media query continues to suppress autoplay independently. + */ + readonly allowVideoAutoplay: boolean /** * Called before content is written to the clipboard during a copy or cut operation. * Receives the serialized content (shapes, bindings, assets) and can filter or transform @@ -347,6 +358,7 @@ export const defaultTldrawOptions = { text: {}, deepLinks: undefined, quickZoomPreservesScreenBounds: true, + allowVideoAutoplay: true, onBeforeCopyToClipboard: undefined, onBeforePasteFromClipboard: undefined, onClipboardPasteRaw: undefined, diff --git a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx index aa4c5a9bd365..f73ea085a56f 100644 --- a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx @@ -210,7 +210,11 @@ const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape }) height="100%" draggable={false} playsInline - autoPlay={shape.props.autoplay && !prefersReducedMotion} + autoPlay={ + shape.props.autoplay && + editor.options.allowVideoAutoplay && + !prefersReducedMotion + } muted loop disableRemotePlayback