Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
lazyvids - npm Package Compare versions
Comparing version 0.0.2 to 0.0.3
| { | ||
| "name": "lazyvids", | ||
| "version": "0.0.2", | ||
| "description": "A small utility to lazily autoplay HTML5 videos.", | ||
| "version": "0.0.3", | ||
| "description": "A small utility to lazy-load autoplay HTML5 videos once they enter the viewport.", | ||
| "main": "dist/lazyvids.js", | ||
@@ -6,0 +6,0 @@ "repository": { |
| # lazyvids.js | ||
| Lazy-load autoplaying HTML5 video the easy way. | ||
| A small utility to lazy-load autoplay HTML5 videos once they enter the viewport. | ||
| ## Installation | ||
| Install using your favourite package manager. | ||
| ```shell | ||
| $ yarn add lazyvids.js | ||
| $ yarn add lazyvids | ||
| ``` | ||
@@ -14,6 +16,7 @@ | ||
| ```js | ||
| import 'lazyvids.js'; | ||
| import 'lazyvids'; | ||
| ``` | ||
| ## Usage | ||
| lazyvids.js works by setting attributes on HTML5 video elements, and playing the videos once they are scrolled into view. | ||
@@ -30,7 +33,14 @@ | ||
| ```html | ||
| <video data-lazyvids muted playsinline poster="poster.jpg" preload="metadata" src="example.mp4"></video> | ||
| <video | ||
| data-lazyvids | ||
| muted | ||
| playsinline | ||
| poster="poster.jpg" | ||
| preload="metadata" | ||
| src="example.mp4" | ||
| ></video> | ||
| <video data-lazyvids muted playsinline preload="metadata" poster="poster.jpg"> | ||
| <source src="example.webm" type="video/webm"> | ||
| <source src="example.mp4" type="video/mp4"> | ||
| <source src="example.webm" type="video/webm" /> | ||
| <source src="example.mp4" type="video/mp4" /> | ||
| </video> | ||
@@ -40,21 +50,23 @@ ``` | ||
| ## Options | ||
| Configuration options are available using a `lazyvidsConfig` object on the global `window` object. This must be included in the HTML before the `lazyvids.js` script. | ||
| Configuration options are available using a `lazyvidsConfig` object on the global `window` object. This must be included in the HTML before the `lazyvids` script. | ||
| ```html | ||
| <script> | ||
| window.lazyvidsConfig = { | ||
| logLevel: 'silent', | ||
| ignoreHidden: false, | ||
| minBandwidth: 0, | ||
| reduceData: false, | ||
| requirePoster: true, | ||
| }; | ||
| window.lazyvidsConfig = { | ||
| logLevel: 'silent', | ||
| ignoreHidden: false, | ||
| minBandwidth: 0, | ||
| reduceData: false, | ||
| requirePoster: true, | ||
| }; | ||
| </script> | ||
| ``` | ||
| |**Option**|**Type**|**Default Value**|**Description**| | ||
| |:-----|:-----:|:-----:|:-----| | ||
| |`logLevel`|`string`|`silent`|Set logging level: `verbose`, `warn`, `silent`.| | ||
| |`ignoreHidden`|`boolean`|`false`|Set whether to skip `<videos>` with `display: hidden`.| | ||
| |`minBandwidth`|`number`|`0`|If `reducedData` is `true`, set threshold above which videos will play.| | ||
| |`reduceData`|`boolean`|`false`|If `true`, will not play videos if data saver is enabled or bandwidth is below `minBandwidth`.| | ||
| |`requirePoster`|`boolean`|`true`|When `false`, will not lazy-play video if poster image is missing.| | ||
| | **Option** | **Type** | **Default Value** | **Description** | | ||
| | :-------------- | :-------: | :---------------: | :--------------------------------------------------------------------------------------------- | | ||
| | `logLevel` | `string` | `silent` | Set logging level: `verbose`, `warn`, `silent`. | | ||
| | `ignoreHidden` | `boolean` | `false` | Set whether to skip `<videos>` with `display: hidden`. | | ||
| | `minBandwidth` | `number` | `0` | If `reducedData` is `true`, set threshold above which videos will play. | | ||
| | `reduceData` | `boolean` | `false` | If `true`, will not play videos if data saver is enabled or bandwidth is below `minBandwidth`. | | ||
| | `requirePoster` | `boolean` | `true` | When `false`, will not lazy-play video if poster image is missing. | |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.28%
16117
- Number of lines in readme file
- increased by22.81%
70
No dependency changes