VİDEO VE SES EKLEME
Html5 ile gelen video etiketini kullanarak web sayfasına video yayınlanabilir. Kullanışlı bir
etiket olan video etiketi sayesinde, video
dosyası tarayıcı tarafından desteklenmemesi ihtimaline karşı alternatif seçenekler
belirlenebilir.
<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 istendiğinde Css kullanarak
genişliği % cinsinden verilebilir.
video {
width: 100%;
height: auto;
}
Yukarıdaki css kodları uygulandığında video
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 sayfaya ses, video ve animasyon eklenebilir. 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.