Vue.js custom Video Player from scratch!

Set up the development environment for a Vue.js video player with Vuclip, scaffold a new project, and install the beautify package to begin building the player.

Build a reusable Vue.js player component from scratch, render a video from assets, and center a 960px container using display flex and align center with full-height sizing.

Size the video player to a 16 by 9 aspect ratio using percentage padding, then position the video absolutely inside a responsive container to preserve the ratio as it resizes.

Learn to build a custom reusable slider component with a bar, handle, and fill in a Vue.js video player from scratch, including folder structure, component isolation, and basic styling.

build a vue.js slider component from scratch with an interactive outer container, a fill bar, and a handle; compute value from drag position and throttle resize events for smooth animation.

Develop a custom Vue slider for a video player by implementing click and drag with mouse events, drag start and end, position calculations, clamped relative x, and two-way v-model binding.

Build a custom video player toolbar from scratch in Vue.js, featuring a bottom-positioned gradient background, play/pause and volume controls, a custom sound slider, time label, and a full-screen button.

Implement a play and pause toggle for a custom video player using the button, video click, and spacebar, with play/pause events updating the playing state and icons.

Implement a toggle mute button and volume slider for a Vue.js video player, syncing mute state and icons with volume changes and auto muting when volume reaches zero.

Sync the video's current time and duration using loaded metadata, then update on time update; format seconds into hours, minutes, and seconds with a simple package for the time label.

Implement full screen functionality for the vue.js video player using the full screen API and the screenfull wrapper, with change events and icon toggling.

Implement the seeker for the Vue.js video player by wiring a duration slider to the video, enabling current time updates and seeking, with a slot-driven buffer bar.

Learn to implement a dynamic buffer bar in a Vue.js video player by using TimeRanges and the progress event to compute the current buffer ratio, including how seeking affects buffers.

Build a Vue.js from-scratch video player spinner that responds to the loading, data, waiting, and can play events, showing a circular progress indicator during loading or buffering.

Finish and refine the Vue.js video player by adding a dynamic source prop passed from the parent, validating the object and reloading the video on source changes, with ui polish.