Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
scrolly-video
Advanced tools
scrolly-video - npm Package Compare versions
Comparing version 0.0.1 to 0.0.2
| { | ||
| "name": "scrolly-video", | ||
| "version": "0.0.1", | ||
| "description": "A webcomponent built with svelte for scroll-based (or other externally controlled) playback.", | ||
| "version": "0.0.2", | ||
| "description": "A component for scroll-based (or other externally controlled) playback.", | ||
| "main": "dist/scrolly-video.js", | ||
@@ -24,4 +24,5 @@ "scripts": { | ||
| "video", | ||
| "webcomponent", | ||
| "svelte" | ||
| "svelte", | ||
| "react", | ||
| "vue" | ||
| ], | ||
@@ -35,2 +36,6 @@ "author": "Daniel Kao", | ||
| "devDependencies": { | ||
| "@babel/core": "^7.11.6", | ||
| "@babel/preset-env": "^7.11.5", | ||
| "@babel/preset-react": "^7.10.4", | ||
| "@rollup/plugin-babel": "^6.0.3", | ||
| "@rollup/plugin-commonjs": "^21.0.1", | ||
@@ -52,2 +57,3 @@ "@rollup/plugin-node-resolve": "^13.1.3", | ||
| "svelte": "^3.46.2", | ||
| "svelte-markdown": "^0.2.3", | ||
| "svelte-preprocess": "^4.10.2", | ||
@@ -54,0 +60,0 @@ "ua-parser-js": "^1.0.2" |
137
README.md
@@ -1,131 +0,112 @@ | ||
| # scrolly-video | ||
| # ScrollyVideo.js | ||
| *** NOTE: THIS LIBRARY IS STILL IN EARLY DEVELOPMENT STAGES *** | ||
| A component for scroll-based (or other externally controlled) playback. See [`/demos`](https://github.com/dkaoster/scrolly-video/tree/main/demos) for full example usages. | ||
| A webcomponent built with svelte for scroll-based (or other externally controlled) playback. | ||
| ## 🚀 Web | ||
| ## 🚀 Installation (Web) | ||
| Add html container to your page: | ||
| 1. Add html code to your page: | ||
| ```html | ||
| <scrolly-video src="https://your-video-url.mp4" /> | ||
| <div id="scrolly-video"></div> | ||
| ``` | ||
| 2. Require javascript in your page (before `</body>`): | ||
| Require javascript in your page and create the object (before `</body>`): | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/scrolly-video@latest/dist/scrolly-video.js" /> | ||
| <script src="https://cdn.jsdelivr.net/npm/scrolly-video@latest/dist/scrolly-video.js"></script> | ||
| <script type="text/javascript"> | ||
| new ScrollyVideo({ | ||
| scrollyVideoContainer: "scrolly-video", | ||
| src: "https://scrollyvideo.js.org/goldengate.mp4" | ||
| }); | ||
| </script> | ||
| ``` | ||
| You can replace `@latest` with specific version, example `@1.0.0`. | ||
| You can replace `@latest` with specific version, example `@0.0.2`. | ||
| Below is available a description of `options` values. | ||
| ## 🔵 React | ||
| ## 📦 Installation (NPM Module - Browserify/Webpack) | ||
| Install npm module with `npm install scrolly-video --save`: | ||
| Import component in your application: | ||
| 1. Install npm module: `npm install scrolly-video --save` | ||
| 2. Add html code to your page: | ||
| ```html | ||
| <scrolly-video src="https://your-video-url.mp4" /> | ||
| ``` | ||
| 3. Require javascript in your app: | ||
| ```javascript | ||
| require("scrolly-video"); | ||
| import ScrollyVideo from 'scrolly-video/dist/ScrollyVideo.jsx'; | ||
| ``` | ||
| or | ||
| Add the component where you need it: | ||
| ```javascript | ||
| import "scrolly-video"; | ||
| ``` | ||
| Below is available a description of `options` values. | ||
| ## 🔵 Installation (React) | ||
| 1. Install npm module with `npm install scrolly-video --save`: | ||
| 2. Import module in your `src/App.js` on header: | ||
| ```javascript | ||
| import "scrolly-video"; | ||
| ``` | ||
| 3. Add html code to your `App.js` template: | ||
| ```html | ||
| <scrolly-video src="https://your-video-url.mp4" /> | ||
| <ScrollyVideo src="https://scrollyvideo.js.org/goldengate.mp4" /> | ||
| ``` | ||
| ## 🔴 Installation (Angular) | ||
| ## 🟠 Svelte | ||
| 1. Install npm module with `npm install scrolly-video --save`: | ||
| 2. Import module in your `app/app.modules.ts` on header: | ||
| Install npm module with `npm install scrolly-video --save`: | ||
| Import component in your application: | ||
| ```javascript | ||
| import "scrolly-video"; | ||
| import ScrollyVideo from 'scrolly-video/dist/ScrollyVideo.svelte'; | ||
| ``` | ||
| 3. Add html code to your html component: | ||
| Add the ScrollyVideo component to your application: | ||
| ```html | ||
| <scrolly-video src="https://your-video-url.mp4" /> | ||
| <ScrollyVideo src="https://scrollyvideo.js.org/goldengate.mp4" /> | ||
| ``` | ||
| ## 🟠 Installation (Svelte) | ||
| ## 🟢 Vue | ||
| 1. Install npm module with `npm install scrolly-video --save`: | ||
| 2. Import module in your `src/App.svelte` on header: | ||
| Install npm module with `npm install scrolly-video --save`: | ||
| Import module in your `src/App.vue` and config: | ||
| ```javascript | ||
| import "scrolly-video"; | ||
| import ScrollyVideo from 'scrolly-video/dist/ScrollyVideo.vue'; | ||
| ``` | ||
| 3. Add html code to your html component: | ||
| Add html code to your html component: | ||
| ```html | ||
| <scrolly-video src="https://your-video-url.mp4" /> | ||
| <ScrollyVideo src="https://scrollyvideo.js.org/goldengate.mp4" /> | ||
| ``` | ||
| ## 🟢 Installation (Vue) | ||
| ## 🧰 Options / Attributes | ||
| 1. Install npm module with `npm install scrolly-video --save`: | ||
| 2. Import module in your `src/App.vue` and add webcomponent to ignoreElements of vue config: | ||
| | Parameter | Description | Values | Default | | ||
| |:----------------------|:---------------------------------------------------------------|:-----------------|:--------| | ||
| | src | The URL of the video (required) | URL | | | ||
| | scrollyVideoContainer | The DOM element of the container, only used for plain js | String / Element | | | ||
| | transitionSpeed | Sets the maximum playbackRate for this video | Number | 8 | | ||
| | frameThreshold | When to stop the video animation, in seconds | Number | 0.1 | | ||
| | cover | Forces the video to cover in it's container | Boolean | true | | ||
| | sticky | Whether the video should have `position: sticky` | Boolean | true | | ||
| | full | Whether the video should take up the entire viewport | Boolean | true | | ||
| | trackScroll | Whether this object should automatically respond to scroll | Boolean | true | | ||
| | useWebCodecs | Whether the library should use the webcodecs method, see below | Boolean | true | | ||
| | debug | Whether to log debug information | Boolean | false | | ||
| ```javascript | ||
| import Vue from "vue"; | ||
| import "scrolly-video"; | ||
| Additionally, to set currentTime manually: | ||
| Vue.config.ignoredElements = ["scrolly-video"]; | ||
| ``` | ||
| ***setCurrentTimePercent*** (`setPercentage | Number`): A number between 0 and 1 that specifies the percentage position of the video. | ||
| 3. Add html code to your html component: | ||
| ## Technical Details and Cross Browser Differences | ||
| To make this library perform optimally in all browsers, three different approaches are taken to animating the video. | ||
| ```html | ||
| <scrolly-video src="https://your-video-url.mp4" /> | ||
| ``` | ||
| ### Method 1: WebCodecs and Canvas | ||
| ## 🧰 Options / Attributes | ||
| Using the new WebCodecs API we are able to get all frames in the video and have them ready to draw to a canvas. This method is the most performant, but has two drawbacks: first, depending on the device and the size of the video, using the WebCodecs API will take some time to process all the frames, so the animation will not be available immediately upon page load. Secondly, the WebCoedecs API is currently only available on Chrome, and the WebCodecs polyfill does not work for this application. | ||
| Any props added to this element will are passed into a standard HTML `<video />` tag. | ||
| If WebCodecs is not supported by the browser or has not finished processing all frames, it falls back to method 2: | ||
| Additional parameters: | ||
| ### Method 2: HTML5 Video and playbackRate | ||
| | Parameter | Description | Values | Default value | | ||
| |-----------------|----------------------------------------------|--------|---------------| | ||
| | transitionSpeed | Sets the maximum playbackRate for this video | Number | 6 | | ||
| This method simply embeds the video with an HTML `<video>` tag, and it plays the video when the video needs to be animated. To adjust to the scroll speed, this method modulates the `playbackRate` attribute on the video in order to dynamically mimic a faster or slower scroll speed. This method is extremely smooth when the scroll direction is moving the video forward, but unfortunately does not work in reverse because `playbackRate` cannot be a negative value. | ||
| Additionally, there are two functions provided to set the currentTime: | ||
| Thus, if the video needs to be animated backwards, this library falls back to method 3. | ||
| ***setCurrentTime*** (`setTime | Number`): A number between 0 and video.duration that specifies the number of seconds into the video. | ||
| ### Method 3: HTML5 Video and currentTime | ||
| ***setCurrentTimePercent*** (`setPercentage | Number`): A number between 0 and 1 that specifies the percentage position of the video. | ||
| This method is the way that scrollytelling videos have traditionally been done, using an HTML `<video>` tag and skipping directly to frames using currentTime. However, this method requires the video to be encoded at keyframe = 1, which causes the video to be a lot larger or the quality to drop. Unfortunately, this is the only option for scenarios where methods 1 and 2 are not supported, or on mobile safari browsers where somehow this method performs better than method 2. Thus, to achieve maximum performance under all circumstances, it is still recommended to encode videos with keyframe = 1, if possible. | ||
| #### HTML Code with attributes: | ||
| --- | ||
| ```html | ||
| <scrolly-video src="https://your-video-url.mp4" /> | ||
| ``` | ||
| Created by: [Daniel Kao](https://www.diplateevo.com/) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by90.91%
21
- Lines of code
- increased by1550.85%
10714
Worsened metrics
- Total package byte prevSize
- decreased by-30.54%
10619320
- Dev dependency count
- increased by27.78%
23
- Number of lines in readme file
- decreased by-14.39%
113
- Number of medium supply chain risk alerts
- increased by50%
3
No dependency changes