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.


What's Your Reaction?

love
0
love
hate
0
hate
win
0
win
geeky
0
geeky
omg
0
omg
lol
0
lol
fail
0
fail
fun
0
fun
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 İçin DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.