Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / HT M L5 / HT M L5 Vi d eo O yn a tı cı (Al tya zı ve Lo g o l u )
HTML5 Video Oynatıcı (Altyazı ve Logolu) Vatanay Özbeyli tarafından 07 Haziran 2013 tarihinde yazıldı. ~ 4 Yorum + Değiştir
Merhaba arkadaşlar. HTML5‘in dünyamıza girmesiyle kazandığımız kolaylıklardan en büyüklerinden biri kuşkusuz video oynatıcılar. Bu makalemde HTML5′in video yapısını inceleyeceğiz ve mükemmel bir video oynatıcı hazırlayacağız. Görselde gördüğünüz gibi kanal logosu ve alt yazı desteğini de bu örnekle birlikte öğreneceğiz.
HTML5 Video nedir? En basit haliyle video linklerini oynatan, basit bir oynatıcıya sahip olan, yine aynı şekilde basit bir arayüze sahip olan hızlı bir video oynatıcıdır. İki iç içe geçen kod ile çalışır. Örnek verecek olursak ; 1 <video width="1280" height="720" ontimeupdate="textcontrol();" controls="1"> 2 <source src="video-dosyasi.mp4" type="video/mp4"> </video> Buradaki width ve height değerlerini videonuzun boyutuna göre ayarlamanız gerekmekte. Ya da sadece uzunluk değerini bildirerek yüksekliği otomatik ataması için HTML5′i görevlendirebilirsiniz.
Örneğimizi hazırlayım.
İlk olarak yapacağımız şey tam olarak nasıl gözükecek onu bir görelim :
Altyazılara biraz gölge, güzel bir yazı tipi seçtim, Oynatıcı için daha önceki arkaplan derslerimde paylaştığım gradient bir fon oluşturdum. Ve tabiki de kanal logosu olarak AdobeWordPress‘in logosunu ekledim. İlk olarak tasarım için CSS Kodlarımız ile başlayalım. 1 2 3 4 5 6 7 8
9
10
11
12
13 14 15
.adobewordpress{ width: 320px; height: 180px; position: absolute; /* Oynatıcının Arka Plan Ayarları*/ background: #092756; background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-lineargradient(-45deg, #670d10 0%, #092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%); background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-lineargradient(-45deg, #670d10 0%,#092756 100%); background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-lineargradient(-45deg, #670d10 0%,#092756 100%); background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%); padding:15px; border-radius:10px;
16 /* Oynatıcının Gölge Ayarları*/ 17 -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 18 -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 19 box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 20 } 21 22 .kanal{ 23 /* Kanal Logosu */ 24 position: absolute; 25 margin:30px; 26 width:70px; 27 left:0; 28 top:0; 29 z-index:999; 30 } 31 .altyazi{ 32 position:relative; 33 bottom:60px; 34 text-align:center; 35 width: 95%; 36 margin:0 auto; 37 font:bold 12px Helvetica; 38 color:white; 39 text-shadow: 2px 2px 1px #000; 40 padding;10px; 41 } 42 43 #metinler{display:none;} Şimdi ise HTML kodlarımız ile devam ediyoruz. 1 <section class="adobewordpress"> 2 <a href="http://www.adobewordpress.com" target="_blank"><img src="http://www.adobewordpress.com/wpcontent/themes/adobewordpress/images/logo.png" class="kanal"></a> 3 <video width="320" height="180" ontimeupdate="textcontrol();" controls="1"><source src="http://dl.dropboxusercontent.com/s/ldnrmjjtaf3gi66/FamilyGuy.mp4?
4 5 6 7 8 9 10 11
token_hash=AAGdnMYdt75v689ZpwPMC10zf2R7YH3NBS2dorlbtWjRA&amp;dl=1 type="video/mp4"></video> <div class="altyazi" id="altyazi"></div> <div id="metinler"> <span start="1" end="3.5" >AdobeWordPress.com HTML5 Dersleri</span> <span start="3.5" end="5" >Ugh, you look like a nude Larry David.</span> <span start="5" end="8" >No, no, no!</span> <span start="9" end="11" >Oh, my God, Super Mario? What are you doing here?</span> <span start="12" end="14" >I jumped on a turtle, Stewie.</span> <span start="14" end="17" >It’s not an exciting life,
but it’s my life.</span> 12 </div> 13 </section> Sırada JavaScript Kodlarımız var. Bu kodları <body> tagı içerisinde yukarıdaki HTML kodlarının hemen altına koymalısınız. 1 <script type="text/javascript"> 2 var metinler = document.querySelectorAll("#metinler span"); 3 var altyazi = document.querySelector("#altyazi"); 4 var textcontrol = function(){ 5 var adobewordpress = document.querySelector("video"); 6 currenttime = parseFloat(adobewordpress.currentTime); 7 for( x = 0, l = metinler.length; x < l; x++ ){ 8 diyecek = metinler[x]; 9 if(parseInt(diyecek.getAttribute("start")) <= currenttime && currenttime <= diyecek.getAttribute("end") ){ 10 altyazi.innerHTML = diyecek.innerHTML; 11 } 12 } 13 } 14 [/script] Evet, örneğimiz hazır.
Sonuç HTML CSS JS Result Edit on CodePen 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.
<section class="adobewordpress"> <a href="http://www.adobewordpress.com" target="_blank" <video width="320" height="180" ontimeupdate="textcontrol <div class="altyazi" id="altyazi"></div> <div id="metinler"> <span start="1" end="3.5" >AdobeWordPress.com HTML5 Dersleri <span start="3.5" end="5" >Ugh, you look like a nude Larry David. <span start="5" end="8" >No, no, no!</span> <span start="9" end="11" >Oh, my God, Super Mario? What are you doing h <span start="12" end="14" >I jumped on a turtle, Stewie. <span start="14" end="17" >It’s not an exciting life, but it’s my life. </div> </section>
1. .adobewordpress{ 2. width: 320px;
Bir sonraki dersimizde görüşmek üzere, hoşça kalın.
Benzer Konular:
CSS ile Yumuşak Geçişli Arka Planlar Web Sayfanıza Etkileyici Giriş Paneli CSS Kullanarak Button Tasarlamak Sadece CSS ile Yatay Menü Sadece CSS Kullanarak Dropdown Menu Nasıl Hazırlanır
Yazı Kategorisi : HTML5 , Tasarım Unsurları Anahtar Kelimeler : alt , altyazı , altyazılı , family , guy , html5 , html5 video oynatıcı , html5 video player , kanal , logosu , player , subtitle , video , yazı