HTML Video Ekleme

Web sayfalarına video ekleme için kullanılan HTML5 video etiketi ile ilgili bilgi ve video ekleme kodu yer alıyor.

HTML video oynatma

HTML5 öncesinde video oynatmak için bir eklentiye ihtiyaç vardı.

HTML5 ile birlikte gelen <video> etiketiyle web sayfalarında eklenti kullanmadan video oynatma işlemi yapılabilir.

HTML <video> etiketi

HTML ile video oynatmak için <video> etiketi kullanılır.

<video width="360" height="320" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  Tarayıcınız video etiketini desteklemiyor.
</video>

HTML <video> etiketine ait controls özelliği video için oynatma, durdurma, ses ayarlama gibi kontrolleri ekler.

HTML <video> etiketi width ve height özelliği videonun genişlik ve yüksekliğini belirtir.

Genişlik ve yükseklik belirtilmediğinde video tarayıcının belirlediği boyutlarda açılacaktır.

HTML <source> etiketi video için dosya kaynağı belirtir. Tarayıcı bu kaynaklardan desteklediği dosya kaynağını açar.

HTML <video> ve </video> etiketleri arasındaki yazı <video> etiketini desteklemeyen tarayıcılarda görüntülenir.

<video width="360" height="320" autoplay="autoplay">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  Tarayıcınız video etiketini desteklemiyor.
</video>

HTML <video> etiketi autoplay özelliği videoyu otomatik olarak başlatmak için kullanılır.

HTML tarayıcı video formatları

HTML <video> etiketi MP4, WebM ve Ogg video formatlarını desteklemektedir.

Tarayıcı MP4 desteği WebM desteği Ogg desteği
Internet Explorer VAR YOK YOK
Chrome VAR VAR VAR
Firefox VAR VAR VAR
Safari VAR YOK YOK
Opera VAR VAR VAR

HTML video formatları

Dosya Formatı Format Türü
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML <video> yenilikleri

HTML5 ile birlikte gelen <video> etiketi JavaScript DOM desteği sağlar.

JavaScript DOM desteği düğmeye tıklandığında video oynatma, durdurma, ses ayarını değiştirme gibi imkan verir.

JavaScript DOM desteği ile kendi video oynatıcınızı yapabilirsiniz.

JavaScript Derslerine buradan ulaşabilirsiniz…

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Yusuf SEZER

Yusuf SEZER

Computer Engineer who interested about web technologies, algorithms, artificial intelligence and embedded systems; constantly exploring new technologies.


Bunlara'da bakmalısın!