# video

[component-header:sl-video]

video is an output to show video files.

```html preview
<sl-video src="https://assets.previsto.com/videos/da/walkthroughs/assignment-overview.mp4" preview-image="https://assets.previsto.com/videos/da/walkthroughs/assignment-overview.png"></sl-video>
<sl-button id="play-btn">Play</sl-button>
<sl-button id="pause-btn">Pause</sl-button>
<script>
  const slVideo= document.querySelector('sl-video');
  const playBtn= document.querySelector('#play-btn');
  const pauseBtn= document.querySelector('#pause-btn');
  playBtn.addEventListener('click',()=>slVideo.play())
  pauseBtn.addEventListener('click',()=>slVideo.pause())
  
</script>
```

## Examples

[component-metadata:sl-video]