HTML5 Video Oynatıcı (Altyazı ve Logolu)

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.

ÖRNEĞİ GÖRÜNTÜLE

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 ;

<video width="1280" height="720" ontimeupdate="textcontrol();" controls="1">
<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.

.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.

<section class="adobewordpress">
<a href="https://www.adobewordpress.com" target="_blank"><img src="https://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.