HTML Video Ekleme-Oynatma(Video Player)

HTML TEMELLERİ

HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)

HTML5
İLERİ SEVİYE

HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)

CSS TEMELİ

CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)

html5 video ekleme kodu

html5 siteye video ekleme

html5 de video ekleme

html5 video ekleme autoplay

html5 video player

html5 video player indir

html5 video player kodu

html5 video player autoplay

html5 video player indir

html5 video player example

html video player kodu

html5 video player options

html5 video player settings

html5 video oynatıcı nedir

html video oynatma

html video oynatma kodu

html video player

html5 video player code

html video player yapımı

html video player kodu

html video player free

html video player options

html video player tag

html5 video format

html5 video best format

html5 video looping

html5 video mute

html5 video muted autoplay

html5 video poster from video

html5 video autoplay and controls

Html


<video width="320" height="240" controls>
  <source src="../../videolar/intro.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Tarayıcınız bu özelliği desteklemiyor.
</video>

Şimdi işin biraz daha zevkli ve kolay haline gelelim. Html 5 sayfanıza video eklemek isterseniz yapmanız gereken şey çok basit.<video> etiketi ile <source> etiketini birlikte kullanarak ekleyebilirsiniz.

Aşağıda görmüş olduğunuz örneği inceleyiniz.<video> etiketi üzerinde controls özelliğini göreceksiniz.Bu özellik ile başlat,durdur ve ses çubuğu işlevleri görünmüş oluyor. Daha önce öğrenmediğiniz çok yabancı parametreler yok sadece type parametresine ait video/mp4 ve video/ogg değerlerini daha önce görmemiş olabilirsiniz. Bunları anlamak çok da zor değil, video uzantılarını burada belirtmiş oluyoruz. Yalnız dikkat ederseniz ki iki tane <source> etiketi var fakat bir video var. İkiside kaynak belirttiği için sadece ilk gelen kaynak etiketini çalıştırıyor.


<video width="320" height="240" controls>
  <source src="../../videolar/intro.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Tarayıcınız bu özelliği desteklemiyor.
</video>

1- Video Formatları ve Tarayıcı Desteği

<video> etiketinde videoları destekleyen üç uzantı vardır. Bunlar tarayıcılara göre tablo şeklinde aşağıda gösterilmiştir..

TARAYICI	MP4	WebM	Ogg
Internet Explorer	Evet	Hayır	Hayır
Chrome	Evet	Evet	Evet
Firefox	Hayır	Evet	Evet
Safari	Evet	Hayır	Hayır
Opera	Hayır	Hayır	Evet

Temel kullanımı gördük. Şimdi biraz özelliklerinden bahsedelim..

2-loop Özelliği

Videounun tekrar oynatılmasını sağlar.


<video width="320" height="240" controls loop>
  <source src="../../videolar/intro.mp4" type="video/mp4">
</video>

3-muted Özelliği

Video sesi kapalı oynatılır.


<video width="320" height="240" controls muted>
  <source src="../../videolar/intro.mp4" type="video/mp4">
</video>

4-poster Özelliği

Video için kapak resmi tanımlamanızı sağlar.


<video width="320" height="240" poster="../../resimler/intro.png" controls>
  <source src="../../videolar/intro.mp4" type="video/mp4">
</video>

5-autoplay Özelliği

Video otomatik olarak başlatılır.


<video width="320" height="240" controls autoplay>
  <source src="../../videolar/intro.mp4" type="video/mp4">
</video>

Enes KILIÇ
Webmaster