Merhabalar, bu yazımda bir sayfaya nasıl video ekleyebiliriz buna bakacağız.
Html5 öncesinde video oynatmak için bir eklentiye ihtiyaç vardı.
Html5 ile birlikte gelen <video> etiketiyle web sayfalarında eklenti kullanmadan video oynatma işlemi yapılabilmektedir.
Kullanımı
<video src=""></video>Burada src kısmına projemiz içinde bulunan video adresini gösteriyoruz. Bir video indirdim ve klasör içine koydum.
Proje klasörümüz içinde bulunan Test.mp4 isimli video’yu sayfamız içine ekleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="Videos/Test.mp4"></video>
</body>
</html>
Videomuz gözüktü ancak başlamıyor bizde şu anda bir kontrole sahip değiliz.
Bunun için controlleri aktive etmeliyiz.
<video src="Videos/sago.mp4" controls></video>controls attribute’u video için oynatma, durdurma, ses ayarlama gibi kontrolleri ekler.
Bu video sayfa açılır açılmaz başlasın istiyorsak autoplay attribute’unu eklemek yeterlidir.
<video src="Videos/sago.mp4" controls autoplay></video>Eğer video bittikten sonra tekrar başlasın istiyorsak loop attribute’unu kullanırız.
<video src="Videos/sago.mp4" controls autoplay loop></video>Video boyutunu ayarlayabiliriz.
<video src="Videos/sago.mp4" controls autoplay loop width="100%" height="400px"></video>Video sesi başlangıçta kapalı gelsin istersek muted özelliği kullanılır.
<video src="Videos/sago.mp4" controls autoplay loop muted width="100%" height="400px"></video>Video eklemenin farklı bir yolu aşağıdaki gibidir.
<video controls>
<source src="Videos/Test.mp4#t=00:01:00">
</video>Bir videoyu istediğimiz yerinden başlatmak için #t=saat:dakika:saniye yöntemini uygularız.
Aşağıdaki örnekte videoyu 1. dakikadan başlatıyoruz.
<video controls>
<source src="Videos/Test.mp4#t=00:01:00">
</video><video> elementi Html öğesi olduğu için CSS ile stil uygulayabilirsiniz. Kenarlık ekleyebilir, opaklığı ayarlayabilir, bir filtre uygulayabilir veya videoda 3D dönüşümü yapabilirsiniz. Örneğin, filter: grayscale(100%); videonuzu siyah beyaz videolara dönüştürebilirsiniz
<video controls autoplay loop muted width="50%" height="400px" style="filter:grayscale(100%)" >
<source src="Videos/Test.mp4#t=00:01:00">
</video>Video ile ilgili söyleyeceklerimiz şimdilik bu kadar bir sonraki bölümde görüşmek üzere.
