Merge pull request #12 from samAbeywickrama/feat/samAbeywickrama/#4

Feat/sam/abeywickrama/#4

Author: samAbeywickrama

README.md

@@ -48,23 +48,34 @@ import poster from "./img/poster.jpg";
 
 [**sandbox**](https://codesandbox.io/s/sharp-poitras-qdync)
 
+## FAQ
+
+1. How to show the poster if video has finished.
+
+    This can be implemented with `onEnded` event handler. You could create an overlay and show it at the end of the video. Please have a look at this [**example**](https://github.com/samAbeywickrama/reactjs-videobg/blob/master/examples/cra/src/showPosterOnEnd)  
+
+    
+
 ## API
 
 ### `<VideoBg />`
 
-| Prop         | Type      | Default | Required | Description                                             |
-| ------------ | --------- | ------- | -------- | ------------------------------------------------------- |
-| wrapperClass | `String`  | none    | no       | className name for wrapper element.                     |
-| videoClass   | `String`  | none    | no       | className name for video element.                       |
-| loop         | `Boolean` | `true`  | no       | Video will start over again.                            |
-| autoPlay     | `Boolean` | `true`  | no       | Video will start playing as soon as it is ready.        |
-| poster       | `String`  | none    | no       | The image to be shown while the videos are downloading. |
-| muted        | `Boolean` | `true`  | no       | Should audio of the video be muted?                     |
+| Prop         | Type       | Default | Required | Description                                             |
+|--------------|------------|---------|----------|---------------------------------------------------------|
+| wrapperClass | `String`   | none    | no       | className name for wrapper element.                     |
+| videoClass   | `String`   | none    | no       | className name for video element.                       |
+| loop         | `Boolean`  | `true`  | no       | Video will start over again.                            |
+| autoPlay     | `Boolean`  | `true`  | no       | Video will start playing as soon as it is ready.        |
+| poster       | `String`   | none    | no       | The image to be shown while the videos are downloading. |
+| muted        | `Boolean`  | `true`  | no       | Should audio of the video be muted?                     |
+| onEnded      | `Function` | none    | no       | Triggers on video end                                   |
+| onPlay       | `Function` | none    | no       | Triggeres on play                                       |
+| onPlaying    | `function` | none    | no       | Triggers on each time the video loops                   |
 
 ### `<VideoBg.Source />`
 
 | Prop | Type     | Default | Required | Description                      |
-| ---- | -------- | ------- | -------- | -------------------------------- |
+|------|----------|---------|----------|----------------------------------|
 | src  | `String` | none    | yes      | static file or video file source |
 | type | `String` | none    | yes      | video type                       |
 

examples/cra/package-lock.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1",
+    "react-scripts": "^3.4.0",
     "reactjs-videobg": "file:../.."
   },
   "scripts": {

examples/cra/package.json

@@ -0,0 +1,12 @@
+.overlay {
+  background: url(../img/poster.jpg);
+  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 1;
+}
+.form {
+  position: relative;
+  z-index: 2;
+}

examples/cra/src/showPosterOnEnd/ShowPosterOnEnd.css

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import VideoBg from "reactjs-videobg";
+import ogg from "../videos/Neon.ogg";
+import webm from "../videos/Neon.webm";
+import mp4 from "../videos/Neon.mp4";
+import poster from "../img/poster.jpg";
+import "../styles.css";
+import './ShowPosterOnEnd.css';
+
+function ShowPosterOnEnd() {
+
+  const [isEnded, setIsEnded] = useState(false)
+
+  const handleOnEnded = () => {
+    setIsEnded(true)
+  }
+
+  return (
+    <div className="App">
+      <VideoBg
+        poster={poster}
+        onEnded={handleOnEnded}
+        loop={false}
+      >
+        <VideoBg.Source src={ogg} type="video/ogg" />
+        <VideoBg.Source src={webm} type="video/webm" />
+        <VideoBg.Source src={mp4} type="video/mp4" />
+      </VideoBg>
+
+      <div className="form">
+        <input type="text" placeholder="Email" />
+        <input type="password" placeholder="Password" />
+        <button>Login</button>
+      </div>
+
+      {isEnded && <div className='overlay'></div>}
+    </div>
+  );
+}
+
+export default React.forwardRef(ShowPosterOnEnd);