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.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…
View Comments