Bu yazımızda HTML ile web sayfasına video ekleme ve müzik ekleme işlemlerini gerçekleştiren video ve audio etiketlerinin kullanımını göreceğiz.
Video etiketinde kullanılabilecek özellikler şunlardır.
autoplay : Bu özellik sayfa açıldığında videonun otomatik olarak başlamasını sağlar.
controls : Bu özelliklik video oynatıcısında Başlat, Durdur,vs.. butonlarının görüntülenmesini sağlar.
height : Video oynatıcının yükseklik ayarı yapılır.
width : Video oynatıcının genişlik ayarı yapılır.
loop: Video bittiğinde tekrarlanacağını belirleyen ayardır.
muted : Video açıldığında sessiz modda açılacaktır.
poster : Video açılmadan önceki başlangıç resmini ayarlamak için kullanılır.
src : Video dosyasının Url’ sini gösterir.
preload: Videonun yüklenmesi ile ilgili ayarlar yapılır. preload none dersek sayfa açıldığında videoindirilmez. auto olarak ayarlanırsa sayfa açıldığında video hemen indirilmeye başlar, metadata olarak ayarlanırsa masaüstü ya da mobil için meta ayarlarına bakılır.
Şimdi bir örnek üzerinde bu özelliklerden bazılarını kullanalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <title>www.yazilimkodlama.com</title> </head> <body> <video controls muted height="250" width="300" poster="media/accom.jpg" preload="metadata" loop> <source src="media/monitor.mp4"> </video> </body> </html> |
Yukarıdaki örnekteki HTML kodlarına baktığımızda video tag’ i içinde controls özelliği ile videomuzda Başlat,Durdur,Ses gibi düğmelerin gözükmesini sağladık. muted özelliğini kullanarak videoaçıldığında sesin kapalı olmasını sağladık. Width ve Height özelllikleri ile genişlik ve yükseklik ayarını, poster özelliği ile ise video başlangıcında görüntülenmesini istediğimiz resmin ayarlanması işlemini gerçekleştirdik. Loop özelliğini kullanarak ise videonun bittiği zaman tekrarlanmasını ayarlamış olduk.
Şimdide video etiketinin kullanımına çok benzeyen audio etiketine bakalım. Audio etiketinde kullanabileceğimiz özellikler;
Autoplay, controls, loop, muted, preload ve src özellikleridir. Kullanımları video etiketleriyle aynı olacaktır. Şimdi bununla ilgili olarak aşağıdaki örneği inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <title>www.yazilimkodlama.com</title> </head> <body> <audio controls autoplay loop> <source src="media/Bus.mp3"> </audio> </body> </html> |
Örneği incelediğimizde media kalasörü altında Bus.mp3 dosyasının sayfa yüklendiği anda autoplay özelliği sayesinde çalmaya başlaması sağlanmakta ve loop özelliği ayarlanarak şarkının tekrar etmesinin sağlandığını görmekteyiz. controls özelliği ile müzik oynatıcının butonlarının görüntülenmesi sağlanmıştır.
Muzigi yukluyemedım ıcıne ya