Merge pull request #43 from teaualune/feature/paused-event

Add paused event

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 `<video-background>`. 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

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,

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() {