HTML Video Ekleme

HTML Video Ekleme

HTML Video Ekleme : Web sitesi içinde dinamik olarak siteye video izleme işlemi için yapılmakta olan işlemdir. Web sitenize video yerleştirme ile ilgili  bir çok yolu vardır. Bu yolların hemen hemen hepsini sizlerle maddeler halinde paylaşıyor olacağım ama ondan önce Web sitesi video koyma kullanıcılar açısın öneminden bahsedeceğim.

Web sitesi yapımı gün geçtikçe yardımcı kodlar tarafından kolaylaşmaktadır. Kolaylaşmasının sebepleri arasında HTML kütüphanesinin yeni sürümlerinin çıkması ve İnternet ortamındaki bilgi yoğunluğundandır. Sizlerle bu makalede HTML5 Video Ekleme Özelliğinden bahsedeceğim.

HTML5 Video Nasıl Eklenir?

Web sitesi üzerinde video ekleme işlemi oldukça basittir. Daha önceden bu işlem bir hayli zahmetli ve uğraştırıcıydı ama teknolojinin gelişmesiyle bu tarz problemler ortadan kalkmıştır. Sizlere aşağıda hangi html video kod örneği yazacağım. Bu kodu Html bölümüne yerleştirip ilgili alana videonun yolunu yazdığınız taktirde çalışacaktır.

Kod:

<video width="640" height="400" controls loop autoplay poster="image.jpg">
  <source src="ilk_acilan.mp4" type="video/mp4">
  <source src="diger_desteklenen.ogg" type="video/ogg">
  Tarayıcınızda HTML5 özelliği yoktur.
</video>

Açıklama: Kod üzerinde görülen ilk source parametresi direk çalışacak videoyu diğeri ise eski tarayıcılarda 1.sinin çalışmama ihtimaline karşı olan video’dur. “Tarayıcınızda HTML5 özelliği yoktur.” ifadesi de Video oynamadığı taktirde ekrana basılmaktadır.

HTML5 Video Özellikleri

Video özellikleri videonun sitede nasıl gözükeceğini belirlemektedir. Çeşitli özellikler ekleyip çıkartabilirsiniz. Aşağıda bu özellikleri kodlarıyla belirtiyor olacağım.

• src : Eklenen videonun adresini belirttiğiniz parametredir.
  • src=”video.mp4″
• controls : Video üzerindeki durdur, başlat, ses düğmeleri vb butonların olup olmayacağını belirler.
  • Direkt olarak video etiketinin içinde yazılır.
• poster : Video başlamadan önce veya bittikten sonra gösterilecek fotoğraf.
  • Doğrudan video etiketinin içinde poster=”image.jpg” şeklinde yazılır.
• loop : Video bittikten sonra tekrardan otomatik olarak yeniden başlamaktadır.
  • Doğrudan video etiketinin içerisine yazılmaktadır.
• muted : Videonun sesinin kapatılması için kullanılır.
  • Doğrudan video etiketinin içerisine yazılmaktadır.
• autoplay : Sayfa açılır açılmaz videonun başlaması için kullanılır.
  • Doğrudan video etiketinin içerisine yazılmaktadır.
• preload : Önyükleme anlamanına gelir eğer istenirse 1 istenmiyorsa 0 kullanılır.
  • preload=”1″
• height : Videonun Web sitesi üzerindeki yüksekliğini piksel türünden belirler.
  • height=”400″
• width : Videonun Web sitesi üzerindeki genişliğini piksel türünden belirler.
  • width=”640″

Bu konu veya Web tasarım ile alakalı tüm konularda aşağıdaki formdan dilediğiniz gibi sorularınızı sorabilirsiniz. Sizlere mümkün olduğunca hızlı bir şekilde yanıt vermeye çalışacağım.