HTML Video ve Müzik Ekleme – Ahmet Cansever
Anasayfa » HTML DERSLERİ » HTML Video ve Müzik Ekleme
HTML Video ve Müzik Ekleme
Son Güncellenme : 14th Ekim, 2016Bu 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.
<!doctype html><html><head><title>www.ahmetcansever.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.
<!doctype html><html><head><title>www.ahmetcansever.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.
HTML Audio Özellikleri Ayarlama HTML Video Ekleme HTML Video Etiketi Kullanımı HTML video Loop AutoPlay HTML Video Özellikleri	2016-10-14
Etiketler:HTML Audio Özellikleri Ayarlama HTML Video Ekleme HTML Video Etiketi Kullanımı HTML video Loop AutoPlay HTML Video Özellikleri
Hakkında Ahmet C Önceki Windows 10 Zoom Özelliğini (Büyüteç) Kullanma
İleri C# Girilen İki Sayı Arasındaki Asal Sayıları Bulma