HTML5 ile Video ve Ses Kullanımı

HTML5 ile Video ve Ses Kullanımı

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:

<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:

<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:

<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.