wp image

wp-image is a very common used component. It's image prop expects the same data as supplied by the gql/fragments/MediaImage.gql fragment.

<wp-image ref=“wpImage” :image=“image” @ended=“videoEnded” @playing=“onPlaying"/>

// Will play the video, returns a Promise if play started or didn’t (low power mode will prevent it for example)
this.$refs.wpImage.play()

 // Will pause the video, no return value
this.$refs.wpImage.pause()

// Will return the current volume setting
this.$refs.wpImage.volume()

// Will set the current volume to 75%, returning the confirmed amount.
this.$refs.wpImage.volume(0.75)

Note the ended and playing events too. Those include the underlying browser events if you wanted them for something.

This is how you’d use the Play event to handle it not playing (like for an intro video):

try{
	this.$refs.wpImage.play()
} catch(e) {
	// Didn’t play for some reason
}