Nivu - Webmaster ve internetten para kazanma forumu  

Go Back   Nivu - Webmaster ve internetten para kazanma forumu > Google & Msn-Yahoo kardeşler > Google Optimizasyon > HTML5

Cevapla
 
LinkBack Seçenekler
  #1  
Alt 08 Ekim 2013, 22:50
Nivu.net
 
Üyelik Tarihi: 06 Ağustos 2013
Mesajlar: 236
Ticaret Sayısı: (0)
Ticaret Yüzdesi:(%)
Standart HTML5 ile Movie Player



Merhaba arkadaşlar.

HTML5‘in dünyamıza girmesiyle kazandığımız kolaylıklardan en büyüklerinden biri kuşkusuz movie player. Bu makalemde HTML5′in video yapısını inceleyeceğiz ve mükemmel bir movie player hazırlayacağız. Görselde gördüğünüz gibi kanal logosu ve alt yazı desteğini de bu örnekle birlikte öğreneceğiz.



HTML5 Movie 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 movie player. İki iç içe geçen kod ile çalışır. Örnek verecek olursak ;

Kod:
<video width="1280" height="720" ontimeupdate="textcontrol();" controls="1">
<source src="video-dosyasi.mp4" type="video/mp4"></video>
Ö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.

Kod:
.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-linear-gradient(-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-linear-gradient(-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-linear-gradient(-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;

/* Oynatıcının Gölge Ayarları*/
-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;
-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;
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;
}

.kanal{
/* Kanal Logosu */
position: absolute;
margin:30px;
width:70px;
left:0;
top:0;
z-index:999;
}
.altyazi{
position:relative;
bottom:60px;
text-align:center;
width: 95%;
margin:0 auto;
font:bold 12px Helvetica;
color:white;
text-shadow: 2px 2px 1px #000;
padding;10px;
}

#metinler{display:none;}
Şimdi ise HTML kodlarımız ile devam ediyoruz.

Kod:
<section class="adobewordpress"> <a href="http://www.adobewordpress.com" target="_blank"><img src="http://www.adobewordpress.com/wp-content/themes/adobewordpress/images/logo.png" class="kanal"></a> <video width="320" height="180" ontimeupdate="textcontrol();" controls="1"><source src="http://dl.dropboxusercontent.com/s/ldnrmjjtaf3gi66/Family-Guy.mp4?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> </div> </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.

Kod:
<script type="text/javascript">
var metinler = document.querySelectorAll("#metinler span");
var altyazi = document.querySelector("#altyazi");
var textcontrol = function(){
var adobewordpress = document.querySelector("video");
currenttime = parseFloat(adobewordpress.currentTime);
for( x = 0, l = metinler.length; x < l; x++ ){
diyecek = metinler[x];
if(parseInt(diyecek.getAttribute("start")) <= currenttime && currenttime <= diyecek.getAttribute("end") ){
altyazi.innerHTML = diyecek.innerHTML;
}
}
}
[/script]
Evet, kodlamamız hazır.

Bir sonraki dersimizde görüşmek üzere, hoşça kalın.

Kaynak : [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
__________________
...Mustafa Kemal Paşa Çok Yaşa...
Alıntı ile Cevapla
Cevapla

Seçenekler

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık



Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 06:17.


Powered by vBulletin® Version 3.8.9 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.