“HTML Video Ekleme: Dijital Hikayelerinizi Canlandırın”

Günümüzde, web sayfalarının görselliği ve etkileşimi ön plandadır. Bu bağlamda, HTML’in video etiketi (<video> ) ile web sitenize video eklemek oldukça popüler bir yöntemdir. İşte HTML video eklemenin temel konseptleri ve örnek kod blokları:

Temel Video Etiketi Kullanımı:

HTML video eklemek için <video> etiketini kullanırız. Aşağıda temel bir video etiketi örneği bulunmaktadır:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;HTML Video Örneği&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Web Sayfamıza Hoş Geldiniz!&lt;/h1&gt;

    &lt;!-- Temel Video Etiketi --&gt;
    &lt;video width="640" height="360" controls&gt;
        &lt;source src="video.mp4" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;

&lt;/body&gt;
&lt;/html&gt;

Yukarıdaki örnekte:

width ve height: Videonun genişliği ve yüksekliği piksel cinsinden belirlenir.
controls: Oynatma kontrol panelini görüntüler (oynat, duraklat, ses kontrolü, vb.).
<source> etiketi: Farklı video formatları için destek ekler. Bu örnekte video.mp4 adlı bir video dosyasına bağlantı verilmiştir.

Video Otomatik Oynatma ve Döngü:

Videoları otomatik olarak oynatmak ve döngü içinde çalıştırmak için autoplay ve loop özelliklerini kullanabiliriz:

&lt;video width="640" height="360" controls autoplay loop&gt;
    &lt;source src="video.mp4" type="video/mp4"&gt;
&lt;/video&gt;

Altyazı Eklemek:

HTML video etiketi, altyazı eklemek için track elementini destekler:

&lt;video width="640" height="360" controls&gt;
    &lt;source src="video.mp4" type="video/mp4"&gt;
    &lt;track label="English" kind="subtitles" srclang="en" src="english.vtt"&gt;
    &lt;track label="Türkçe" kind="subtitles" srclang="tr" src="turkish.vtt"&gt;
&lt;/video&gt;

Yukarıdaki örnekte, track etiketi ile farklı dillerde altyazı dosyaları eklenmiştir (english.vtt ve turkish.vtt).

HTML video etiketi, zengin medya içeriği eklemek için güçlü bir araçtır. Yukarıdaki örneklerle başlayarak, video etiketinin sunduğu diğer özellikleri ve daha karmaşık kullanım senaryolarını keşfetmek, web sayfanıza dinamik ve etkileşimli içerik eklemenin heyecan verici bir yolunu sunabilir.

Temel Video Etiketi Kullanımı:

Video Otomatik Oynatma ve Döngü:

Altyazı Eklemek:

Related Posts

“HTML Form Attributes: Form Öğelerinin Gücü”

“HTML Canvas Graphics: Sanatı ve İnteraktifliği Birleştirme Sanatı”

“HTML5 Etiketleri: İnternet Dünyasının Temelleri”

Bir yanıt yazın Yanıtı iptal et