Ses ve Video Ekleme

Video Etiketi

Html5 ile gelen video etiketini kullanarak web sayfamızda video yayınlayabiliriz. Kullanışlı bir etiket olan video etiketi sayesinde, video dosyamızın tarayıcı tarafından desteklenmemesi ihtimaline karşı alternatif seçenekler belirleyebiliriz.

<video width="300" controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="video1.flv" type="video/ogg">
  Video oynatılamıyor.
</video>

Yukarıdaki örnekte video1.mp4 dosyası açılamazsa, video1.flv dosyası açılacaktır. O da açılamazsa "Video oynatılamıyor" metni görüntülenecektir.

Buradaki width parametresi piksel cinsinden verildiğinde videonun genişliği hep sabit olacaktır. Responsive videolar yani kullanıcının ekranına göre genişleyen veya daralan videolar elde etmek istersek Css kullanarak genişliği % cinsinden verebiliriz.

video {
    width: 100%;
    height: auto;
}

Yukarıdaki css kodları uygulandığında videomuz ekran genişliğine göre daralıp genişleyecektir. Fakat width:100% kullanmak riskli olabilir çünkü ekranda videoya ayrılan yer, videonun orjinal boyutundan daha fazla olduğunda da videomuz genişlemeye devam edecektir.

Bu nedenle aşağıdaki css kodları daha kullanışlı olacaktır.

video {
    max-width: 100%;
    height: auto;
}

Embed Etiketi

Embed etiketi kullanarak sayfamıza ses, video ve animasyon ekleyebiliriz. Kullanımı şu şekildedir.

<embed src="muzikDosyasi.mp3" autostart="false" />

<embed src="videoDosyasi.avi" autostart="false" />

Yukarıdaki satırın yazıldığı bölümde video/müzik oynatıcı programın arayüzü görünecektir. Bu sayede kullanıcı oynatma, durdurma, ses gibi ayarları yapabilir.

autostart parametresi sayfa yüklendiğinde oynatma işleminin otomatik başlayıp başlamayacağını belirler. 

web sayfasına video ekleme, html5 ses video ekleme, responsive video ekleme, videoyu ekrana göre boyutlandırma, embed ve video etiketlerinin kullanımı

KONU İLE İLGİLİ ÖRNEKLER

Bu konu ile ilgili örnek bulunmamaktadır.



YORUMLAR




10290  kez okundu.

Online Kullanıcı Sayısı 943



Ses-ve-Video-Ekleme