HTML 5 Dersleri 7 - Video

Merhaba dostlar, bu dersimiz ile HTML5 video özelliklerini işleyeceğiz.

Taha Furkan Bayar Taha Furkan Bayar
Ekim 31, 2022 - 13:24 Updated: Kasım 2, 2022 - 10:05
0 136
HTML 5 Dersleri 7 - Video

HTML5 İle Video

HTML5 ile video özellikleri oldukça gelişmiş durumda.

HTML5 İle Video Nasıl Kullanılır ?

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Tarayıcınız bu özelliği desteklemiyor.
</video>

Control niteliği ile play, pause ve ses gibi ek nitelikler eklenebilir.

Ayrıca boyut ayarları da verilebilir. Yukarıda gördüğünüz üzere video kullanımında alanımıza göre bir boyut vermek önemlidir.

Video Formatları Nelerdir ve Tarayıcı Destekleri

Tarayıcı MP4 WebM Ogg
Internet Explorer EVET HAYIR HAYIR
Chrome EVET EVET EVET
Firefox NO EVET EVET
Safari EVET HAYIR HAYIR
Opera HAYIR EVET EVET

HTML5 DOM Metodu Nedir ?

Bir video eklerken videoya oynat, duraklat ve boyutlandırma eklemek için kullanılır.

<button onclick="playPause()">Oynat/Durdur</button> 
  <button onclick="makeBig()">Büyük</button>
  <button onclick="makeSmall()">Küçük</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Tarayıcınız video etiketini desteklemiyor.
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script>


Etiketler: