spz-video

In the following example, we use the <source> tag to embed the video and the custom button to play or pause the video.

<spz-video
  id="video"
  layout="fixed"
  width="1280"
  height="720"
  poster="https://img.staticdj.com/211c85ff837b770b26e1a1b9d0eb1552.jpeg"
  loop
  object-fit="cover"
>
  <source src="https://videodelivery.net/cdcff94587ee1048c2dd0ce0abe64c28/downloads/default.mp4" type="video/mp4">
</spz-video>

<button type="button" @tap="video.play();">Play</button>
<button type="button" @tap="video.pause();">Pause</button>

The URL of the video to embed must be HTTPS.

This attribute is optional. You may instead use the <source> element within the video block to specify the video to embed.

required

Set the poster image of the video.

If this attribute is present, the video automatically begins to play back as soon as.

If this attribute is present, the browser will automatically seek back to the start upon reaching the end of the video.

Set the object-fit style to embed the video, just like object-fit CSS property.

Set the object-position style to embed the video, just like object-position CSS property.

If this attribute is present, enable zoom mode.

To play the video. No parameter required.

To pause the video. No parameter required.

seekTo(currentTime=<Number>)

Seek to a given time. It has the following parameters:

• currentTime: a second number. set a time to seek.

<button type="button" @tap="video.seekTo(currentTime=20);">Seek 20 seconds</button>

Be triggered when the video is playing.

Be triggered when the video is pausing.

Be triggered when the video ends.

Be triggered when the video enters full-screen with the full-screen button.

Be triggered when the video exits full-screen with the full-screen button.

<div id="play">The video is playing.</div>

<spz-video
  layout="fixed"
  width="1280"
  height="720"
  poster="https://img.staticdj.com/211c85ff837b770b26e1a1b9d0eb1552.jpeg"
  @play="play.show"
  @pause="play.hide"
  @ended="..."
  @enterFull="..."
  @exitFull="..."
>
  <!-- ... -->
</spz-video>