Yazar: Merhaba değerli web tasarım meraklıları!
Bu yazımda sizlere html 5 ile gelen iki elementten bahsedeceğim.
Bu elementlerimiz vidio ve audio etiketleridir.
Video ve audio etiketlerini ve bu etiketlerin aldığı parammetreleri öğreneceğiz ve örnekler yaparak bilgimizi pekiştireceğiz.
Öncelikle video etiketinden ve video etiketinin özelliklerinden bahsederek yazımıza başlayalım.
<video> etiketinin özellikleri:
autoplay : Bu özellik sayfa açıldığında videonun otomatik olarak başlamasını sağlar.
controls : Bu özellik video oynatıcısında Başlat, Durdur,vs.. butonların görüntülenmesini sağlar.
height: video oynatıcısının yüksekliğini belirlemek için kullanılır.
width: video oynatıcısının genişliğini belirlemek için kullanılır.
loop: video bittiğinde tekrar edip etmeyeceğini belirlemek için kullanılır.
muted : Video açıldığında sessiz modda açılmasını sağlar.
poster : Video açılmadan önceki başlangıç resmini ayarlamak için kullanılır.
src: videonun yolunu yani url adresini beriltmek için kullanılır.
preload: Videonun yüklenmesi ile ilgili ayarları içerir. 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.
Yukarıdaki belittiğim özellikler ile html 5 video eklenip ayarları yapılmaktadır şimdi bir örnek yaparak bunu daha iyi anlayabiliriz.
örnek:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> sayfaya video ekleme </title>
</head>
<body>
<video controls muted height=”250″ width=”300″ poster=”video/resim.jpg” preload=”metadata” loop>
<source src=”sizinsiteniz.com/video.mp4″>
</video>
</body>
</html>
Yukarıdaki örnekteki HTML kodlarına bakalım: video elementi içinde controls özelliği ile videomuzda Başlat,Durdur,Ses gibi düğmelerin gözükmesini sağladık.
muted özelliğini kullanarak video açıldığında sesin kapalı olmasını belirledik.
Width ve Height özelliklerini kullanarak genişlik ve yükseklik ekledik, poster özelliği
ile ise video başlangıcında görüntülenmesini istediğimiz resmin ayarlanması işlemini sağladık. Loop özelliğini kullanarak ise videonun bittikten sonra tekrarlanmasını ayarlamış olduk.
video etiketinin kullanımı bu şekildedir örneğimizi inceleyerek sizlerde sayfanıza videolar ekleyebilirsiniz.
Bir diğer html elementi ise audio elementidir şimdi bu elementi inceleyelim.
<audio> elementinin kullanımı ve aldığı bir çok özellik itibariyla <video> elementine benzemektedir.
<audio> elementinin almış olduğu özellikleri şöyle sıralayabiliriz:
Autoplay, controls, loop, muted, preload ve src özellikleridir. Kullanımları video etiketleriyle aynı olacaktır.
Tıpkı yukarıdaki örnekte olduğu gibi özelliklerimizi audio elementine uygulayalım.
örnek:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> html 5 ile ses ekleme </title>
</head>
<body>
<audio controls autoplay loop>
<source src=”websiteniz.com/ses/dosya.mp3″>
</audio>
</body>
</html>
Bu örneğimizi incelersek eğer controls özelliği ile ses oynatıcının butonlarının gözükmesi sağlanmıştır.
autoplay özelliği ile sayfa açıldığında sesin hemen çalmasını sağladık, aynı zamanda loop özelliğini kullanarakta ses çalma işleminin tekrarlanmasını sağlamış olduk.
Html 5 dökümanımıza ve ya sayfamıza bir video ve audio elementleri ekleyebiliriz, video ve medya öğelerini oynatabiliriz. bu konuda anlatılması gereken tüm bilgiler bu kadar. soru ve sorunlarınızı yorum olarak bana iletebilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan html 5 form etiketleri ve kullanımı başlıklı makalemizde html 5 form etiketi, html 5 form kullanımı ve html 5 form yapımı hakkında bilgiler verilmektedir.