Как да разработите уеб приложение за търсене на видеоклипове в YouTube/клонинг на YouTube, като използвате само HTML, CSS, JavaScript (jQuery) и API на YouTube.
Това е урок за „Как да разработим YouTube Video Search We App/ YouTube Clone с помощта на HTML, CSS и JavaScript (jQuery)“. Ще премина през всичко от дизайна на HTML страницата, демонстрацията на API на YouTube до целия javascript, който е необходим, за да работи приложението. Пиша тази публикация, защото смятам, че създаването на приложение като това е един от най-добрите начини за практикуване на уеб разработка. Също така е полезно за вашата автобиография, където можете да добавите проекти като тези, за да покажете своите умения и креативност.
1. Създаване на HTML страницата
Нека започнем да създаваме нашия YouTube клонинг, като първо запишем HTML.
Импортирах няколко допълнителни библиотеки/модули. По-долу можете да видите какво имам в тага ‹head›.
А ето и етикета ‹body› —
Опитах се да направя прилично оформление, нищо прекалено сложно. Надявам се, че е лесно за разбиране. Взех 2 колони, едната за видео плейъра (iFrame), а другата съдържа списъка с видеоклипове, които отговарят на заявката на потребителя. В горната част има лента за търсене.
При зареждане, по подразбиране, имаме един видеоклип, който вече е зададен в youtube iFrame, ние актуализираме тази iframe „src“стойност, когато потребителят кликне върху нов видеоклип от списъка .
Ето как изглежда интерфейсът в началото -
А ето и демонстрация на завършеното уеб приложение за клониране на YouTube —
2. Магията на JavaScript започва! (jQuery🕺🏻)
JavaScript частта на проекта може да изглежда сложна, ако преди това не сте имали добра практика в изграждането на такива приложения. Но това е добре. Ще се постарая да обясня всичко и не се обезсърчавайте. Обещавам, че целият код ще има смисъл, когато преминем през него.
Позволете ми да ви направя преглед на логиката, която прилагаме, преди да я приложим.
JavaScript – Идея / Упътване
- Когато получим въведени данни в лентата за търсене, извикваме API на YouTube и получаваме резултати, които отговарят на тази заявка.
- След като получим някакви резултати, ние ги съхраняваме в списък или масив, като метаданните на всеки видеоклип са в речник или обект в този масив. И така, ще създадем обекти за всеки видеоклип и след това ще добавим всички тези в масив.
- След като създадохме този масив от видео обекти, ще преминем през него и ще създадем нашите div, които се показват от дясната страна на нашия преден изглед.
- Това е всичко за получаване на резултати от търсенето. След като имаме списък, показан в нашия браузър, ще добавим просто onClick към тези видеоклипове или към бутон, както правим тук.
- Функцията onClick ще актуализира атрибута iFrames„src” и ще замени идентификационния номер на видео на вече възпроизвеждания видеоклип с идентификаторът на видеоклипа, върху който щракнахме от списъка. И това е почти всичко, което правим в целия проект.
Нека сега преминем през всяка функция една по една.
функция ‘keyup’ за лентата за търсене —
Тази функция се изпълнява винаги, когато има въвеждане в лентата за търсене. Ние съхраняваме въведената стойност и след като потребителят въведе 4 знака или повече, ние извикваме youtube API и създаваме нашия списък с видеоклипове.
След като списъкът е създаден, ние извикваме displayList(), за да покажем видеоклиповете на сайта. Прочетете подробно за всяка функция по-долу.
callAPI(термин) –
Тази функция е асинхронна, защото ще изчакаме, докато получим резултатите от извикването на API.
Изпращаме заявка GET до крайната точка на API за търсене на YouTube (https://www.googleapis.com/youtube/v3/search) с някои параметри.
- q – думата за търсене, която искаме да търсим.
- ключ – нашият API ключ на Google.
- част – това, което искаме да получим от API в неговия отговор. „Фрагмент“ще ни даде заглавие на видеоклипа, име на канала, идентификатор, миниизображение и много повече информация. Прочетете повече за това тук.
- maxResults – колко видеоклипа искаме в отговора от API.
createList(items) –
Тази функция създава списък с видео обекти. Първо създаваме обект temp_data (двойка ключ-стойност) за всеки елемент в отговора(items) на API и след това добавяме всеки от обектите в списък, наречен listToDisplay.
Взимаме данни от ключа фрагмент, който е включен в отговора, който получихме от API (елементи).
Ето как изглежда обектът за отговор за един видео елемент –
displayList(видеоклипове) –
Тази функция взема масива от видео обекти, който създадохме по-горе, и показва всеки от видео елементите в предния край.
Ние преминаваме през масива, създаваме div за всеки видеоклип и след това добавяме този div към div, който вече имаме на нашата страница с клас от video-list. Към всеки видео div ние също добавяме бутон за възпроизвеждане. Този бутон има ID стойност, същата като ID на самия видеоклип. Направихме това, така че когато щракнем върху възпроизвеждане на конкретен видеоклип, да можем да получим неговия идентификатор само като получим идентификатора на бутона.
Забележете, че имаме тази част от кода в горната част –
$(‘.video-list-item’).remove();
Този код премахва всички съществуващи видео divs, които вече имахме на страницата, защото не искаме старите резултати от търсенето да останат на страницата. Тази функция ще се изпълнява всеки път, когато потребителят въведе нещо в лентата за търсене, така че първо трябва да премахнем старите резултати от търсенето и след това да добавим нови.
playNewVideo(id,title,desc) –
В тази функция задаваме src на iFrame да сочи към избрания ID на видеоклипове, така че да започне възпроизвеждането на избрания видеоклип вместо стария.
Тази функция се извиква, когато се щракне върху бутона за възпроизвеждане от div videos. Докато извикваме playNewVideo(), ние предаваме идентификатора на видеоклипа, който сме присвоили на самия бутон, заглавието на видеоклипа и неговия описание.
След като преминем тези 3 параметъра, сега можем –
- задайте src на iFrame, за да включва новите идентификатори на видеоклипове. (/вграждане/[нов идентификатор]/)
- Добавете новото заглавие под iframe.
- Добавете описанието на видеоклипа под заглавието.
Отново премахваме старото заглавие и описание, преди да добавим нови под iframe.
onClick() за бутона за възпроизвеждане–
Тази функция се извиква, когато натиснем бутона за възпроизвеждане от списъка с видеоклипове вдясно.
Когато създадохме тези видео div, ние дадохме на този бутон ID, който е равен на ID на видеоклипа, който представлява.
Така че получаваме ID, заглавие и описание. Използвайки тези 3 стойности, ние извикваме playNewVideo(). След това добавяме червена рамка към този видео div, за да подчертаем, че този видеоклип в момента е избран.
И както преди, ние първо премахваме всички съществуващи червени граници, които може да присъстват на друг видеоклип, използвайки кода –
$(‘.border-danger’).removeClass(‘border-danger’)
Ето целия JavaScript файл —
И HTML -
И CSS също -
Това е всичко. Има нашия сладък малък „клонинг в YouTube“. 💕
Уведомете ме дали публикацията ми е била полезна чрез коментар 🖊️ или ако имате някакви въпроси/предложения/отзиви.
Извинявам се, ако кодът не беше лесен за четене, не успях да го форматирам добре за използване в тази публикация. Но можете да намерите файловете в моя GitHub.
Благодарим ви, че прочетохте. Късмет ❤
