HTML5 ses ve video elamanlarını direk olarak destekler. Daha önce bu elamanları sayfada kullanabilmek için çeşitli eklentilere (Flash,Silverlight v.b.) ihtiyaç duyuyorduk. <audio> ve <video> etiketleri sayesinde bu eklentilere ihtiyacımız azaldı. Video etiketi sayesinde belirli bir tür videoları (h264 ile kodlanmış mp4 uzantılı videolar) hiçbir ek eklentiye ihtiyaç duymadan sayfa içinde gösterebiliyoruz.
Şimdi bu etiketlerin nasıl çalıştığını anlamak için aşağıdaki kodlara bakalım:
Audio Etiketi<!DOCTYPE html>
<html>
<head>
<title> HTML5 ses etiketi </title>
</head>
<body>
<h1>Ses Örneği</h1>
<audio src="test.mp3" controls autoplay loop>
Tarayıcı ses etiketini desteklemiyor.
</audio></body>
</html>
Görünüm tarayıcıya göre değişmektedir. Firefox tarayıcısı şu şekilde göstermektedir.
Controls oynatma, durdurma, ses yükseltme,düşürme gibi kontroller için gereklidir.
Autoplay ise sayfa yüklendiğinde otomatik başlamasını sağlar.
Loop ise çalma sona erdiğinde dosyası tekrar oynatır.
Src ses dosyasının yerini belirtir.
Tarayıcı audio etiketini desteklese de her ses dosyasını çalamayabilir bu yüzden çeşitli formatlardaki ses dosyalarını dâhil etmekte fayda vardır. Bunun için kodumuzu şu şekilde değiştiririz.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 ses etiketi </title>
</head>
<body>
<h1>Ses Örneği</h1>
<audio controls autoplay loop>
<source src = "test.mp3" />
<source src = "test.ogg" />
Tarayıcı ses etiketini desteklemiyor.
</audio></body>
</html>
Böylece eğer tarayıcı mp3 çalamıyorsa ogg dosyasını çalacaktır.
Video EtiketiVideo oynatmak ise ses oynatmaya çok benzer.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 video etiketi </title>
</head>
<body>
<h1>Video Örneği</h1>
<video controls autoplay loop width=”640” height=”480” >
<source src = "test.mp4" />
<source src = "test.ogv" />
Tarayıcı video etiketini desteklemiyor.
</video></body>
</html>
Controls oynatma, durdurma, ses yükseltme,düşürme gibi kontroller için gereklidir.
Autoplay ise sayfa yüklendiğinde otomatik başlamasını sağlar.
Loop ise çalma sona erdiğinde dosyası tekrar oynatır.
Src video dosyasının yerini belirtir.
Video etiketinde ayrıca birde poster özelliği bulunur. Bu özellikle video oynatılmadan önce bir resim göstermemize olanak sağlar.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 video etiketi </title>
</head>
<body>
<h1>Video Örneği</h1>
<video controls loop poster=”images/video/test.jpg” width=”640” height=”480” >
<source src = "test.mp4" />
<source src = "test.ogv" />
Tarayıcı video etiketini desteklemiyor.
</video></body>
</html>
Görünüm tarayıcıya göre değişmektedir.
Düzenle Kullanıcı Tarafından 9 Eylül 2015 Çarşamba 16:15:06(UTC)
| Sebep: Sebep Bildirilmesi
