HTML5: Video dosyası ekleme

17 Nisan 2017

Şimdiye kadar bir sayfada direkt olarak video göstermek, HTML özellikleri arasında yer almıyordu. Daha önce bir takım eklentiler aracılığıyla video dosyaları oynatılıyordu. Hatta farklı tarayıcılarda farklı eklentiler kullanmak bile gerekebiliyordu. HTML5, web sayfalarına video eklemek için standart bir yol ile yeni bir öge tanımlamaya olanak sağlıyor.

Nasıl çalışır?

<video> etiketi açılır, içine <source> etiketi ile video dosyasının kaynağı ve tipi yazılır, ardından </video> etiketi kapatılır. Ayrıca HTML5 video etiketlerini desteklemeyen tarayıcılar için video etiketlerinin içine uyarı eklemeniz gerekecektir.

<video width="640" height="480" controls="controls">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" />
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" />
    Kullandığınız tarayıcı video etiketlerini desteklemiyor.
</video>

Videolar için controls özniteliği "Play", "Pause" ve "Volume" gibi denetimler ekler.

Ayrıca her zaman width ve height niteliklerini dâhil etmek iyi bir fikirdir. Yüksekliği ve genişliği ayarlarsanız sayfa yüklendiğinde video için gerekli alan ayrılmış olacaktır.

Şu anda <video> ögesi için desteklenen dosya formatları şöyledir: MP4, WebM ve Ogg.

Document Object Model (DOM)

HTML5 video elemanının yöntemleri (methods), özellikleri (properties) ve olayları (events) vardır. Bu sayede basit bir şekilde ögeleri okuma, özellikleri belirleme ve yöntemleri nasıl çağırdığımız işlenmektedir.

<div>
    <p>
        <button onclick="playPause()">Oynat/Durdur</button>
        <button onclick="makeBig()">Büyüt</button>
        <button onclick="makeSmall()">Küçült</button>
        <button onclick="makeNormal()">Normal</button>
        <!-- onclick özniteliğinin kullanılması tavsiye edilmemektedir. --> 
    </p>
    <video id="video" width="640">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" />
        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
        Kullandığını tarayıcı HTML5 video etiketlerini desteklemiyor.
    </video>
</div>
<script type="text/javascript"> 
    var myVideo=document.getElementById("video");
    function playPause(){ 
        if (myVideo.paused) 
          myVideo.play(); 
        else 
          myVideo.pause(); 
    } 
    function makeBig(){ 
        myVideo.width=790; 
    } 
    function makeSmall(){ 
        myVideo.width=540; 
    } 
    function makeNormal(){ 
        myVideo.width=640; 
    } 
</script>

Aşağıda tüm gelişmiş tarayıcılar tarafından desteklenen yöntemler, özellikler ve olaylar listelenmiştir.

Yöntemler: play() • pause() • load() • canPlayType

Özellikler: currentSrc • currentTime • videoWidth • videoHeight • duration • ended • error • paused • muted • seeking • volume • height • width

Olaylar: play • pause • progress • error • timeupdate • ended • abort • empty • emptied • waiting • loadedmetadata

Bağlantılı dersler:
HTML5: Giriş
HTML5: Ses dosyası ekleme
HTML5: Sürükle ve bırak özelliği