4 Temmuz 2014, Cuma

Video Arka Plan Html Css Eğitimi Artı Youtube Embed

Mmm geçmiş Bu egzersiz bütün Videoyu nasıl kullanılacağını gösterecek HTML içeriği arka plan olarak kullanmak yerine at Hala görüntüleri bu formları olabileceği anlamına gelir Bu gibi tüm tür şeyler menüler ve düğmeler ve metin sağ üst videoları olacak bir video oturan web sayfası arka plan İlk Aslında ben biraz var olduğunu görebilirsiniz en bitirmek bir göz atalım Ben arka planda web sayfası içeriği Bir video büyük bir HD video oynatma neydi yaptım biliyorum Evimin dışında gitti bu sabah bir ağaç kadar sivri ve sadece bazı HD görüntüleri aldı ve biz döngü video dedi ve ben video benim ses kaldırıl

dı emin yaptı Ben kaydedildi sonra çıplak kemikleri bir html5 web belgesine sahip olan tamam yapacağız başlamak ediyoruz Ben yapacağım ilk şey Ben kazandı özelliklere sahip Video elemanı olarak Bana BG PG arka plan vi

deo kaynağı için kısa bir kimliği verilen: Ben Bir video klasöründe olacak Bir video adında sayfa BGT nokta mp4 Şimdi nokta Ağustos videoları kullanmak zorunda olabilir ya da başka bir biçim o görünüyor Fi

“Ders Kodu: http://www.developphp.com/video/CSS/Video-Background-Tutorial-Plus-Youtube-Embed Bunun yerine hareketsiz resim arka kullanarak HTML olarak içerik arka ...”
Adam Khoury

refox Tüm mp4 formatını destekleyen bir Internet Explorer krom Her üç bu tarayıcılar şunlardır video oyunlarını görürsünüz ama mesela opera ile testis operatörler için işe ve mp4 video formatı destekleyen gitmiyor Rd ve diğer bazı formatlarını destekler: değil sonunda bu konuda konuşmak ve ben giymek size bir kod örneği göstereceğim Farklı kaynak elemanlarını tamamlamak Video etiketi içinde farklı tip hesaba ortamlar İlk o mp4 koyacağız böylece video kaynağı o

Video Arka Plan Html Css Eğitimi Artı Youtube Embed Resim 1 Video Arka Plan Html Css Eğitimi Artı Youtube Embed Resim 2 Video Arka Plan Html Css Eğitimi Artı Youtube Embed Resim 3 Video Arka Plan Html Css Eğitimi Artı Youtube Embed Resim 4

larak: biz video istiyorum çünkü bana true autoplay ayarlamak izin Sadece oyna otomatik olarak sayfa yüklendiğinde biz true döngü niteliğini dedi çünkü sen o asla bitmez böylece video sadece kendi üzerine döngü devam etmek istiyorum böylece mısın iyi görünen bir video istiyorum demektir ve başlangıçta iyi yükler böylece kısa bir video kullanmak en iyisidir Video olur Eğer ses var eğer o zaman sessiz ayarlayabilirsiniz Çok doğru ve tamam şimdi ses susturacaktır doğrudan video elemanı altında kod yerleştirmek için gid

