Web Tasarım

HTML & CSS Video Ekleme

Html sayfalarımıza mp4 tipindeki videolarımızı ekleyerek sayfamızdaki içeriğimizi daha zengin kılabiliriz. Video eklemek için video parametresini kullanıyoruz. src= ile video yolumuzu belirtiyoruz ve video muzun tip ayarlamalarını yaptıktan sonra eğer web tarayıcısı video oynatmayı desteklemiyorsa gösterilmek üzere bir metin girebiliriz. Ve video etiketi ile videolarımızın yükseklik genişlik ayarlamalarını yapabiliriz.

HTML’de video eklemek için yapmanız gereken tek şey:

<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Desteklenmiyor.
</video>

Baştan bakacak olursak genişlik,yükseklik ayarı mutlaka yapılmalı ve kullanıcının istediği çözünürlükte olmalıdır.Bu sizi daha karşı konulmaz kılar.

<controls>  Özelliği “Play”,”Pause”,”Ses” gibi denetimleri ekler.

<source> Etiketi içerisinde paylaşacağımız videonun konumunu belirtmemiz önemlidir.Aksi takdirde video görüntülenmez. Burada belirtilen konum proje içerisinde olduğu için direk yazılması uygundur.Genel olarak ta videonun proje dosyanız içerisinde bulunması gerekir.

Proje içerisinde değil ise diyelim ki videonuz masa üstünde:

<video width="320" height="240" controls>
<source src="C:Documents and SettingsToshibaDesktopvideo.mp4" type="video/mp4">
<source src="C:Documents and SettingsToshibaDesktopvideo.ogg" type="video/ogg">
Desteklenmiyor.
</video>

Şeklinde videonun konumunu belirleterek projede yer almasını sağlarız.

Yorum Yap

Share This