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);