HTML5 Video
- HTML5 sürümümden önce, web sayfalarında video göstermenin bir standardı yoktu.
- HTML5 sürümünden önce, videolar sadece flash player gibi plug-in programları sayesinde gösterilebiliyordu.
- HTML5 <video> elemanı, html dökümanına video dosyaları gömmemizi sağlayan standart yol olmuştur.
Tarayıcı Desteği
Aşağıda <video> elemanını destekeleyen en düşük tarayıcı versiyonları verilmiştir.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML5 <video> Elemanı
Web sayfanızda bir video göstermek için <video> elemanı kullanılır. Aşağıda bu elemanın kullanımına dair bir örnek verilmiştir:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Tarayıcınız video tagını desteklemiyor.
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Tarayıcınız video tagını desteklemiyor.
</video>
Yukarıdaki kodları açıklayalım:
- controls kodu, video oyantıcısına, play pause ve volume gib kontrol düğmeleri ekler.
- width="320" height="240" kodları ile videomuza genişlik ve yükseklik kazandırıyoruz. Bu iki ebat özelliği her zaman tavsiye edilir.
- width="320" height="240" özellekleri belirtilmezse, videomuz yüklenirken, sayfamızda bir takım titremeler olabilir. Çünkü, tarayıcımız, bu iki özellik olmadan, videomuzun ebatlarını bilemez.
- Tarayıcınız video tagını desteklemiyor. Eğer, kullanıcının tarayıcısı, <video> elemanını desteklemiyorsa, <video>...</video> taglarındaki video içeriğinden sonraki içeriği gösterecektir.
- Birden çok <source> elemanı ile farklı uzantılarda video dosyası tanımlanabilir. Tarayıcı birincisinden itibaren okumaya çalışacaktır. Okuyunca da diğer <source> elemanlarını görmezden gelecektir.
NOT:Video içeriğinde sorun varsa bu bizden kaynaklanıyordur. Siz kendi videolarınızı kendi sayfalarınıza yükleyerek pratik yapabilirsiniz
<video> Elemanının Autoplay Özeliği
Eğer videomuzun, sayfa yüklendiğinde, otomatik olarak başlamasını istiyorsak bu özelliği kullanıyoruz. Bu özellik kullanıldığında videomuzun play, pause ve volume gibi kontrol tuşları olmaz. Örneğe dikkat edelim:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Tarayıcınız video tagını desteklemiyor.
</video>
autoplay özelliği, Safari ve Opera tarayıcılarında, mobil cihazlarda (iphone, ipad gibi) çalışmaz.
HTML5 Video - Tarayıcı Desteği
Şu anda HTML5 <video> elemanı şu 3 uzantıyı/formatı desteklemektedir: MP4, WebM ve Ogg
Aşağıda, daha ayrtıntılı bir tablo görüyoruz:
| Browser (Tarayıcı) | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (Opera 25'den sonra) | YES | YES |
Yukarıdaki video formatlarının tipleri type="video/mp4" type="video/webm" type="video/ogg" şeklinde belirtilir.
HTML5 Video - Metotlar (Methods), Özellikler (Properties) ve Olaylar (Events)
HTML5, <video> elemanı için, metotlar, özellikler ve olaylar belirtmiştir.
Bütün bunlar; videolarımızı yüklmeye, durdurmaya, çalmaya olanak tanır, ses ve süre ayarları yapmamızı sağlar.
Aşağıda bir örnek verilmiştir. (Bu kodları anlamak için, JavaScript diline yabancı olmamak gereklidir.):
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="buyuk()">Büyük Göster</button>
<button onclick="kucuk()">Küçük Göster</button>
<button onclick="normal()">Normal Göster</button>
<br>
<video id="video1" width="420">
<source src="videom.mp4" type="video/mp4">
<source src="videom.ogg" type="video/ogg">
Tarayıcınız HTML5 video tagını desteklemiyor
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function buyuk() {
myVideo.width = 560;
}
function kucuk() {
myVideo.width = 320;
}
function normal() {
myVideo.width = 420;
}
</script>
Bütün bunlar; videolarımızı yüklmeye, durdurmaya, çalmaya olanak tanır, ses ve süre ayarları yapmamızı sağlar.
Aşağıda bir örnek verilmiştir. (Bu kodları anlamak için, JavaScript diline yabancı olmamak gereklidir.):
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="buyuk()">Büyük Göster</button>
<button onclick="kucuk()">Küçük Göster</button>
<button onclick="normal()">Normal Göster</button>
<br>
<video id="video1" width="420">
<source src="videom.mp4" type="video/mp4">
<source src="videom.ogg" type="video/ogg">
Tarayıcınız HTML5 video tagını desteklemiyor
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function buyuk() {
myVideo.width = 560;
}
function kucuk() {
myVideo.width = 320;
}
function normal() {
myVideo.width = 420;
}
</script>
Bu kodlar ile videom.mp4 veya videom.ogg adındaki videomuzun ebatlarını değiştirebiliriz ve kendi üretimimiz olan play/pause tuşlarımız olur.
HTML5 Video Tagları
| Tag | Tanımı |
|---|---|
| <video> | Bir video veya film tanımlar. |
| <source> | Çoklu medya dosyaları tanımlamamızı sağlar. Yani <video> ve <audio> dosyalarını birlikte tanımlayabilir. |
| <track> | Medya playera bir text yazmamızı sağlar. |
