HTML <video> etiketi, web sayfasında video göstermek için kullanılır.
<!DOCTYPE html>
<html>
<body>
<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 oynatmayı desteklemiyor.
</video>
</body>
</html>
Nasıl Çalışır?
controls özelliği ; oynatma, duraklatma ve ses seviyesi gibi video kontrollerini ekler. Her zaman genişlik ve yükseklik niteliklerini dahil etmenizi öneriyoruz. Yükseklik ve genişlik ayarlanmamışsa video yüklenirken sayfa titreyebilir.
<source> öğesi, tarayıcının seçebileceği alternatif video dosyalarını belirtmenize olanak tanır. Tarayıcı ilk tanınan formatı kullanacaktır.
<video> ve </video> etiketleri arasındaki metin yalnızca <video> öğesini desteklemeyen tarayıcılarda görüntülenecektir.
HTML <video> Otomatik Oynatma (Autoplay)
Videoyu sayfa yüklenince otomatik başlatmak için autoplay niteliği eklenmelidir.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Tarayıcınız video oynatmayı desteklemiyor.
</video>
</body>
</html>Not: Chromium tarayıcılar çoğu durumda otomatik oynatmaya izin vermez. Ancak sessiz otomatik oynatmaya her zaman izin verilir.
Videonuzun otomatik olarak oynatılmaya başlamasını (ancak sessize alınmasını) sağlamak için otomatik oynatmanın ardından muted alma özelliğini ekleyin:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Tarayıcınız video oynatmayı desteklemiyor.
</video>
</body>
</html>Tarayıcı Desteği
<video> etiketini destekleyen ilk tarayıcı sürümleri aşağıdadır.
HTML Video Formatları
Desteklenen üç video formatı vardır: MP4, WebM ve Ogg. Farklı formatlar için tarayıcı desteği şu şekildedir:
| Tarayıcı | MP4 | WebM | Ogg |
| Edge | Evet | Evet | Evet |
| Chrome | Evet | Evet | Evet |
| Firefox | Evet | Evet | Evet |
| Safari | Evet | Evet | Hayır |
| Opera | Evet | Evet | Evet |
HTML Video Media Türleri
| Dosya Formatı | Medya Türü |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Videosu – Yöntemler, Özellikler ve Olaylar
HTML DOM, <video > öğesine ilişkin yöntemleri, özellikleri ve olayları tanımlar.
Bu, videoları yüklemenize, oynatmanıza ve duraklatmanıza, ayrıca süreyi ve ses düzeyini ayarlamanıza olanak tanır.
Ayrıca bir video oynatılmaya başladığında, duraklatıldığında vb. sizi bilgilendirebilecek DOM etkinlikleri de vardır.
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="oynatdurdur()">Oynat/Durdur</button>
<button onclick="buyut()">Büyük</button>
<button onclick="kucult()">Küçük</button>
<button onclick="normal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Tarayıcınız HTML Video Oynatmayı Desteklemiyor
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function oynatdurdur() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function buyut() {
myVideo.width = 560;
}
function kucult() {
myVideo.width = 320;
}
function normal() {
myVideo.width = 420;
}
</script>
</body>
</html>
