10 Temmuz 2013, ÇARŞAMBA

6. Html5 Javascript Css Tasarım Eğitimi Özel Video Oynatıcı Kontrolleri

Html beş video kontrolleri özelleştirme nihai kısmına hoş geldiniz Haber medyası video oynatıcı özelleştirme için bazı tasarım ipuçlarını gösterecektir Belirli bir marka veya belirli bir site tasarımı maç ve ben herkese hatırlatmak istiyorum yaş tml beş c soy ve bazı javascript işlevselliği henüz tüm tarayıcı yazılımı çalışmaya bağlı olamaz ortamlar şimdi bir kez bu teknolojileri kınıyoruz standardize edilir bağlıdır Onları yönüyle çalışmak ve o olacak çok yakında olacakları İlk en biz bıraktığı ne bir göz atalım Gerçekten biz standart özel programı video için ihtiyacınız olan tüm bileşenleri oyuncu standart b

ir oyuncu olmasını beklediğiniz tüm kontrolleri ile Şimdi yapmak istediğim ilk şey şekilde özelleştirmek olduğunu kaymak bileşenleri bakmak i varsayılan kaymak bileşeni görünüm sevmiyorum çünkü böylece biz sadece bazı kullanab

ilirsiniz Basit c_s_ s Bu etkiyi elde etmek için Sağ yüzden stil öğesi girmek ve bu kodu poppin zaman aslında olduğunu tüm giriş tipi aralığı elemanları sayfanızda ve ayrıca i_d_ tarafından bu çağırabilirsini

“Ders Kodu: http://www.developphp.com/video/JavaScript/Video-Player-Controls-CSS-Design-Tutorial HTML5 video kontrolleri özelleştirme 6 ve son bölümü. Bu videoda b...”
Adam Khoury

z veya sınıfadı Daha fazla dizi var isterseniz Bu yolla tarzı değildir sayfanızda elemanları Daha sonra istediğiniz tarafından bu ses kaydırıcı hafif istiyor hedef i_d_ veya sınıfın bu unsurları vermek, onlara sınıf verip uygulamak Bu kurallar Bu sınıfa ama ben burada yapıyorum zaman sadece hedefleyen tüm giriş tipi düzenlemek sayfamda elemanları böylece stres kontrolü dosyasını kaydetmek için ve şimdi en küçük bir uygulama tazeleyelim Doğru bu y

6. Html5 Javascript Css Tasarım Eğitimi Özel Video Oynatıcı Kontrolleri Resim 1 6. Html5 Javascript Css Tasarım Eğitimi Özel Video Oynatıcı Kontrolleri Resim 2 6. Html5 Javascript Css Tasarım Eğitimi Özel Video Oynatıcı Kontrolleri Resim 3 6. Html5 Javascript Css Tasarım Eğitimi Özel Video Oynatıcı Kontrolleri Resim 4

üzden şimdi ben benim kendi küçük özel olmasını istiyorsanız sürgünün tam tür var nabi ve benim kendi küçük özel bu nabi olduğunu izlemek boyunca kayan Eğer bu kare olabilir istiyorum o herhangi bir renkli şekil yapmak yolu i o yuvarlak küçük düğmeleri olması lazım ve ağız yapmak onlar üzerinden gitmek o küçük eli sembolü kullanmaktır İmleç işaretçi Burada el sembolünü yapmak gibi bir düğme oldu ve bana tam güzel genelgeyi veren sınır yarıçapı yüz etkiler O elemanın aksi olurdu mükemmel bir kare animasyonlu beyaz arka plana sa

