diff --git a/README.md b/README.md index 663d2b1..5733533 100644 --- a/README.md +++ b/README.md @@ -182,6 +182,7 @@ You can add your own transition styles here. If you set it to empty string, it w - `ready`: Video is loaded - `playing`: Video is playing +- `paused`: Video is paused - `error`: Video error - `loading`: Video is loading - `ended`: Video finished, only when `loop` is set to false @@ -190,11 +191,11 @@ You can add your own transition styles here. If you set it to empty string, it w If you happen to need more control over the player, you can use the internal methods. For that, you need to set `ref=videobackground` to the HTML tag ``. After that you can call all methods like this `this.$refs.videobackground.player.play()`. -- `play()`: Video is playing -- `pause()`: Video is paused -- `show()`: Video is shown -- `hide()`: Video is hidden, the poster is shown -- `load()`: Video is loaded +- `play()`: Plays the video +- `pause()`: Pauses the video +- `show()`: Shows the video +- `hide()`: hides the video and the poster will be shown +- `load()`: Loads the video ## Security diff --git a/src/VideoBackground.vue b/src/VideoBackground.vue index e447653..9199edb 100644 --- a/src/VideoBackground.vue +++ b/src/VideoBackground.vue @@ -20,6 +20,7 @@ :object-fit="objectFit" @ready="playVideo" @playing="$emit('playing')" + @paused="$emit('paused')" @error="$emit('error')" @loading="$emit('loading')" @ended="$emit('ended')" @@ -47,7 +48,7 @@ import resize from './core/resize'; export default { props, mixins: [resize], - emits: ['playing', 'error', 'loading', 'ended', 'ready'], + emits: ['playing', 'paused', 'error', 'loading', 'ended', 'ready'], components: { VideoPlayer, VideoPoster, diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue index 3251c43..eb3fabc 100644 --- a/src/components/VideoPlayer.vue +++ b/src/components/VideoPlayer.vue @@ -27,7 +27,7 @@ import props from '../core/playerProps'; export default { props, - emits: ['playing', 'error', 'loading', 'ended', 'ready'], + emits: ['playing', 'paused', 'error', 'loading', 'ended', 'ready'], data() { return { showVideo: false, @@ -52,6 +52,7 @@ export default { pause() { if (this.$refs.video) { this.$refs.video.pause(); + this.$emit('paused'); } }, load() {