Facebook Tarzı Youtube Videosu Gösterme

 bcakir
 10 Ekim 2011

Merhaba arkadaşlar yeni bir uygulama ile karşınızdayım. Bu yazıda facebook duvarda linki girince youtube videolarının gösterilmesine benzer bir uygulama yapacağız. Uygulamamızın içeriği; facebook duvardaki gibi youtube video linkini yapıştırdığımızda videomuz sayfamıza eklenecek ve bu videoyu izleyebileceğiz. Ek olarak, bu uygulamada yine daha önceden anlattığım yükleniyor animasyonu gösterme olayını ve linki yapıştırdığımızda otomatik olarak bağlantıyı gönderme işlemini yani butona tıklamaya gerek olmadan veri iletim olayını da yapacağız. Bu uygulamamızı yapmak için Php ve JQuery kütüphanesinden yararlanacağız. Ayrıca bu uygulamamız daha önceden birçok örneğini yaptığımız uzak siteden veri alma konusuna farklı bir örnek de olacak. Bu örnekte gif resmine ihtiyacınız olduğundan dolayı, uygulamanın çalışır halinin bağlantısını yazının sonunda sizlere vereceğim. Uygulamamız kısaca böyleydi, şimdi uygulamamızın JOuery bölümünü yapmaya başlayabiliriz.

<html>
<head>
<title>Facebook Tarzı Youtube Videolarını Gösterme</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#link").bind({paste : function(){
        setTimeout("Gonderme()",200);
    }});
    $("#goster").ajaxStart(function(){
        $(this).html('<img src="yukleniyor.gif" />');
    });
    $("#goster").ajaxStop(function(){
        $(this).html('');
    });
});

function Gonderme() {
    $('#sonuc').html("");
    verim=$('#link').val();

    $.ajax({
        type:'POST',
        url:"veri.php",
        data:"veri="+verim,
        success: function (msg) {
            if(msg!='video yok'){
                $('#sonuc').html('<embed src="http://www.youtube.com/e/'+msg+'" width="600" height="400" />');
            }else{
                $('#sonuc').html('Video bulunamadı...');
            }
        }
     });
}

function Temizle(){
    $('#link').val("");
}
</script>
</head>
<body>
<input id="link" type="text" value="" style="width: 500px;"/>
<div id="goster" style="display: inline"></div>
<input type="button" value="Gönder" onclick="Gonderme()" />
<input type="button" value="Temizle" onclick="Temizle()" />
<div id="sonuc"></div>
</body>
</html>

Uygulamamızın linki alma ve iletme, yükleniyor animasyonu gösterme, link alma kutusunu temizleme ve bağlantıyı yapıştırınca otomatik olarak da veriyi Php betiğine iletme işlemini yaptık. Şimdi de uzak siteden videomuzu alma işlemini Php ile yapalım.

<?php
//veri.php olarak kaydedin
if (isset($_POST['veri'])){
    if (isset($_POST['v'])){
        $veri=trim($_POST['v']);
        echo $veri;
    }else{
        $veri=trim($_POST['veri']);
        $rest = substr($veri, -11);
        echo $rest;
    }
}else{
    echo "video yok";
}
?>

Yukarıda videonun alınma işlemini yaptık ve eğer video bulunamadıysa da geriye videonun olmadığı bilgisini gönderdik. Bu sonuçta JQuery tarafından alınıp, dönen cevaba göre video gösterimi yapılacak ya da videonun olmadığı bilgisi iletilecek. Şunu belirtmeden geçmeyim bu uygulama sadece youtube videoları içindir. Eğer başka bir video sitesi eklemek isterseniz bu uygulamayı geliştirebilirsiniz. Uygulamanın bütün dosyalarını içeren çalışır halini buradan indirebilirsiniz. Gerekli açıklamaları yaparak yazımızı tamamladık. Yararlı bir uygulama olması dileğiyle.

 2.946 Okunma

Bu yazıya 15 yorum yapılmış.

  1. gerçekten ilham verici bir yazı olmuş. baya yeni fikirler ediniyorum yazılarından

  2. bence de çok ilham verici bir yazı, klavyene sağlık 😀

  3. aaaa bende çalışmadı bu script.

    • bende bütün tarayıcılarda sorunsuz çalışıyor. fakat bazen ie de çalışmayabiliyor JQuery uygulamaları. sen hangi tarayıcıda denedin? bu arada unutmadan, uygulamada php kullanıldığım için server veya localhostda çalıştırmalısın, bunu biliyorsundur.

      • firefox 7.0.1 kullanıyorum, chrome’da denedim sonuç aynı : (
        üstelik göndere bile basmadan sonuç geliyor bilginiz olsun
        deneme adresi:
        http://biglie.swiftphp.com/calisma/bcakir_youtube/index.htm

        http://www.youtube.com/watch?v=XWCwc1_sYMY
        şarkısını denemek istedim ama video yok uyarısı var

        • uygulamalarda çıkan hataları gidermem için yorum yaptığınız için teşekkür ederim. uygulamayı localhostta geliştirmiştim ve sorunsuz çalışıyordu fakat yaptığın yorumdan sonra servera attıp denedim bende de hata verdi. bu yüzden uygulamayı değiştirdim ve yenisini yükledim. bu arada yukarıda yaptığım açıklamalarda video linki yapıştırılınca otamatik gönderme yapacağımı söylemiştim. sizden ricam uygulamaların açıklamalarını dikkatlice okumanız çünkü uygulamanın önemli detaylarını açıklama kısmına bırakıyorum. eğer otomatik gönderme istemiyorsanız aşağıdaki kodu kaldırmanız yeterlidir.
          $(“#link”).bind({paste : function(){
          setTimeout(“Gonderme()”,200);
          }});

  4. hem rica ederim hem de özür dilerim… kodlar konusunda yardımım olmuşsa ne mutlu bana. özür dilerim çünkü, açıklama kısmını geçiştirdiğim için. yeni scriptlerinizi bekliyorum sabırsızlıkla. bir önerim olacaktı, sitenize üyelik sitemi kurup maille yada mesajla gelişmeleri duyursanız daha iyi güzel olmaz mı? tekrar teşekkürler : ))

    • Bende kurmayı düşünüyordum (yeni kurdum inşallah çalışır). Umarım takipçilerimi fazla rahatsız etmem.

      • ne yazık ki çalışmıyor bende, umarım sadece sorun bendedir.. “The feed does not have subscriptions by email enabled” uyarısı var

        • Email ekleyebilme işlemini aktif hale getirmemişim. Düzelttim, şimdi ekleyebilirsin.

  5. bu şekilde alınan veriyi databasee kaydetme istenildiğinde çağırma + kendi playerımda oynatma uygulaması nasıl yapabilirim. youtube dan alıcam videoyu ama kendi playerımda sanki kendi serverımdaki videoyu oynatıyor gibi oynatmak istiyorum. kullanıcı youtube dan alındığını bilmetyeccek

    • Veritabanına video linkini ve video ismini kaydetmen lazım. Ama en önemli kısmı kendi video oynatıcını yapman lazım. Daha sonra da linki veritabanından çağırıp playerında videoyu oynatacaksın. En önemli kısmı dediğim gibi bu çünkü kendi palyerın olmazsa herkes anlar nereden kaynağını çektiğini.

  6. İLK BAŞTA YAZDIĞINIZ KODLARI NE OLARAK KAYDEDİCEZ ???.js DİĞERİNİ veri.php olarak vermişsiniz ama yukardakı ne olarak kaydedilecek bilinmiyor?

    • İstediğin ismi verebilirsin ama js olarak kaydedemezsin çünkü saf JavaScript değil, bundan dolayı uzantısı html olmalı. Örnek; index.html
      Bu arada, programlama konusunda baya yenisin galiba, Php dosyalarının nasıl çalıştığını umarım biliyorsundur. Yoksa bilgisayarında çalıştıramazsın bu örneği.

  7. Sadece php ile daha kısa yapılabilirdi.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Facebook, JQuery, Php
Kapat