Buradasın
Google YouTube API'si Kullanarak Müzik Arama Uygulaması Eğitimi
youtube.com/watch?v=CkI-KyBrcG0Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Tayfun Erbilen tarafından sunulan bir eğitim içeriğidir. Tayfun, Prototurk.com adresi için hazırladığı bu paylaşım videosunda, Google YouTube API'sini kullanarak müzik arama uygulaması oluşturmayı göstermektedir.
- Videoda, basit bir tasarımla oluşturulan müzik arama uygulamasının adım adım kodlanması anlatılmaktadır. Uygulama, kullanıcıların arama kutusuna müzik adı yazarak YouTube'dan sonuçları listeleme ve seçilen videoyu oynatma özelliğine sahiptir. Tayfun, jQuery kullanarak AJAX ile YouTube API'sine istek gönderme, JSON verilerini işleme ve YouTube embed kodlarını kullanarak videoları oynatma işlemlerini detaylı olarak göstermektedir. Video sonunda, uygulamanın çalışması test edilmekte ve izleyicilere kendi sitelerine benzer bir servis açmaları önerilmektedir.
- Google YouTube API ile Müzik Arama Projesi
- Tayfun Erbil, Google'ın YouTube API'sini kullanarak müzik arama ve oynatma sistemi tasarlamıştır.
- Sistem, Fizy'deki gibi arama yaparak YouTube'dan müzik dinleme imkanı sunmaktadır.
- Tasarım basit olup, arama kutusu, sonuçların listeleneceği div ve oynat div'i bulunmaktadır.
- 00:56CSS Hack ile Oynatma Çizgisi Gösterimi
- Oynatma çizgisini göstermek için CSS hack kullanılmıştır.
- Div'in genişliği 40 piksel yapılmış ve overflow-hidden özelliği eklenmiştir.
- İframe'e position absolute verilmiş ve top: -263px ile yukarıya çekilerek çizgi gösterilmiştir.
- 01:36jQuery ile Arama İşlemi
- jQuery kodu çağrıldıktan sonra butona "ara" id'si atanmıştır.
- Butona tıklandığında, input'tan alınan değer trimlenerek boş değilse işlem gerçekleştirilmiştir.
- AJAX metodu kullanılarak GET isteği yapılmış ve JSON formatında veri alınmıştır.
- 03:33Sonuçların Listelenmesi
- AJAX başarılı olduğunda, sonuçlar div'ine içerik eklenmiştir.
- Eğer sonuç yoksa "Aradığınız nedir? Hiç sonuç bulunamadı" mesajı gösterilmiştir.
- Sonuç varsa, her video için id ve başlık bilgileri alınarak div'e eklenmiştir.
- 09:00YouTube Oynatma Fonksiyonu
- YouTube oynatma fonksiyonu oluşturulmuş ve fade-in efekti uygulanmıştır.
- Oynatma div'ine embed kodu eklenerek video oynatılmıştır.
- Video otomatik oynatma (auto-play) özelliği ve %100 genişlik, 300 yükseklik değerleri verilmiştir.