Web sitelerimizi içerik açısından zenginleştirebileceğimiz bir diğer eleman ise video ve ses dosyalarıdır. Bu yazımızda HTML video ve ses ekleme konusunu ele alacağız.
HTML Video Ekleme
HTML’de video eklemek için iki ayrı etiket kullanırız. Bunlar ‘video‘ ve ‘source‘ etiketleridir. Hemen nasıl kullanacağımıza bakalım.
<video width="1920" height="1080" controls>
<source src="video.mp4" type="video/mp4">
</video>Kodda kullandığımız terimleri açıklayalım.
- Controls : Videonun başlat-durdur, ses aç-kapat gibi kontrol tuşlarının görünmesi için kullanılır. Yazmadan da kullanabilirsiniz fakat sitenizdeki ziyaretçi videoyu durduramaz veya sesini kısamaz.
- Src : Videonun bulunduğu dosya adresi.
HTML Otomatik Video Oynatma (Autoplay)
Eğer videomuzun sayfa yüklendiğinde direkt olarak başlamasını istiyorsak ‘autoplay‘ etiketini kullanırız.
NOT : Eğer videonuzun aynı zamanda otomatik sesi kısık başlamasını istiyorsanız ‘muted’ etiketi kullanabilirsiniz.
<video width="1920" height="1080" autoplay muted controls>
<source src="video.mp4" type="video/mp4">
</video>HTML Ses Ekleme
HTML’de ses eklemek için, video eklemede olduğu gibi iki ayrı etiket kullanırız. Bunlar ‘audio‘ ve ‘source‘ etiketleridir. Hemen bir örnekle görelim.
<audio controls>
<source src="ses.mp3" type="audio/mpeg">
</audio>Kullandığımız terimleri yine açıklayalım.
- Controls : Sesin başlat-durdur, ses aç-kapat gibi kontrol tuşlarının görünmesi için kullanılır. Video eklemede olduğu gibi yazmadan da kullanabilirsiniz fakat, sitenizdeki ziyaretçi sesi durduramaz veya kısamaz.
- Src : Ses dosyasının bulunduğu dosya adresi.
HTML Otomatik Ses Oynatma (Autoplay)
Eğer sesin sayfa yüklendiğinde direkt olarak başlamasını istiyorsak, video eklemede olduğu gibi yine autoplay etiketini kullanırız.
<audio controls autoplay>
<source src="ses.mp3" type="audio/mpeg">
</audio>Bu yazımızda HTML video ve ses ekleme konusunu işledik. Umarım faydalı olmuştur. Ayrıca HTML derslerimizi görmek isterseniz buradan tümüne ulaşabilirsiniz.