HTML Video ve Müzik Ekleme – Ahmet Cansever
Pazartesi , 27 Şubat 2017
Anasayfa » HTML DERSLERİ » HTML Video ve Müzik Ekleme

HTML Video ve Müzik Ekleme

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.

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.

html_video

Ş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.

Ö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.

html_audio

Hakkında Ahmet C

Yorum Yap

Wordpress Tema indir