FrontEnd Developer Road Map

FrontEnd Developer RoadMap – HTML 5 Tutorial 32 Video Ekleme – Video Etiketi

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.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

View Comments

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

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.…

2 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

2 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

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…

4 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

4 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago