2016-04-14 21 views
0

Temel olarak siteme biraz lasy yükleme kodu yapmak istiyorum.
Her youtube video küçük resmini vardır ve usarly url böyle bir şeydir:Eğer img src'nin http://img.youtube.com/vi/ ile başlayıp, herhangi bir karakterle başlayıp youtube video iframe ile değiştirilip değiştirilmediğini nasıl kontrol edebilirim?

http://img.youtube.com/vi/<THEVIDEOID>/maxresdefault.jpg 
Bunu algılamak ve eğer doğruysa, bu bir tıklama olay olabilir ve istiyorum

görüntüyü tıkladıktan sonra, sen iframe olsun ve videoyu oynayabilirsiniz.
Şimdi, internette bin ve binlerce dışarıdan bir eklenti olduğunu biliyorum, ancak başka bir kod yüklememem gerekiyor, sadece bu betik için gerçekten neccesery olan fonksiyonlar işe yarayabilir (büyük yükleme sürelerinden nefret ediyorum) başka biri gibi).
Bazen dış eklentiler bin tane var ve benim için gereksiz işlevleri kabul et, her yükü kontrol ettiğim gibi, tıklama yöntemini veya kaydırma yöntemini ve diğer istenmeyen şeyleri seçtim.
Bu yüzden kendi kendimi kurmaya çalıştığımı söyledim.
Arama sonuçlarında this post'u gördüm, ancak bunu Jquery yolunda oluşturmak istiyorum.
Not: Bu WordPress sitesine ihtiyaç duyduğundan, $ yerine jQuery kullanıyorum.
Bu ne var şimdi:

jQuery(document).ready(function() { 
     function youtubecheck(){ 
     var myregexp = /[a-z,A-Z,0-9]/g;//Regexp for videoid 
     var imageurl="http://img.youtube.com/vi/"+myregexp+"/maxresdefault.jpg";//This dosen't sounds right, I need to find out something else. 
     if (jQuery("img").attr("src")=== "imageurl"){ 
      var autoplay="?autoplay=1/"//this for iframe 
      jQuery(this).addClass("YT-image");//Obviously we need class, becouse we don't whant to do this with all images, just with YT-imgaes. 
      jQuery(".YT-image").click(function() { 
      jQuery(".YT-image").replaceWith('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+myregexp+autoplay+'" frameborder="0" allowfullscreen></iframe>');// maybe we need each for every image? Also I'm not sure about "myregexp" varible in here. 
     }); 
    } 
    } 
    youtubecheck(); 
}); 
+0

http://stackoverflow.com/questions/3452546/javascript- regex-how-to-get-youtube-video-id-from-url – Andreas

+0

@Andreas Bence bu işe yaramıyor olabilir cevabın üzerinde bu: "window.location.search.split ('v = ') [1]; '' ama sonunda bir etiketimiz var, '/ vi /' gibi ama sonunda ba değil d! – user3545446

cevap

1

koşul ve düzenli ifade

jQuery(document).ready(function() { 
    function youtubecheck() { 
    if (/img\.youtube\.com\/vi\/[a-z,A-Z,0-9]+\/maxresdefault\.jpg/g.test(jQuery("img").attr("src"))) { 
     var videoId = /img\.youtube\.com\/vi\/(.*?)\/maxresdefault\.jpg/g.exec(jQuery("img").attr("src"))[1]; 
     var autoplay = "?autoplay=1/"; //this for iframe 
     jQuery("img").addClass("YT-image"); //Obviously we need class, becouse we don't whant to do this with all images, just with YT-imgaes. 
     jQuery(".YT-image").click(function() { 
     jQuery(this).replaceWith('<iframe width="560" height="315" src="https://www.youtube.com/embed/' + videoId + autoplay + '" frameborder="0" allowfullscreen></iframe>'); // maybe we need each for every image? Also I'm not sure about "myregexp" varible in here. 
     }); 
    } 
    } 
    youtubecheck(); 
}); 

kodu Güncelleme eğer bu işleri senin Değişti

+0

Ama neden işe yaramıyor? http://jsbin.com/sedowoheci/edit?html,css,js,output – user3545446

+0

Yine de çalışmıyor. Lütfen URL'nizi URL’nizden kopyalayın, URL’nimi kopyalamayın. – user3545446

+0

http://jsbin.com/toxucibira/edit?html,css,js,output :) çalışma kopyası – LazyDeveloper