Html5 Video Etiketi ve Kullanımı
emrahozgilik · Posted on 18 Ağustos 2016 18 Ağustos 2016
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ş ;
<title>Html5 Video Oynatıcı</title>
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.
Tarayıcımız video etiketini desteklemiyor ise uyarı veriyoruz.
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 ;
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
Gelin bir durdur/başlat butonlu ve genişlik ve yüksekliğini değiştirebildiğimiz bir oynatıcı yapalım ;
/* Bir kaç css kodu ile linklerimize şekil veriyoruz. */
ile aşağıda oluşturduğumuz fonksiyonlarımıza bağlıyoruz.
<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>
Video etiketimizi açıyoruz width değerlerimiz ile videomuzun
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">
// video etiketimizi belirledigimiz id ile seçerek benimVideom değişkine atıyoruz.
var benimVideom = document.getElementById("video");
// baslat/durdur fonksiyonumuzu oluşturuyoruz.
// benimVideom.paused ise yani video duraklatılmış ise
// benimVideom.play() ile videoyu oynatıyoruz.
// eğer video zaten oynatılıyor ise
// benimVideom.pause() ile videoyu durduruyoruz.
// videomuzu büyülteceğimiz fonksiyonumuzu oluşturuyoruz.
// benimVideom.width ile genişliğini 560px e çıkartıyoruz.
// videomuzu küçülteceğimiz fonksiyonumuzu oluşturuyoruz.
// benimVideom.width ile genişliğini 360px e düşürüyoruz.
Kodlarımızı çalıştırdığımızda aşağıdaki gibi bir görüntü çıkacaktır.
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.
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.
Kaynak : http://www.w3schools.com/html/html5_video.asp
html 5 ile video nasıl oynatılır, html 5 video nasıl kullanılır, html 5 video oynatıcı, html 5 video player
© 2020 Emrah Özgilik