X

HTML Sayfasına Video Nasıl Eklenir?

HTML Sayfasına Video Nasıl Eklenir?

Merhaba, HTML Sayfasına Video Nasıl Eklenir? başlıklı yazıma hoşgeldiniz bu yazımda html sayfasına asıl video eklenir bu konuya değineceğim.

HTML sayfasına video eklemek için video etiketlerini kullanacağız.

En basit bir şekilde video eklemek için aşağıdaki kod yeterlidir.


<video src="video.mp4" width="320px" height="240px"</video>

Çıktı;

HTML Sayfasına Video Nasıl Eklenir? Resim 1

Videoya oynatma araçları eklemek için


<video src="video.mp4" width="320px" height="240px" controls=""</video>

Gördüğünüz video etiketi içine controls adında yeni bir method ekledik.

Çıktı;

HTML Sayfasına Video Nasıl Eklenir? Resim 2

Gördüğünüz gibi video oynatma araçları alt tarafta duruyor.

Videoya önyükleme, otomatik oynatma ve oynatma araçları eklemek için


<video src="video.mp4" width="320px" height="240px" controls="" preload="" autoplay=""</video>

Video etiketine önyükleme için preload methodu otomatik oynatma için ise autoplay methodunu ekledim.

Çıktı;

HTML Sayfasına Video Nasıl Eklenir? Resim 3

Gördüğünüz atlatma çubuğundaki kapalı gri önyükleme olduğunu gösteriyor.

Videoya ayriyeten ön izleme resmi eklemek için

<video poster="onizlemeresmi.jpg" src="video.mp4" height="320px" width="240px" controls="" preload="" autoplay=""></video>

Videoya ön izleme resmi eklemek için poster methodunu kullandım.

Çıktı;

HTML Sayfasına Video Nasıl Eklenir? Resim 4

Html sayfasına video eklemek bu kadar basit işte bir sonraki yazıda görüşmek üzere.

Kategoriler Html
Tuğra Yaldız: Merhaba bu alanda kısaca kendimden bahsedeceğim. Adım Tuğra, 19 yaşındayım. Ticaret lisesi mezunuyum şuan Afyon Kocatepe Üniversitesinde İşletme bölümü okuyorum. Aslen Konyalıyım Afyonkarahisar'da ailemle birlikte yaşıyorum. Yaklaşık 11 senedir bilgisayarlarla içli dışlıyım son 6 senedir kendimi internete 2 yıldır ise Web Programlamaya verdim ileri derece PHP ve HTML biliyorum CSS Javascript Jquery için kendimi geliştirmeye devam ediyorum.. Yakında yayına çıkaracağım yyazilim.com için projeler geliştiriyorum. İş çözümleriniz için mail (iletisim@tugrayaldiz.com) atabilirsiniz. Şimdilik benden bu kadar eğer sende aramıza gelmek istersen mail listemize katılman yeterli kendine iyi bak. :) Not: Web programlama dersleri için https://www.w3schools.com adresini kaynak alıyorum.