Html5 Video Etiketi ve Kullanımı

Merhaba arkadaşlar bugün sizlerle html5 video etiketi nasıl kullanılır , html5 ile video nasıl oynatabiliriz , oynattığımiz videoyu nasıl kontrol edebiliriz , bu html5 video etiketini hangi tarayıcılar destekliyor , hangi tarayıcı hangi formatta videoları oynatabiliyor gibi sorulara cevap bulmaya çalışacağız.

Html5 hayatımıza tam manası ile girmeye hazırlanıyor şu ana kadar girmemesinin tek nedeni html5 özelliklerini desteklemeyen tarayıcılar idi. Ama tarayıcılar artık güncellemeler ile html5 ‘in bir çok özelliğini destekler hale geldi ve bu sevindirici.

Video oynatmak için flash player kullandığımız zamanlar artık geride kalıyor. Video izlemek için ek bir uygulama indirmekten ve flash player desteklemeyen telefonlarda video oynatamamaktan / izleyememekten kurtuluyoruz.

Standart Video Etiketi

Kodları yine yorum satırları halinde açıklayacağım. Gelin bakalım html5 video etiketi nasıl kullanılıyormuş ;

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html5 Video Oynatıcı</title>
</head>
<body>
    <!--
    Video etiketimizi açıyoruz width ve height değerleri ile videomuzun
    genişlik ve yüksekliğimizi belirliyoruz. Burada yazdığımız controls
    parametresi videoyu başlatıp durduracağimız ileri saracağımız ve
    ses açıp kapatabileceğimiz kontrollerimizi getiren parametre.
 -->
<video width="360" height="280" controls>
    <!--
        Source etiketimizi adı üstünde video kaynağımızı belirleyeceğimiz
        etikettir. src kısmına videomuzun yolunu type kısmına ise video/uzanti
        şeklinde değerlerimizi giriyoruz.
    -->
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    <!--
        Tarayıcımız video etiketini desteklemiyor ise uyarı veriyoruz.
    -->
    Tarayıcınız video etiketini desteklemiyor.
</video>
</body>
</html>

 

Yukarıdaki kodlarımızı yazdıktan sonra kodlarımızı çalıştırıyoruz ve karşımıza aşağıdaki gibi bir görüntü çıkacak ve kodumuz düzgün bir şekilde çalışmaya başlayacaktır ;

video-player-onizleme

görüldüğü üzere kodlarımız çalıştı ve videomuz ve bu videomuzu kontrol edebileceğimiz araçlarımız geldi. Bunların arasında durdur/başlat , ileri/geri sar , video süresi , ses açma/kapama/kısma ve tam ekran görüntüleme kontrolleri bulunmaktadır.

Kendi Kontrollerimizi Oluşturalım

Peki biz bu kontrollerin hepsini kullanmak zorunda mıyız ? Yani ben bir web sitesine video alanı yapacağım ve durdur/başlat butonu benim işimi görüyor ama bu durdur/başlat butonunu da ben tasarlamak istiyorum. Çok şey istiyorum gibi görünse de bu söylediklerimi yapmak çok kolay. Video etiketine javascript ile müdahale edebiliyoruz ve istediğimiz etkileşimi verebiliyoruz.