hip uçlu boyutları onbeş yuvarlak ve biz görünüm için webkit öneki kullanmak Onlara dokuz değerini verir Şimdi gelecekte hemen orada web dere öneki kaldırmak olabilir eğer ve orada ve sağ gelecekte en tarama ortamlarında ağları çalışmak için beklenen ama şimdi Biz ister bir etikel bir önek kullanmak zorunda ve bu ah ... özellik ve kaymak başparmak Henüz çatışma ufak erişebilirsiniz çünkü firefox biri bile Henüz aralık elemanı hale böylece sadece beklemek zorunda Şimdi sekiz yaptım kullanılır yapabilirsiniz ediyorum Başka bir iç mi Bir özel için kaymak bileşeni Ayrıca içine özel sürükleme özelliklerini programlamak zorunda senin değil de bu yüzden ben sadece Giriş tipi aralığı eleman kullanmayı tercih Bu yolu ben içine herhangi bir özel sürükleme özelliklerini programlamak zorunda değilsiniz Benim sürgü ama böyle i flash video kullanıyor gidiyorum dedi Sadece utube yapar gibi kadar ah ... kullanarak açmak için ne zaman benim endikasyonda Eğer bu yüzden kullanırken var ne zaman html beş video elemanları gün olacak html beş ötesinde İki hala geçiş gün yani flash video öğesini kullanan senin göstergesi olduğunu Bu güvenle geçiş yapabilirsiniz bilirsin gün ve onlar konum nasıl görmek için kendi kaynak kodunu kontrol etmek için buna değer olacak geçici yüzden geri düşmek ele O gün artık geldiğinde aslında benim kaymak biraz görünmesi için gidiyorum Buradan daha fazla kaymak gibi biraz bu düzen Collazo biraz sahip olduğu ben bu arka plan siyah yapacağız ve sonra bir sınır vermek Böyle bir şey, belki bir piksel katı Benim küçük bir oyuncu yenileyin c şimdi ben tam olarak istediğiniz sürgü var ve ben bu ben de bir varsayılan yazı tipini ayarlayabilirsiniz istediğiniz herhangi bir renk yapabilirdiniz sosyal nasıl yazı türünü değiştirebilirsiniz herhangi bir metin için var olabilir senin kontroller ekibi içinde denetimleri bart gidin ve saat ailesini ayarlamak tam orada ve ben benim payı sırt yapacağız Yeterince testi bu yine ve i belirli bir yazı var şimdi görebiliyorum Şimdi geriye kalan tek şey, grafik beyanda için Eğer hakkınız görebiliyordu pause düğmesine oynayabilir neden duraklama girer gece bu yüzden olacak oraya gitmek için küçük bir düğme yapmak kulüpler Nerede her devletin tam olarak aynı boyutta olacaktır ve ben bu sorunları olmayacak ve ben sadece nasıl plaka duraklat düğmesi özelleştirmek için size göstereceğim ve daha sonra size kapatma düğmesi değiştirebilirsiniz ödev için devam edebilirsiniz grafik olarak Ayrıca sizin yanınızdaki tam ekran düğmesi Aynı şekilde ben play pause düğmelerini yapacağım o do Okke menüler havai fişek benim oyun pause grafik kurmak Ben yeni bir belge oluşturmak için gidiyorum sekiz yüz altı yüz kadar yapmak veya kate şimdi ben istiyorum grafiklerine tarama yakalama ya da benim oyuncu bir görünüm elde sanayi ve öz o Bunu belki benim klavyenin bir basın baskı ekranında değilim ve ben şimdi de kapatabilirsiniz havai fişek kontrol v etkilemek geri dönmek Bu baskı ekranı diş macunu ve şimdi ben önde gidebilir ve biraz dikdörtgen koymak bu doğru üzerinde düğmesine oyun ve ve Benim özellikleri çubuğunu getirmek ve emin olun bar olarak aynı renk küçük dikdörtgen Bu şekilde ben bir güzel var açık küçük Candace tüm yapmak çekilme onların oluşturmak şekiller altındaki diğer sac tutma mağaza Morgan söyledi ya ben akıllı çokgenler düşünüyorum kullanabilirsiniz ama o akıllı çokgen var tüm değişim sadece üç karar verir Onları bir değişiklik daha hafif bir gri o renk aslında gidelim önde ve yapmak katı beyaz ve biz o harika yapabilir istediğimiz ve var serin sır kullanarak bu etkiler O üç değerlendirildi beri donukluk ayarı şeyler daha kolay tutmak için bu yüzden küçük adam yine benim ölçekli aracı vurmak döndürmek ve emin olmak i Küçük rotasyon var Orada benim fare simgesi ve sonra sadece shift basılı tutun Yıllık döndürme Mükemmel açıda o engane beğenmedi Eğer pullu yerine kullanılan sağ ve sen bu yüzden istediğiniz herhangi bir boyutu biraz daha küçük yapabilirsiniz yapmak yapabilir Fare tekerleği kontrol tutarak yakınlaştırmak biraz daha küçük yapmak iyi o kadar benim için iyi o uh var ... Geniş onaltı onsekiz yüksek bu yüzden şimdi ben yapacağım her şeyi kontrol x kaldırmak olduğunu Burada bu kontrol, x ve sonra benim Candace'i yapacağım şeffaf sen benim sembolü gördüğünüz hala orada oturuyor O küçük sembolüne Nafis tuval klasör dosya ihracat sihirbazı devam etmek ağ ve sonra p_n_g_ gidin otuz iki mat şeffaf mat olabilir ve ihracat yüzden aynı klasörde zaman bunun kurtaracağım saatim html sayfaları örnek üzerinde benim küçük bir video oynatıcı bina saatime olduğu html sayfaları muhtemelen tek görüntüleri bu klasöre ya da buna benzer bir şey yaşadım ama öylece aynı klasöre koydum ediyorum anonim kurtarmak şimdi ben de duraklama düğmesine sahip olmak istiyorum Aynı ölçüler aynı boyutta sıralama amanda en olacak Candace ise Ben benim renk gibi yapacağız Benim çubuğu yine sadece bu denetimi kaldırıldı ve ben dikdörtgen alırsınız Ben öylece eklenti ben Orada çok az dikdörtgenler ve aynı zamanda devriye koltuk yapmak bu bir put bir kopyasını kontrol onları beyaz yapmak diğer biri hemen yanında şimdi ben gidip mikrofonu almak ve şeffaf saygın gidiyorum ve yine wese keşfetmek aynı işlemi dosyası yapmak devam etmek Devam ve aynı klasörde şeffaf p_n_g_ olarak kaydetmek Bu bir adam adında arayanlar tamam şimdi ben aşağı inip kontrol edeceğim benim Oyun portları düğmesi Bunun için bu heidi kopya ve ben herhangi bir c_e_o_ henüz kesin değil böylece kötü çocuk için duvar kurulumu diyor burada olacak kadar gidiyorum ah ... belki Sağ altında video kontrol çubuğu Önemli bir seçkin tip Bir i_d_ ile Oyun duraklama düğmeye hedeflenen olacak Bunu getirebilir aşağı küme ayracı kapatma Tamam bu kadar çok toprak görüntüsünü geri vermek hedef gidecek url oynanan nokta p_n_g_ olduğunu dokuz negatif yatılı Beni seti Görüntü oldu ki üçgen ve biz emin biz bu şekilde küçük Hanson olacak bu işaretçi imleç vermek moskova en Beni bu check out geçti kullanıcılar gösterir biz hepsini biraz ellerini görebilirsiniz kelimesini kaldırmak zorunda Bunun üzerinde pençeleri oynamak yapacağımızı sadece bir saniye içinde ve biz de istiyoruz en en de o kazandı hover devletler vermek let yapmak moskova onun üzerinde o biraz daha parlak çevirmek gerekir bu yüzden bunu başarmak için ne yapabilirim her şeyden önce burada aşağı gidelim ve paul o oyunda olduğunu söylüyor burada düğmesi kaldırıldı olduğunu Gidip onu ve donukluk ayarı vereyim belki sıfır o zaman garanti ve sonra ne var bir göz atın biraz alır Bir noktaya beş bunu yapmak bile var ve şimdi yapmamız için gidiyoruz ne Bu kopyalanır Bunun altında serbest ticaret giysi ya da orada kaşlı ayraç Colin koymak Kapak sözde seçici erişmek için Biz o oyun duraklatma düğmesi için hover sözde seçici koymak donukluk dönüş bir nokta sıfır veya sadece bir ne zaman bitti kullanıcıların fare hazneleri Şimdi sen bu etkiyi kontrol edebilirsiniz Bunun üzerine güçlü gitmek yan zamanlı şimdi biz hala javascript gidip plaka neden değiştirmek zorunda işlev bu yüzden o elemanın içine kelimeler koyarak değil i yani demek biliyor güzel ve ah ... Sadece önde gidelim ve çöküş Bütün bu tarz Onların hareketlilik kod adı verilen komut açmak ve biz orada sponsor plaka var nerede Şimdi biz bir olgu innerHTML istemiyorum oynat düğmesi biz oynayacağız düğmesi nokta stil nokta demek konum bu yüzden onun stilini değiştirmek istediğiniz arka plân ve onlar orada url ayarlamak için gidiyoruz bu yüzden go ahead ve sadece bu kodu ödünç tam orada Kontrol c ve sonra orada yerine koymak ve biz bu işlerin olmadığını görürsünüz ve bu olmak istiyor Kolej kurtuldu p_n_g_ orada ve sonra biz burada bu soğuk kopyalayabilirsiniz ve doğru koymak Orada ve çok onun değişti p ve g gecikmiş şimdi çalışıyor bakalım Politika posada nitelikli Varsayılan olarak Bunun nedeni de tepki bu nedenle bu olmalıdır Tam görüş CSX neden Şimdi testi biz öncelikle olası yukarı olması autoplay ayarladığınız ve daha sonra Hızlı bir sen yere değişiklikler nedeniyle zaman tersine İstediğin işlevselliği bu yüzden ilk yükler Yenilen goller Hala var mükemmel eğer mümkünse önemli ister yer ve daha oldukça serin ha Tamam şimdi siz hakkında gidebilirsiniz Bunları konumlandırma orada istediğiniz her yerde olmak Eğer uh kullanmak istiyorsanız ... Ekran blok elemanları size bloğu görüntülemek için tüm bu unsurları ayarlayabilirsiniz ve sonra orada onları yüzebilen ve onlara margin-top verebilir veya padding-top Onları yukarı hareket ya da hiç bu barware aşağı tam olarak başlar onlara oturup gerekir tam olarak Bu şeyler onların dikey olacaktır ben senin için tüm bu saçmalıkları yapmayacağım güzel öylesine karanlık gider nereye çağrı sahibinin etkileyen koymak donukluk kullanarak rağmen Eğer bu küçük düğmeye aynı şeyi yapabilirsiniz ve bu küçük düğmesi de bunun uygulanmış etkiler olsun edildi Şimdi bunu yapmak için nasıl biliyorum çünkü i düğmeye biliyordu aynı şeyi yapmak istiyorum ve tam ekran düğmesi ve sonra ödev ve güzel bir bitiş var Tamamen özelleştirilmiş oyuncu Eğer dizi memnun kaldım bir umut ve ben bir sonraki biri sizi yakalamak gerekir bu dizi tamamlar.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Video-Player-Controls-CSS-Design-Tutorial HTML5 video kontrolleri özelleştirme 6 ve son bölümü. Bu videoda belirli bir marka veya site tasarımı maç için video oynatıcı özelleştirme için bazı tasarım ipuçlarını gösterecektir. Ben HTML5, CSS3 ve bazı JavaScript işlevleri henüz tüm tarayıcı yazılımları aynı işe bağlı olamaz herkese hatırlatmak istiyoruz. Bu teknolojiler standardize sonra sonra yönüyle çalışmak onlara güvenebilirsiniz. Eski tarayıcılar kesinlikle iyi bu kodu işlemez olur, bu yüzden aralık kaymak bileşeni tarayıcı önek ve alternatifleri kullanarak tartışacaktır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.7/10

  • 126
    Olumlu
  • 3
    Olumsuz
  • 74
    Yorum
  • 18092
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Absolute Zero(Programming Tutorials)

    Absolute Zer

    22 Kasım 2012
  • sebsebdouze

    sebsebdouze

    7 ŞUBAT 2008
  • TheFlashCentre

    TheFlashCent

    22 Mayıs 2008

ANKET



Bu sayfa işinize yaradı mı?