HTML5 - Ses ve Video
HTML5 özellikleri, Flash'a ihtiyaç duymadan yerel ses ve video desteğini içerir.
HTML5 <audio> ve <video> etiketleri, bir web sitesine medya eklemeyi kolaylaştırır. Ayarlaman gerekiyorsrc medya kaynağını tanımlamak ve kullanıcının medyayı oynatabilmesi ve duraklatabilmesi için bir kontrol özelliği eklemek için özellik.
Video Gömme
İşte web sayfanıza bir video dosyası yerleştirmenin en basit şekli -
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>Geçerli HTML5 taslak özelliği, tarayıcıların video etiketinde hangi video biçimlerini desteklemesi gerektiğini belirtmez. Ancak en yaygın kullanılan video biçimleri şunlardır:
Ogg - Thedora video codec'i ve Vorbis ses codec'i içeren Ogg dosyaları.
mpeg4 - H.264 video codec'i ve AAC ses codec'i içeren MPEG4 dosyaları.
Medya türü ve diğer birçok öznitelikle birlikte medyayı belirtmek için <source> etiketini kullanabilirsiniz. Bir video öğesi, birden çok kaynak öğeye izin verir ve tarayıcı, tanınan ilk biçimi kullanır -
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Video Özelliği Spesifikasyonu
HTML5 video etiketi, kontrolün görünümünü ve hissini ve çeşitli işlevlerini kontrol etmek için bir dizi özelliğe sahip olabilir -
| Sr.No. | Öznitelik ve Açıklama |
|---|---|
| 1 | autoplay Bu Boolean niteliği belirtilirse, video, verileri yüklemeyi bitirmek için durmadan yapabildiği anda otomatik olarak oynatılmaya başlayacaktır. |
| 2 | autobuffer Bu Boolean özelliği belirtilirse, video otomatik olarak oynatılmak üzere ayarlanmasa bile otomatik olarak arabelleğe almaya başlar. |
| 3 | controls Bu özellik mevcutsa, kullanıcının ses seviyesi, arama ve oynatmayı duraklatması / devam ettirmesi dahil olmak üzere video oynatmayı kontrol etmesine izin verecektir. |
| 4 | height Bu özellik, CSS pikselleri olarak videonun görüntüleme alanının yüksekliğini belirtir. |
| 5 | loop Bu Boolean niteliği belirtilirse, videonun sona ulaştıktan sonra otomatik olarak başlangıca geri gitmesine izin verir. |
| 6 | preload Bu özellik, videonun sayfa yüklendiğinde yükleneceğini ve çalıştırılmaya hazır olacağını belirtir. Otomatik oynatma varsa yok sayılır. |
| 7 | poster Bu, kullanıcı oynayana veya arayana kadar gösterilecek bir resmin URL'sidir. |
| 8 | src Yerleştirilecek videonun URL'si. Bu isteğe bağlıdır; bunun yerine, gömülecek videoyu belirtmek için video bloğu içindeki <source> öğesini kullanabilirsiniz. |
| 9 | width Bu özellik, videonun görüntüleme alanının genişliğini CSS pikselleri olarak belirtir. |
Ses Gömme
HTML5, aşağıdaki gibi bir HTML veya XHTML belgesine ses içeriğini gömmek için kullanılan <audio> etiketini destekler.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>Geçerli HTML5 taslak özelliği, tarayıcıların ses etiketinde hangi ses biçimlerini desteklemesi gerektiğini belirtmemektedir. Ancak en sık kullanılan ses formatlarıogg, mp3 ve wav.
<Source & ggt; Medya türü ve diğer birçok özellik ile birlikte medyayı belirtmek için etiket. Bir ses öğesi, birden çok kaynak öğeye izin verir ve tarayıcı, tanınan ilk biçimi kullanır -
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Ses Özniteliği Belirtimi
HTML5 ses etiketi, denetimin görünümünü ve hissini ve çeşitli işlevlerini kontrol etmek için bir dizi niteliğe sahip olabilir -
| Sr.No. | Öznitelik ve Açıklama |
|---|---|
| 1 | autoplay Bu Boolean niteliği belirtilirse, ses, verileri yüklemeyi bitirmek için durmadan yapabildiği anda otomatik olarak çalmaya başlayacaktır. |
| 2 | autobuffer Bu Boolean niteliği belirtilirse, otomatik olarak çalınacak şekilde ayarlanmasa bile ses otomatik olarak arabelleğe almaya başlayacaktır. |
| 3 | controls Bu öznitelik mevcutsa, kullanıcının ses düzeyi, arama ve kayıttan yürütmeyi duraklatma / devam ettirme dahil olmak üzere ses çalmayı kontrol etmesine izin verecektir. |
| 4 | loop Bu Boolean niteliği belirtilirse, sona ulaştıktan sonra sesin otomatik olarak başlangıca geri aranmasına izin verir. |
| 5 | preload Bu özellik, sesin sayfa yüklendiğinde yükleneceğini ve çalışmaya hazır olacağını belirtir. Otomatik oynatma varsa yok sayılır. |
| 6 | src Yerleştirilecek sesin URL'si. Bu isteğe bağlıdır; bunun yerine, gömülecek videoyu belirtmek için video bloğu içindeki <source> öğesini kullanabilirsiniz. |
Medya Olaylarını Yönetme
HTML5 ses ve video etiketi, JavaScript kullanarak denetimin çeşitli işlevlerini kontrol etmek için bir dizi özniteliğe sahip olabilir -
| S.No. | Etkinlik Açıklaması |
|---|---|
| 1 | abort Bu olay, oynatma durdurulduğunda oluşturulur. |
| 2 | canplay Bu olay, medyanın oynatılabilmesi için yeterli veri mevcut olduğunda oluşturulur. |
| 3 | ended Bu olay, oynatma tamamlandığında oluşturulur. |
| 4 | error Bu olay, bir hata meydana geldiğinde üretilir. |
| 5 | loadeddata Bu olay, medyanın ilk karesinin yüklenmesi tamamlandığında oluşturulur. |
| 6 | loadstart Bu olay, medyanın yüklenmesi başladığında oluşturulur. |
| 7 | pause Bu olay, oynatma duraklatıldığında oluşturulur. |
| 8 | play Bu olay, oynatma başladığında veya devam ettiğinde oluşturulur. |
| 9 | progress Bu olay, medyanın indirilme sürecini bildirmek için periyodik olarak oluşturulur. |
| 10 | ratechange Bu olay, oynatma hızı değiştiğinde oluşturulur. |
| 11 | seeked Bu olay, bir arama işlemi tamamlandığında oluşturulur. |
| 12 | seeking Bu olay, bir arama işlemi başladığında üretilir. |
| 13 | suspend Bu olay, medyanın yüklenmesi askıya alındığında oluşturulur. |
| 14 | volumechange Bu olay, ses seviyesi değiştiğinde üretilir. |
| 15 | waiting Bu olay, istenen işlem (oynatma gibi) başka bir işlemin (arama gibi) tamamlanmasını beklerken ertelendiğinde oluşturulur. |
Aşağıda verilen videonun oynatılmasına izin veren örnek verilmiştir -
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value = "Play"/>
</form>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Medya Türü için Sunucuları Yapılandırma
Çoğu sunucu varsayılan olarak Ogg veya mp4 medyasını doğru MIME türleriyle sunmaz, bu nedenle büyük olasılıkla bunun için uygun yapılandırmayı eklemeniz gerekir.
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4