Gelin bir durdur/başlat butonlu ve genişlik ve yüksekliğini değiştirebildiğimiz bir oynatıcı yapalım ;

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html5 Video Oynatıcı</title>
    <style type="text/css">
        /* Bir kaç css kodu ile linklerimize şekil veriyoruz. */
        a{
            display: block;
            width: 92px;
            text-align: center;
            float: left;
            font-size: 13px;
            text-decoration: none;
            margin-right: 12px;
            font-family: Arial;
            padding: 10px;
            background: #333;
            color:#eee;
        }
 
        .kontrol{
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
 
<!--
    Control linklerimizi oluşturup onclick olaylarına javascript
    ile aşağıda oluşturduğumuz fonksiyonlarımıza bağlıyoruz.
-->
<div class="kontrol">
    <a href="#" onclick="baslatDurdur()">Başlat / Durdur</a>
    <a href="#" onclick="videoBuyult()">Genişliği Büyüt</a>
    <a href="#" onclick="videoKucult()">Genişliği Küçült</a>
</div>
<!--
    Video etiketimizi açıyoruz width değerlerimiz ile videomuzun
    genişlik değerini belirliyoruz. Bu genişlik değeri javascript
    kodlarımız ile değişecektir. Daha önce yazdığımız controls
    parametresini burada yazmıyoruz ki kendi kontrollumuzu yapalım.Video
    etiketimizi kullanabilmek icin "video" şeklinde bir id belirliyoruz.
 -->
<video width="360" id="video">
    <!--
        Source etiketimizi adı üstünde video kaynağımızı belirleyeceğimiz
        etikettir. src kısmına videomuzun yolunu type kısmına ise video/uzanti
        şeklinde değerlerimizi giriyoruz.
    -->
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    <!--
        Tarayıcımız video etiketini desteklemiyor ise uyarı veriyoruz.
    -->
    Tarayıcınız video etiketini desteklemiyor.
</video>
 
    <!--
        Kontrol fonksiyonlarımızı oluşturacağımız javascript bloğu
    -->
    <script type="text/javascript">
        // video etiketimizi belirledigimiz id ile seçerek benimVideom değişkine atıyoruz.
        var benimVideom = document.getElementById("video");
 
        // baslat/durdur fonksiyonumuzu oluşturuyoruz.
        function baslatDurdur()
        {
            // benimVideom.paused ise yani video duraklatılmış ise
            if (benimVideom.paused){
                // benimVideom.play() ile videoyu oynatıyoruz.
                benimVideom.play();
            // eğer video zaten oynatılıyor ise
            }else{
                // benimVideom.pause() ile videoyu durduruyoruz.
                benimVideom.pause();
            }
        }
 
        // videomuzu büyülteceğimiz fonksiyonumuzu oluşturuyoruz.
        function videoBuyult()
        {
            // benimVideom.width ile genişliğini 560px e çıkartıyoruz.
            benimVideom.width=560;
        }
 
        // videomuzu küçülteceğimiz fonksiyonumuzu oluşturuyoruz.
        function videoKucult()
        {
            // benimVideom.width ile genişliğini 360px e düşürüyoruz.
            benimVideom.width=360;
        }
    </script>
</body>
</html>

 

Kodlarımızı çalıştırdığımızda aşağıdaki gibi bir görüntü çıkacaktır.

html5-video-player-controller

Burada butonlara tıkladığımızda bağlı bulunduğu fonksiyonlar işleyecek , videomuzu durudup başlatabilecek ve bizim verdiğimiz genişlik ile büyüyüp küçülebilecektir.

Tarayıcı Desteği

Html5 video etiketini Internet Explorer 9 ve üstü , Chrome , Safari ,Firefox ve Opera tarafından desteklemekte. Tarayıcılar video etiketini desteklese dahi diğer bir konuda da seçici davranıyorlar , video formatları ;

İnternet Explorer’ın desteklediği formatlar : MP4
Chrome ‘ nin desteklediği formatlar : MP4, WebM, OGG
Firefox ‘ un desteklediği formatlar : WebM, OGG
Safari ‘ nin desteklediği formatlar : MP4
Opera ‘ nın desteklediği formatlar : WebM, OGG.

Videolar arası format değişimini https://cloudconvert.org sitesinden online olarak yapabilirsiniz.

Toparlarsak html5 video etiketi web camiası adına güzel bir gelişme. Artık mobil tarayıcılarda hiçbir sorun yaşamadan video oynatabileceğimiz gibi flash video oynatıcılardan da kurtulmuş oluyor.

Bir sonraki makalede görüşmek üzere.

Kaynak : http://www.w3schools.com/html/html5_video.asp

  • Volkan

    ben sayfanın arkaplanına bir youtube videosu koydum. eklediğim kodda sadece false, true şeklinde müzikli yada müziksiz arkaplanda oynuyor. ben müzik çalarken müziği kapatmayı ziyaretçinin tercihine bırakmak istiyorum. chrome’da sekmeye sağ tıklayıp tarayıcı sesi aç/kapa var ama bir çok ziyaretçi bundan habersiz. benim sormak istediğim şu; html sayfaya ekleyebileceğim tarayıcının sesini açma kapama gibi bir kod var mı? youtube sesini açma kapatmaktan bahsetmiyorum direk tarayıcı sesini açıp kapayacak.?