Knowing (film)
2009
Search results
- Trailers & Clips
Video Optimization. This page outlines how to use videos with Next.js applications, showing how to store and display video files without affecting performance.
Import videos (mp4, webm, ogg, swf, ogv) in Next.js.. Latest version: 1.4.1, last published: a year ago. Start using next-videos in your project by running `npm i next-videos`. There are 8 other projects in the npm registry using next-videos.
- Overview
- Setup
- Usage
- Required Permissions for Amazon S3
- Roadmap
- Trying it out locally
Next video is a react component for adding video to your next.js application. It extends both the element and your Next app with features for automatic video optimization.
•Smart storage: Store large video files outside of your git repo
•Auto optimized: Optimize video files and deliver via CDN for better playback performance and quality
•Customizable UI: Choose from themes or build your own player controls
•Posters & Previews: Zero-config placeholder images and timeline hover thumbnails
•Wider compatibility: Use videos that aren’t supported natively by all browsers
Install the package Run the init wizard
This will (with prompting): •install next-video as a dependency •update your next.config.js file •if you're using TypeScript, add types for your video file imports •create a /videos directory in your project which is where you will put all video source files. It will also add a .gitignore file to the /videos directory that ignores video files. Videos, particularly any of reasonable size, shouldn't be stored/tracked by git. Alternatively, if you'd like to store the original files you can remove the added gitignore lines and install git-lfs.
Remote storage and optimization
Vercel recommends using a dedicated content platform for video because video files are large and can lead to excessive bandwidth usage. By default, next-video uses Mux, which is built by the the creators of Video.js, powers popular streaming apps like Patreon, and whose video performance monitoring is used on the largest live events in the world. •Sign up for Mux •Create an access token •Add environment variables to .env.local (or however you export local env variables)
OPTIONAL Manual Setup
If you choose to do any of the init steps manually.
Local videos
Add videos locally to the /videos directory then run npx next-video sync. The videos will be automatically uploaded to remote storage and optimized. You'll notice /videos/[file-name].json files are also created. These are used to map your local video files to the new, remote-hosted video assets. These json files must be checked into git. You can also add next-video sync -w to the dev script to automatically sync videos as they're added to /videos while the dev server is running. Now you can use the component in your application. Let's say you've added a file called awesome-video.mp4 to /videos While a video is being uploaded and processed, will attempt to play the local file. This only happens during local development because the local file is never uploaded to your git repo.
Remote videos
For videos that are already hosted remotely (for example on AWS S3), import the remote URL and refresh the page. This creates a local JSON file in the /videos folder and the sync script will start uploading the video. If the hosted video is a single file like an MP4, the file will be automatically optimized for better deliverability and compatibility.
Custom Player
You can customize the player by passing a custom player component to the as prop. The custom player component accepts the following props: •asset: The asset that is processed, contains useful asset metadata and upload status. •src: A string video source URL if the asset is ready. •poster: A string image source URL if the asset is ready. •blurDataURL: A string base64 image source URL that can be used as a placeholder.
If you're using Amazon S3 as the provider, you'll need to create a new IAM user with the following permissions:
v0
•Automatic video optimization •Delivery via a CDN •Automatically upload and process local source files •Automatically process remote hosted source files
v1
•Customizable player •Connectors for additional video services •AI captions
If you want to develop on this thing locally, you can clone and link this sucker. Just know...it's not a great time right now.
1.Clone this repo
2.cd into the repo
3.npm install && npm run build
4.cd ../ (or back to wherever you want to create a test app)
5.npx create-next-app
People also ask
What is next video?
How do I sync NPX next-video with MUX?
Where can I find a list of top trending videos in 2022?
What's new in the new video design?
Dec 1, 2022 · YouTube has highlighted the top trending videos of 2022, alongside a couple of other lists, such as top shorts, top creators, and top songs.
- stan@mashable.com
- 7 min
- Senior Editor
- Stan Schroeder
Dec 1, 2021 · Dec 01, 2021 – minute read. The sequels, streams, and stories you watched this year.
- Madeline Buxton
18.3K subscribers ‧ 592 videos. Subscribe to the Next channel for an exclusive look at the latest trends, recent events and behind the scenes action from one of Britain's biggest retailers....
Nov.07.2019. Starting today, we’re bringing you the new YouTube homepage — a design that brings more features to the viewing experience on Home to help you find the next great video to watch. The updated design will begin rolling out today across desktops and YouTube apps on Android and iOS tablets, and will be available to everyone soon.
