HTML5 ile Video ve Ses Kullanımı

Yorumlar

HTML5, web sayfalarında multimedya içeriklerini desteklemek için güçlü özellikler sunar. <video> ve <audio> etiketleri sayesinde harici eklentilere gerek kalmadan video ve ses dosyaları oynatılabilir. Bu yazıda, HTML5 ile video ve ses kullanımını detaylıca inceleyeceğiz.

HTML5 Video Kullanımı

HTML5'te <video> etiketi kullanılarak videolar doğrudan web sayfasına eklenebilir. İşte temel bir video oynatma örneği:

HTML

<video width='640' height='360' controls>
    <source src='video.mp4' type='video/mp4'>
    Tarayıcınız video etiketini desteklemiyor.
</video>

Video Etiketinin Özellikleri

controls: Oynatma, duraklatma gibi kontrolleri gösterir.
autoplay: Sayfa yüklendiğinde videonun otomatik başlamasını sağlar.
loop: Video bittiğinde tekrar başlamasını sağlar.
muted: Videoyu varsayılan olarak sessiz oynatır.
poster: Videoyu başlatmadan önce gösterilecek bir önizleme görseli belirler.

YouTube veya Vimeo Videosu Gömme

Harici video platformlarından içerik eklemek için <iframe> kullanılabilir:

HTML

<iframe width='640' height='360' src='https://www.youtube.com/embed/example' frameborder='0' allowfullscreen></iframe>

HTML5 Ses Kullanımı

Web sayfalarına ses eklemek için <audio> etiketi kullanılır. İşte temel bir ses oynatma örneği:

HTML

<audio controls>
    <source src='ses.mp3' type='audio/mpeg'>
    Tarayıcınız ses etiketini desteklemiyor.
</audio>

Ses Etiketinin Özellikleri

controls: Kullanıcı için ses oynatma kontrollerini gösterir.
autoplay: Sayfa yüklendiğinde sesi otomatik oynatır.
loop: Sesin sürekli tekrar etmesini sağlar.
muted: Varsayılan olarak sesi kapatır.

HTML5'in sunduğu <video> ve <audio> etiketleri, multimedya içeriklerini kolayca web sayfalarına entegre etmeyi sağlar. Doğru özellikleri kullanarak, kullanıcı dostu bir deneyim sunabilirsiniz.

Paylaş: Facebook X LinkedIn WhatsApp

Önceki Yazı

SEO Uyumlu HTML: Doğru Etiket Kullanımı ve Yapısal Veri

Sonraki Yazı

HTML5 Canvas ile Basit Çizimler Yapmak