iş bir yaptığımız içeriğine fikri içerde yaptım istediğim yerde tüm içerik videonun üstünde kalan bu yaptığımız denilen içerik içinde yaşamak için gidiyor Ben bu hakkı vermek için olsaydı şimdi alırsınız Ben İYE büyük bir video var istemiyorum sonuçları Benim içeriği o kadar dikkatle katmanlı sonra benim içerik koymak zorunda altında olduğunu işler bu yüzden içerik CSS şimdi videonun üstünde olduğunu duyuyorum Ben DGB'YE ile eleman hedef oluyor bizim Video unsur olan olacak olursa olsun ekran boyutu oa yüzde 100 sahip olduğu memnuniyeti ile yol vermek Video uzatılmış veya büzülmüş olan Kullanıcının ekran boyutuna göre o zaman bu kimliği yaptığımız vermek için gidiyoruz Burada içerik ray uygulanmış bazı CSS ve özellikleri mutlak pozisyon vardır o video için üstüne kadar rahat olabilirsiniz bu şekilde üst değer olacak 0 Piksel bunun üstünde olduğunu yol vermek nerede olması gerektiği ve biz metin böylece otuz piksel kadar ekleyerek geliştirmek içerik Bu içinde bir bütün dış kenarına çökerttiğini yaptım ve daha sonra rengi veya metin ben sadece beyaz yapılmış Eğer biz de içindeki metni var h1n h2 gibi belirli öğeleri hedefleyebilir gölgesini vermek ama öylece burada bir metin gölge koymak yaşıyorum beyaz üzerine siyah metin ve ben piksel ve iki piksel yapacağız bu nedenle ofset piksele piksele sahip bir kara gölge var şimdi biz var şimdi bu hakkı bir göz atın biz yapmak olduğunu ne kadar çabuk ve kolay bakın kazandı sonuç Şimdi seni nasıl isteyebilir çağrıldı yüksekliği bu eleman sınırlamak Video arka plan olduğunu ve olabildiğince bu pozisyon o video elemanının biraz daha Eğer sadece bir sarın kolayca eğer bir rap bazı yaptım ve en bu IDE daha yaptım vereyim mi içeride o video elemanı yaptığı konteyner şimdi ya BG konteyner size stil BG konteyner sen gidebilirsin ruhunu istediğiniz herhangi bir şekilde Sağ PG yukarıda pound işareti koymak gerekir PG konteyner açık / kapalı Kelly temeli ve limiti olarak styling başlayın yüksek 300 piksel say Eğer istersen bunu yapmak ve en taşma ayarlamak izin 29 ya da bu şekilde kullanıcı isabet Eğer 300 piksel altında 1c şey Şimdi bu bir göz atalım sen koymak istiyorum daha fazla içerik kabul CC zorlukla sayfası yapmak arka plan siyah içerik sadece gider görebilirsiniz 300 piksele ve ben daha fazla içerik burada başlıyor olabilir Ben yüksekliğini sınırlamak istedim o video bir arka plan olarak render nerede benim ekran değiştirici olarak ve daha sonra bunu görebilirsiniz buna göre değişiklikler ile, video ama şimdi o yüksekliğe sınırlıdır bu yüzden gerçekten bu BG kabı konumlandırabilirsiniz ve istediğiniz herhangi bir şekilde ve video onun yüksekliği sınırı bunun içinde bir arka plan olarak aynı hizmet var daha kolay tarz ve konabilir nerede tam olarak istediğiniz o ve yüksekliği daha kolay sınırlı ve işler olabilir bunun gibi tamam şimdi ne yapacağız YouTube videolarını nasıl kullanabileceğinizi göstermek olduğunu Burada yaptığım tamam neler sayfa arka plan video olarak I bir video yükledi ama ben yükledi emin yaptı listelenmemiş yüzden sadece insanlar olarak video bağlantısı görmek mümkün olacak olan Benim aboneler veya herhangi bir şey için yayınlanan asla bu yüzden sadece o liste dışı yapılan ve sadece bu videoyu kullanmak benim web sayfası arka planı için örnek olarak örnek biz burada kendi web sitesinde olacak bir video kullanarak olduğunu Sunucu ve ben yapacağım bu yüzden video öğesini kullanarak şimdi Sadece tamamen bu videoyu eleman çıkarmak olduğunu ve hisse kodu aşağı gidebilir sizin YouTube'u yapmak embed kodu burada sadece embed kodu kapmak Bana doğru video etiketi nerede koymak için şimdi ben uygun video gömülü onların YouTube artık bunu kaldırabilirsiniz allowFullScreen yapacağız bütün burada 0 eşit frameborder devam edeceğiz yapacağımızı kaynak URL sonuna ya da kaynak video olacak o zaman bir soru işareti koymak ve parametrelere setleri ve aslında yapabileceğimiz bu kaldırmak olduğunu yüksek ve en sadece bu kimlik alalım BG eşit Video elemanı fikri BG vardı gibi Fikir PG şimdi iframe bu nedenle bu özellikler yüzde 100 ile duyabilirsiniz diğer eklenecek ve biz de yüksekliğini ayarlamak gerekebilir YouTube videolarını liste biraz daha eklemek ne hayvan var bakın bu yüzden Bu URL'ye parametreleri üzerinde tamam FTP benim canlı üzerine dosya nefret Web sitesi ve Adam Khoury bir anda com dot Bu dosya adına gidin: Video arka plan sahip olduğunu görebilirsiniz vardır orada Bununla ihtiyacı ancak yükseklik yok ve ayrıca tüm U-iki denetimleri görebilirsiniz görebilirsiniz ve kullanıcı oynamak mümkün ve bunları sahip istemiyorum cekti Videoyu duraklatmak olacak video üzerinde herhangi bir kontrolü bu yüzden ben bu yüzden geri dosyada sadece söylenen bir emri almak zorunda Bazı yükseklik en yüksek gidelim belki 800 piksel aslında yüksekliği sadece olması gerekir Biz BG konteyner olarak ayarlanmış sahip olduğu neyi 500 piksel çünkü o bu yüzden de BG için 2500 $ yüksekliğini ayarlamak izin şimdi tekrar bunu ağaç FTP ben yenilemek için gidiyorum şimdi ben benim içeriğini kullanmak kazandı yüksekliğe sahip olduğunu görebilirsiniz Sağ video üstünde oturan sonra tamam yeşil ışık yaktı Kaynak nitelikleri için video kimliği yapacaksın bazı parametreleri eklemek için bir soru işareti koymak Gerçek: autoplay ile benim başlangıç ​​autoplay anlamına birine eşit Video autoplay ne görmek ve aynı zamanda istiyorum nakavt Biz işareti ekleyeceğiz yüzden yapacağız olduğunu kontrol eder Soğuk HTML kodunu versiyonu kontrollerde işareti türü Yanlış kontrol anlamına gelir 0 eşittir Biz istiyorum biz autoplay video istediğiniz denetimleri görünmüyor bu yüzden şimdi en hafif sunucu ve test etmek için FTP, bu kadar yeniden izin şimdi biz daha fazla denetim var olduğunu görmelisiniz beni tazeleyelim Şimdi kontroller de belki bu konuda yüksekliğini değiştirmek gibi gitti bin sonra yenilemek Ben kuşatmalar yüksekliğini ayarlamak ne istediğini alan nerede uygun içten sen olmak istedim senin alana sahip şimdi biz bu biraz daha fazla parametre eklemek için gidiyoruz Dize burada zaten autoplay var ve biz kontrollerinin çaldı şimdi biz istiyoruz ve döngü 1 eşittir Bu haydi şimdi true olarak ayarlanır loop anlamına gelir ama ve bilgi 0 ve mütevazı marka eşittir göstermek 1 ve devre dışı eşittir Kb eşittir 1 ve JS API 1 eşittir etkinleştirmek Gerçek için tamam en gidelim küçük uygulama ve yenileme orada biz görebilirsiniz şimdi gitmek hiçbir denetim yok veya kullanıcının bir şey ama yine de can Video kompozit tıklayarak etkileşimde ve bu nedenle orada istemiyorum tekrar başlatılır tek bir şey kalır küçük yapmak zorundasın Bu YouTube video ile herhangi bir etkileşimi devre dışı bırakmak için Şimdi bunu döngü değil görebilirsiniz ve bu nedeni var Eğer çalma listesi denizcileri ihtiyacımız olacak bu yüzden önde gidelim ve herhangi bir çalma listesi yok olsa bile son zamanlarda yukarıya koymak ama bu video için yapmanız isteyeyim kendi çalma o videoyu ayarlanır Sen de bu şekilde de bir çalma listesi ayarlayabilirsiniz Ben bu dizeyi eklenen son parametre tamam bir çalma listesi eşittir ve burada çalma kimliğinizi koymak ne yani ben YouTube'da yapabileceğini gidip yeni bir çalma listesi yapmak olduğunu Video% benim kanalda ve koyun uh ağaç rüzgarda sallayarak Bir çalma listesindeki tek video gibi o zaman ben burada playlist kimliği koymak ve kendisi daha sonra mümkün döngü doğru tamam böylece doğru loop eğer isterseniz hatırlamak çok önemli kullanarak bu Çok iframe yöntemi veya iframe yaklaşımı döngü istediğiniz Doğru o zaman bir çalma listesi yapmak zorunda orada çalma kimliği koymak tekrar ve tekrar anlaşma döngü böylece ve o sadece bir video var Çalma birden videoları varsa da birden fazla videoları gerekecek arkaplan nasıl çalıştığını web sayfası böylece var Şimdi benim için ben bu ederim yaptığını bizzat eğer Video elemanı kullanmak ve sahip Benim sayfasından arka plan olarak kendi sunucusunda video Seni veren bu etkiler Çok basit ve bunu yapmak eğer şeyler üzerinde daha fazla kontrole sahip olacaksınız yol evet ben olacak insanlar edememek devre dışı bırakmak için nasıl göstereceğim olduğunu söylemiştim duraklama U-iki kullanırsanız bana YouTube video başladı iframe yaklaşımı YouTube kullanıyorsanız Senin için kodlanmış vermeyeceğim iframe yaklaşımı çok kolay olurdu Yapmanız gereken tek şey bütün doldurur görüntüde konur Başka bir katman koymak, böylece videoyu kapsayan bölge sayfanıza içine içerik koymak gibi Üst bir videoyu bir katman olarak Sadece gider başka bir katman koymak senin videonuzdaki içeriği ve bu katmanda arasında devre dışı bırakır Herhangi bir etkileşim sadece makin resim etiketi açık PNG biz RGBA değerlerini ayarlayabilirsiniz için o görüntü veya ne olursa olsun matlık 20 olan veya kullanım net tamamen açık PNG görüntü var Bu tüm alanı ve devre dışı olacak şekilde doldurur Bu videoyu yaklaşımı ile video ile fare etkileşimi Eğer hiçbir kontroller kullanıcı vermiyorum sahip olduğunuzdan emin olun kez kontroller Sonra onlar üzerine tıklayın olmadığını görmek onunla etkileşim için herhangi bir yol olmaz Ben daha fazla kontrol sahibi Çünkü hiçbir şey olmuyor Ben hiç bir kontrollerde verirken yolu üzerinde bu videoyu render olduğunu Eğer video tıklayın yüzden ya böyle bir şey duraklatmak değil Şimdi nerede bütün bu konuyu kesiştiği bana hızlı bir şekilde web alalım ortaya çıkan ve o birileri aslında bu konuda bir eğitim videosu için istedi Burada, video arka plan yapmak için nasıl yüzden hızlı bir kod verdi: I nasıl örnek Bunu yapacağını daha sonra video elemanı kullanarak gösteren Ben iframe bu örneklerde kullanılan ediliyordu açıkladı Buraya daha sonra yatakta YouTube video getirmek ve etmektir insanlar için kim YBÜ testi Ben MP yürürlükte Firefox test olabilir opera çalışmak için görünmüyor ama aslında burada mp4 var ben olacak radyo she gidelim Tarayıcı Firefox önizleme Dosya gitmek Eğer ben iyi mp4 çalışma video var görebilirsiniz Firefox YouTube gibi önizleme edeceğiz Internet Explorer'da bunu da internet explorer gayet güzel çalışıyor bakın opera o seni gösteren yüzden şimdi hangi sorun yaşamayacaksınız Burada bu kod Bir saniye içinde web Eğer Ağu kullanmak çünkü eğer veya Çar am tipi dosyaları kullanırsanız garip ya onlara video dosyalarını giymek Daha sonra opera o yüzden koymak destekler sürümleri üç ve bu her üç sürümleri olduğundan emin olun dosya türleri video BM gösterisi göstermek istiyoruz bu film ile bu yüzden istiyorum sadece o K opera test etmelidir söz Karşı destek mp4 nedeniyle videoyu görmüyorum Tamam şimdi video elemanı kullanarak iki örnek var videolar borç ile web sunucusu üzerinde doğrudan vardır ve biz de YouTube / iframe embed yaklaşım ve ben o ayrı kod örneklerini hem gerekecek HP Dhaka geliştirmek çalış videonun altında böylece hem kod örnekleri üzerinde ellerini almak mümkün olacak Biz tatbikata ile çalıştı video zevk eğer o sadece seyretti 2010 yılında ayarlamak abone butonuna tıklayın O normal bir şey bu yeni şeyler kullanabilirsiniz birkaç barış şefi Julian için sağ tuşa var liste diğer Eğer planlama yararlı olduğu tespit izlediğiniz için teşekkürler Bir dahaki sefere, eğer.

Açıklama

Ders Kodu: http://www.developphp.com/video/CSS/Video-Background-Tutorial-Plus-Youtube-Embed Bunun yerine hareketsiz resim arka kullanarak HTML olarak içerik arka videoyu nasıl kullanacağınızı öğrenin. Biz de sizin sayfa içeriğine altında döngü video arka plan olarak Youtube videoları nasıl kullanılacağını gösterecektir. Doğrudan HTML içeriği altında play video yapmak için CSS ayarlarını uygulayabilirsiniz böylece katman veya HTML öğelerini yığın basittir.

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.8/10

  • 325
    Olumlu
  • 5
    Olumsuz
  • 93
    Yorum
  • 46201
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Film Riot

    Film Riot

    16 NİSAN 2006
  • MotoManTV

    MotoManTV

    10 Aralık 2009
  • Paulo Bautista

    Paulo Bautis

    21 Aralık 2008

ANKET



Bu sayfa işinize yaradı mı?