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.
13099 kez okundu.