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

HTML5 Video Player

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 :

Örnek

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

Bu da ilginizi çekebilir  CSS ile Navigasyon Menü Tasarlayalım



  • Karanfil

    Süper ço ksaolun. Bu dizinin adı neydi bu arada?

  • GORGEOUS

    Dizinin adı Family Guy. Bu player ile youtube yayını yapabiliyormuyuz

  • ozerx

    merhaba flv ve diğer uzantıları çalıştırıyormu?

    • MP4, WebM ve Ogg uzantılı dosyaları destekliyor sanırım an itibariyle HTML5 oynatıcılar. Yanlışım olabilir.

  • ozerx gene ben :)

    hocam harika bişey peki blogger’da çalışıyormu?

  • Captive

    hocam alt yazıları txt dosyasından okutabiliyor muyuz ?

  • cgr

    Tam ekran yaptığımızda altyazı görünmüyor bu sorunu nasıl halledebiliriz?

  • cml166

    Bunu wordpresse nasıl entegre edebilirim

  • Emrah Es

    Bunu wordpress yazı sayfalarına nasıl entegre edebiliriz peki?