[Live coding] Vue JS from scratch: Embeddded YouTube Video Replayer With Plyr
If you enjoyed this video, consider supporting me via patreon: bit.ly/patreon-aj
In this video, I will create a vue web app
from scratch that loops an embedded YouTube video
between two user defined start and end times.
This video has very minor edits and is to reflect
in real time what it's like to be a software engineer.
0:00 Introduction
1:37 Why Version Control is important
2:32 Creating a github repository and setting up the vue web app
4:40 About dependencies (package.json)
5:40 Starting the local server
6:15 Making a small change and visually seeing the difference
6:50 Routes in Vue
7:30 Adding a new route and page
7:45 Developer tooling within the browser: Console
9:00 Sections within a vue component file: template, style (css), and script
10:45 Making the codebase a github repository
11:45 Making the first commit (with a commit message)
14:33 Looking at the github repository, it should match what on your local machine.
15:03 Embedding a YouTube video via Plyr vue library (vue-plyr)
23:40 Using vue to log the current time within the Plyr video player.
24:40 Use of a vue ref to refer to an html template. Use of mounted and setup methods for the vue component, we can set the player and log the time.
https://vuejs.org/guide/essentials/te...
27:00 Use of setInterval to return the current time (float) of the video
28:40 Adding buttons to capture start and end times and use of the `ref` method which will show values of a variable in real time.
42:30 Debugging through an issue where I forget to use .value
46:35 Adding a reset button
48:30 Adding a way for a user to enter a video ID dynamically
1:01:25 Deploying the vue app somewhere publicly online
1:04:14 npm run build and figuring out how to work through lint issues
1:10:55 It is successfully deployed
Смотрите видео [Live coding] Vue JS from scratch: Embeddded YouTube Video Replayer With Plyr онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь AJ The Engineer 31 Декабрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 575 раз и оно понравилось 8 людям.