Merge pull request #22 from blakewilson/2.0.2

2.1.0
blakewilson · Apr 12, 2021 · 64c0b21 · 64c0b21
2 parents 6d2d1ae + b7008a5
commit 64c0b21
Show file tree

Hide file tree

Showing 38 changed files with 9,273 additions and 6,012 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,21 @@
+name: Publish
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm install
+      - run: npm run build
+      - run: npm test
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/.gitignore b/.gitignore
@@ -81,4 +81,9 @@ typings/
 .fusebox/
 
 # DynamoDB Local files
-.dynamodb/
+.dynamodb/
+
+# Do not version dist
+dist
+
+.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/ATTRIBUTION b/ATTRIBUTION
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Blake Wilson
+Copyright (c) 2021 Blake Wilson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -2,82 +2,102 @@
 
 A minimal vanilla JavaScript video background plugin.
 
-# Working With Wordpress
+## Compatibility
+
+- All modern web browsers
+- IE 11+
+- All mobile web browsers that support autoplaying HTML5 `<video>`
+
+## Working With Wordpress
 
 If you plan on using vidbg.js with WordPress, make your life a little bit easier and download the plugin I made on the [Wordpress Repo](https://wordpress.org/plugins/video-background/).
 
-# Compatibility
+## Usage
 
-* All modern web browsers
-* IE 11+
-* All mobile web browsers that support autoplaying HTML5 `<video>`
+### Install
 
-# Instructions
+```bash
+npm install vidbg.js
+```
 
-To get started, [download the script](https://github.com/blakewilson/vidbg/releases/latest.zip). Once you have downloaded the script, include it in your project:
+### Instructions
+
+In the browser:
 
 ```html
 <!-- <head> -->
-<link href="dist/vidbg.css" rel="stylesheet" type="text/css">
+<link href="dist/vidbg.css" rel="stylesheet" type="text/css" />
 
 <!-- End of <body> -->
 <script src="dist/vidbg.js"></script>
 ```
 
-## Initializing the Script
+Or if you are working with modules:
+
+```js
+import vidbg from "vidbg.js";
+```
+
+### Initializing the Script
 
 The script accepts three arguments.
 
 ```js
-var instance = new vidbg(selector, options, attributes)
+var instance = new vidbg(selector, options, attributes);
 ```
 
 The selector argument is any JavaScript selector, the [options](https://github.com/blakewilson/vidbg/tree/v2#options) are for configuring vidbg.js, and the [attributes](https://github.com/blakewilson/vidbg/tree/v2#attributes) argument modifies the actual `<video>` element.
 
 ```js
-
-var instance = new vidbg('.vidbg-box', {
-  mp4: 'http://example.com/video.mp4', // URL or relative path to MP4 video
-  webm: 'path/to/video.webm', // URL or relative path to webm video
-  poster: 'path/to/fallback.jpg', // URL or relative path to fallback image
-  overlay: false, // Boolean to display the overlay or not
-  overlayColor: '#000', // The overlay color as a HEX
-  overlayAlpha: 0.3 // The overlay alpha. Think of this as the last integer in RGBA()
-}, {
-  // Attributes
-})
+var instance = new vidbg(
+  ".vidbg-box",
+  {
+    mp4: "http://example.com/video.mp4", // URL or relative path to MP4 video
+    webm: "path/to/video.webm", // URL or relative path to webm video
+    poster: "path/to/fallback.jpg", // URL or relative path to fallback image
+    overlay: false, // Boolean to display the overlay or not
+    overlayColor: "#000", // The overlay color as a HEX
+    overlayAlpha: 0.3, // The overlay alpha. Think of this as the last integer in RGBA()
+  },
+  {
+    // Attributes
+  }
+);
 ```
+
 Note: Supplying both `.mp4` and `.webm` will increase browser compatibility.
 
-## Options
+### Options
 
 ```js
 const defaultOptions = {
   mp4: null,
   webm: null,
   poster: null,
   overlay: false,
-  overlayColor: '#000',
-  overlayAlpha: 0.3
-}
+  overlayColor: "#000",
+  overlayAlpha: 0.3,
+};
 ```
 
-## Attributes
+### Attributes
 
 ```js
 const defaultAttributes = {
   autoplay: true,
   controls: false,
   loop: true,
   muted: true,
-  playsInline: true
-}
+  playsInline: true,
+};
 ```
 
-## Overlay
+### Overlay
+
 Setting the `overlay` option to `true` will add an RGBA background over your video. This is helpful when you want to display text or meaningful content over the video background to increase legibility.
 
-## Fallback Image Flashing
+### Fallback Image Flashing
+
 You may experience the fallback image flash on page load. This is because the fallback image is added through JavaScript. As a result of this, it will load after CSS styles are rendered.
 
 If you'd like to combat this, you can preset the fallback image through CSS. For example, if your selector is `.video-box` you could do something like:
@@ -88,25 +108,41 @@ If you'd like to combat this, you can preset the fallback image through CSS. For
 }
 ```
 
-## Methods
+### Methods
 
 Below are the methods that are available:
 
 ```js
 // First, create the vidbg.js instance.
-var instance = new vidbg('.vidbg-box', {
-  mp4: 'http://example.com/video.mp4',
-  webm: 'path/to/video.webm',
-  poster: 'path/to/fallback.jpg',
-})
+var instance = new vidbg(".vidbg-box", {
+  mp4: "http://example.com/video.mp4",
+  webm: "path/to/video.webm",
+  poster: "path/to/fallback.jpg",
+});
 
 // Manually resize the video background
-instance.resize()
+instance.resize();
+
+// Manually play the video
+instance.playVideo();
+
+// Manually pause the video
+instance.pauseVideo();
+
+// Get the video playing state
+instance.isVideoPlaying();
 
 // Remove the <video> element
-instance.removeVideo()
+instance.removeVideo();
+
+// Completely remove the video background
+instance.destroy();
 ```
 
-# License
+## Media
+
+Video and fallback image provided by Christophe Tauziet at https://vimeo.com/user27974867
+
+## License
 
 vidbg.js is licensed under The MIT License. You can view it [here](https://github.com/blakedotvegas/vidbg/blob/master/LICENSE).
diff --git a/demo/css/fullscreenDemo.css b/demo/css/fullscreenDemo.css
diff --git a/demo/css/insideElementDemo.css b/demo/css/insideElementDemo.css
diff --git a/demo/elementDemo.html b/demo/elementDemo.html