HTML Video Ekleme-Oynatma(Video Player)

• ANASAYFA
• HTML
• CSS
• İLETİŞİM

• ANASAYFA
• İLETİŞİM

menu

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 koduhtml5 siteye video eklemehtml5 de video eklemehtml5 video ekleme autoplayhtml5 video playerhtml5 video player indirhtml5 video player koduhtml5 video player autoplayhtml5 video player indirhtml5 video player examplehtml video player koduhtml5 video player optionshtml5 video player settingshtml5 video oynatıcı nedirhtml video oynatmahtml video oynatma koduhtml video playerhtml5 video player codehtml video player yapımıhtml video player koduhtml video player freehtml video player optionshtml video player taghtml5 video formathtml5 video best formathtml5 video loopinghtml5 video mutehtml5 video muted autoplayhtml5 video poster from videohtml5 video autoplay and controls HTML Video Ekleme-Oynatma(Video Player)

Html

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.

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>

3-muted Özelliği

Video sesi kapalı oynatılır.

</video>

4-poster Özelliği

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

</video>

5-autoplay Özelliği

Video otomatik olarak başlatılır.

</video>

Paylaş:

Tweet

Enes KILIÇWebmaster