import type { ContainerWidth } from '../@types/global'; import type { Snippet } from 'svelte'; import type { ControlsPosition } from './types'; interface Props { /** Video source */ src: string; /** Image to be shown while the video is downloading */ poster?: string; /** ARIA description, passed in as a markdown string. */ ariaDescription: string; /** Add extra classes to the block tag to target it with custom CSS. */ class?: string; /** Title of the graphic */ title?: string; /** Notes to the graphic, passed in as a markdown string OR a custom snippet. */ notes?: string | Snippet; /** Description of the graphic, passed in as a markdown string. */ description?: string; /** Width of the block within the article well. */ width?: ContainerWidth; /** Set a different width for the text within the text well, for example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`. */ textWidth?: ContainerWidth; /** Preload options. `auto` is ignored if `autoplay` is true. Can also be `none` or `metadata`. */ preloadVideo?: 'auto' | 'none' | 'metadata'; /** Whether the video should loop. */ loopVideo?: boolean; /** Whether video should have sound or not. */ muteVideo?: boolean; /** If `true`, this allow videos with sound to autoplay if the user has previously interacted with DOM */ soundAutoplay?: boolean; /** Whether the video should play when it comes into view or just on page load */ playVideoWhenInView?: boolean; /** Controls how much of the video should be visible when it starts playing. This is a number between 0 and 1, where 0 means the video will start playing as soon as its top enters the viewport, and 1 means it will start when the whole video is in the viewport. */ playVideoThreshold?: number; /** Whether to have the option to pause and play video */ possibleToPlayPause?: boolean; /** Whether to show the play / pause buttons */ showControls?: boolean; /** Whether to use a separate replay icon or use the play icon for replay as well */ separateReplayIcon?: boolean; /** Change the colour of the play/pause button */ controlsColour?: string; /** Change the minimum opacity of the play/pause button, which you see on mouseover. Must be between 0 and 1. */ controlsOpacityMin?: number; /** Change the maximum opacity of the play/pause button, which you see on mouseout. Must be between 0 and 1. */ controlsOpacityMax?: number; /** Have four options for controls position - top right, top left, bottom right, bottom left */ controlsPosition?: ControlsPosition; /** Offset for the controls from the border */ controlsBorderOffset?: number; } /** * A GraphicBlock-wrapped HTML5 video with title, description and notes, plus optional play-when-in-view, poster and custom controls. * * [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-video--docs) */ declare const Video: import("svelte").Component; type Video = ReturnType; export default Video;