Added playbackRate

README.md

@@ -127,6 +127,10 @@ So the video fits perfectly in the container
 
 This is important, if you know that you might have users with bad internet speed, you should definetly use `canplaythrough`. Learn more in [video events](https://www.w3schools.com/tags/ref_av_dom.asp).
 
+- `playbackRate` (default: `1.0`)
+
+The playbackRate property sets the current playback speed of the video. [Example](https://www.w3schools.com/jsref/prop_video_playbackrate.asp) but negative values didn't work for me?
+
 ## Events 
 
 - `ready`: Video is loaded

dist/demo.html

@@ -0,0 +1,8 @@
+<meta charset="utf-8">
+<title>index demo</title>
+<script src="./index.umd.js"></script>
+
+
+<script>
+console.log(index)
+</script>

package.json

@@ -1,12 +1,13 @@
 {
   "name": "vue-responsive-video-background-player",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Play your own videos in background responsively",
   "main": "dist/index.common.js",
   "unpkg": "dist/index.umd.min.js",
   "private": false,
   "scripts": {
     "demo": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "build": "vue-cli-service build",
     "build-bundle": "vue-cli-service build --target lib --name index ./src/index.js"
   },

src/VideoBackground.vue

@@ -16,6 +16,7 @@
             :loop="loop"
             :preload="preload"
             :plays-when="playsWhen"
+            :playback-rate="playbackRate"
             @ready="playVideo"
             @playing="$emit('playing')"
             @error="$emit('error')"

src/components/VideoPlayer.vue

@@ -63,6 +63,7 @@ export default {
             }, 1000);
         },
         play() {
+            this.setPlaybackRate();
             this.$refs.video.play();
             this.show();
             this.$emit('playing');
@@ -91,6 +92,10 @@ export default {
         videoEnded() {
             this.$emit('ended');
         },
+        setPlaybackRate() {
+            this.$refs.video.playbackRate = this.playbackRate;
+            this.$refs.video.defaultPlaybackRate = this.playbackRate;
+        },
     },
     mounted() {
         if (this.videoCanPlay()) {

src/core/playerProps.js

@@ -24,4 +24,8 @@ export default {
         default: 'canplay',
         note: 'Google HTML Video Events',
     },
+    playbackRate: {
+        type: Number,
+        default: 1.0,
+    },
 };