Thêm video vào playlist
Ở giai đoạn trước, bạn đã tạo một ô nhập link video từ youtube để thêm video vào playlist của mình. Đến giai đoạn này, bạn sẽ thực hiện việc gọi API để lấy thông tin của của một video bất kỳ từ Youtube, sau đó thêm video vào playlist.
Để lấy thông tin của một video từ Youtube, bạn có thể sử dụng Youtube API, tuy nhiên, để giúp các bạn bỏ qua việc cấu hình phức tạp của Youtube API, WorkLabs Coding School đã tạo sẵn một API, các bạn có thể sử dụng để thay thế cho Youtube API:
https://personal-youtube-playlist.vercel.app/api/get-video
Khi gọi API GetVideo trên, bạn có thể dùng 2 loại parameter:
v
: Video ID từ Youtube. Ví dụ:https://personal-youtube-playlist.vercel.app/api/get-video?v=MMgPOQ9gJhM
url
: Link Video từ Youtube. Ví dụ:https://personal-youtube-playlist.vercel.app/api/get-video?url=https://www.youtube.com/watch?v=MMgPOQ9gJhM
Lưu ý, API của WCS sẽ chỉ trả về những thông tin cần thiết để bạn có thể tạo playlist trong khuôn khổ dự án này. Nếu bạn cần các thông tin chuyên sâu hơn, bạn có thể tìm hiểu thêm về Youtube API.
Sau khi có được thông tin video, bạn tiến hành thêm video nào vào playlist, video mới tạo sẽ hiển thị trong danh sách và người dùng có thể chọn để xem ngay sau khi thêm. Ở đây, bạn có thể sẽ phải sử dụng đến Redux để cập nhật dữ liệu playlist của mình.
Ngoài ra, bạn có thể sử dụng Local Storage để lưu trữ thông tin về playlist của mình. Thông thường, dữ liệu sẽ được lưu trữ tại một cơ sở dữ liệu như MySQL hoặc MongoDB, tuy nhiên, để dự án không quá phực tạp trong việc cấu hình, bạn có thể sử dụng tạm Local Storage.
Gợi ý cho bạn
Yêu cầu
- Tích hợp gọi API (WorkLabs API hoặc Youtube API) để lấy thông tin video
- Thêm video vào playlist và hiển thị ra danh sách
- Lưu thông tin playlist tại Local Storage cho những lần truy cập sau
Tags In
Related Posts
Leave a Reply Cancel reply
Categories
- Bài viết (1)
- Blog (24)
- Code Review (3)
- Course Introduction (2)
- CSS (4)
- CSS Grid (4)
- Javascript (2)
- Lesson (11)
- Lưu dữ liệu trên trình duyệt (1)
- Network Requests (1)
- OneDirect Projects (1)
- Product Review (3)
- Stage Content (16)
- WCS Courses Content (17)