Html sayfalarınıza mp4 tipindeki videolarımız ekleyerek içeriğimizi daha zengin kılabiliriz. Video eklemek için <video></video> etiketini kullanıyoruz. Video yolunu src= parametresi ile belirtiyoruz ve video muzun tip ayarlamalarını yapıyoruz. Eğer kullanılan 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 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">
Kullandığınız tarayıcı bu videoyu desteklenmiyor.
</video>

Baştan bakacak olursak

• width parametresi ile genişlik,
• height paramaetresi ile yükseklik ayarını yaptık.

Genişlik ve yükselik ayarlarını mutlaka yapılmalıyız ve kullanıcıya sayfamızdaki videoyu düzgün boyutlarda göstermeliyiz. Sonrasında eklediğimiz controls parametresi ise video oynatıcımıza oynatma, durdurma, ses ayarlamalarının bulunduğu barı getirmekte.

<controls>  özelliği ile videomuza “Oynat”,”Durdur”, “Ses” gibi denetimleri ekledik.

<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 da videonun proje dosyanız içerisinde bulunması gerekir.

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

<video width="320" controls>
  <source src="C:Documents and SettingsToshibaDesktopvideo.mp4" type="video/mp4">
  <source src="C:Documents and SettingsToshibaDesktopvideo.ogg" type="video/ogg">
                    Desteklenmeyen tarayıcı.
</video>

Videoyu eklediğimizde aşağıdaki gibi sayfamıza gelecektir. Burada sadece genişlik değeri vererek videomuzun otomatik yükseklik değerinin ayarlanmasını da sağlamış olduk.

Videomuz başka bir klasörde ise;

<video width="320" height="240" controls>
  <source src="/videolar/anasayfa/video.mp4" type="video/mp4">
  <source src="/videolar/anasayfa/video.ogg" type="video/ogg">
                    Desteklenmeyen tarayıcı.
</video>

Burada proje sayfamızın bulunduğu dizinde videolar isminde bir klasör olduğunu ve bu klasörün içinde de anasayfa adında bir klasör olduğunu video.mp4 dosyasının da burada olduğunu belirttik. Yani birden fazla videomuzun daha düzenli ve sistemli şekil saklanması için bir klasöre videolarımızı taşıyarak bu klasörün yolunu göstermiş olduk.

Html sayfanıza resim eklemek için bu yazımıza göz atınız.