The website for the Video Codification Systems course at Pompeu Fabra University. It contains all the content of the subject, along with video lessons and a video encoding tool.

The website is live and hosted at: https://video-encoding-course.vercel.app/

About the online video encoder

The section 'Web Tools' of the website includes a web GUI to transcode video (or images) using ffmpeg. Simply drag the file to encode, choose the new format and resolution, and click 'Start'.

About improving the theory lessons

Anyone can propose an improvement to any theory page by clicking the 'GitHub' button at the bottom of each lesson. This site aims to be flexible and to update its information to be as useful as possible to students.

Technology

This is a Next.js project bootstrapped with create-next-app that uses the next-mdx-remote library, which allows MDX content to be loaded via getStaticProps or getServerSideProps. The MDX content is loaded from a local folder, but it could be loaded from a database or anywhere else. It is deployed with the Vercel Platform.

The following libraries have been used:

• TailwindCSS
• ffmpeg.wasm
• react-dropzone

Run it locally

Download the repository, and install the dependencies npm install. Afterward, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the project.

Design

You can find a hi-fi mockup design using Figma here.

---

References

Typography: Playfair Display, Source Sans Pro, Source Code Pro.

This website was developed as part of the Video Codification Systems course of the Audiovisual System Engineering Degree at Universitat Pompeu Fabra, Barcelona.

License: MIT