HTML5 VİDEO EKLEME - WebCebir

HTML5 VİDEO EKLEME

HTML 5 <video> etiketi, bir HTML belgesinde video elementi belirtmek için kullanılır. Örneğin, ziyaretçilerinizin dinleyip izleyebilmesi için web sayfanıza bir müzik videosu yerleştirebilirsiniz.

Modern tarayıcılarda, sayfanıza video eklenmesi, resim ekleme kadar kolay. Artık özel eklentilerle uğraşmaya veya karmaşık kodlara ihtiyaç duymuyorsunuz, tek bir öğeyle bunu yapabilirsiniz.

Gerçekten video ekleme ne kadar basit olduğunu bir örnekle başlayalım:

ÖRNEK:

<video src="video.mp4" controls="controls"> </video>

Yukarıda ki kodlar Sayfanıza basit bir video yerleştirmeniz ve bir kullanıcının videoyu oynatabilmesi, duraklatması veya başka şekilde kontrol edebilmesi için temel denetimleri göstermeniz için tek ihtiyacınız olan kodlar budur.

HTML5 <video> etiketi, videonun nasıl oynatılacağını belirten nitelikleri kabul eder. Öznitelikleri olarak, preload , autoplay , loop ve daha fazlasını içerir. Desteklenen niteliklerin tam listesi için aşağıya bakınız.

Tarayacı destegi

Element
<video>	4.0	9.0	3.5	4.0	10.5

HTML5'te video görüntülemek için yapmanız gereken şu kodları eklemek :

ÖRNEK:

<video width="600" height="500" controls="controls" > <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Tarayıcınız video etiketini desteklemiyor. </video>

ÇIKTI:

Tarayıcınız video etiketini desteklemiyor.

Website hızını artırmak için, source özniteliğine her zaman type özniteliğini eklemeniz gerekir. Aksi halde, tarayıcının oynatabileceği videoyu bulana kadar tarayıcı her video dosyasını yükler.

VİDEO ÖZELLİKLER

<video> öğesinin varsayılan davranışını değiştirebilecek veya geliştirebilen birkaç özel nitelik vardır.

src : Öğesini kullanarak birden fazla kaynak dosyası belirtebilirsiniz. Kaynak elemanı, kullanıcının tarayıcısından birinin desteklemediği durumlarda birden çok biçimi bir geri bildirim olarak belirtmenizi sağlar.

autoplay : autoplay Bu, tarayıcıya videonun oynatımını otomatik olarak başlatmasını söyler Mobil tarayıcıların genelde bu özelliği desteklemediğini, kullanıcının video oynatmaya başlamak için ekrana dokunması gerektiğini unutmayın. Websiteye gelen ziyaretçi yüksek sesli bir video ile karşılaşması, çok rahatsız edici olabileceğinden, bu özelliği dikkatli kullanın. (örnek kullanım: autoplay veya autoplay="autoplay" )

controls : Varsayılan video denetimlerini gösterir oynat, duraklat, vb... (örnek kullanım: controls veya controls="controls" )

height ve width : Videoyu görüntülemek için piksel cinsinden yüksekliği ve genişliği belirtir.

loop : Video oynatma Bitirdikten sonra videoyu tekrar oynatmaya devam edip etmeyeceğini belirtir. (örnek kullanım: loop veya loop="loop" ),

muted : Videonun ses çıkışının varsayılan durumunu denetler. Varsa, bu öznitelik, yükleme üzerine ses çıkışının sessiz kalmasına (yani sesin olmamasına) neden olur. Bu özellik kullanıcıların tercihlerini geçersiz kılacaktır. Kullanıcı daha sonra istediği takdirde sesi açmayı seçebilir. Bu, kullanıcıların sayfa / video yüklenmeye başlar başlamaz videodan gelen yüksek sesten rahatsız olmamalarına yardımcı olur. Bu olurken kullanıcılar genellikle tarayıcılarını kapatır. 'Sessiz' özelliği, videonun yüksek ses yerine sessizce başlamasıyla bu sorunun üstesinden gelmeyi amaçlıyor. (örnek kullanım: muted veya muted="muted" )

poster : poster özelliği, tarayıcı video indirilirken veya kullanıcı videoyu oynatmasını söyleyene kadar kullanacağı bir görüntüye işaret eder. Eğer bu dahil edilmezse, videonun ilk karesi yerine kullanılacaktır.

ÇIKTI

preload : Videonun açılan sayfada ön yüklemesinin yapılıp yapılmayacağı belirtir. webmaster, en iyi kullanıcı isteklerine neden olacağını düşündüğü şeyleri tarayıcıya bir ipucu vermesine olanak tanır. Bu özelliği kullanmak gerekli değildir, bazı tarayıcılar bu özelliği görmezden gelir.

Bu üç değerden birini alır :

• preload="none" : Taracıya Videonun önceden yüklenmemesi gerektiğini söyler.
• preload="metadata" : Tarayıcıya, metnin uzunluğu veya formatını gibi meta verileri indirmesini söyler.
• preload="auto" : Kullanıcının kullanması beklenmese bile, tüm video dosyasının indirilebileceğini gösterir.
• preload=" " : Boş dize, varsayılan değer preload="auto"

Her durumda, tarayıcı bu özelliği bir komut değil bir ipucu olarak alır.

Video'yu istediğiniz zamandan başlatın

Ortam URL'sine bir ortam parçası ekleme , Videoyu başlatmak istediğiniz tam bölümü belirtebilirsiniz. Bir medya parçası eklemek için, ortam URL'sine #t=[start_time][,end_time] . Örneğin, videoyu 10-34 saniye arası başlatmak için şunları belirtebilirsiniz:

ÖRNEK:

<video width="500" height="500" controls> <source src="video.mp4#t=10,34" type="video/mp4"> <video>

ÇIKTI:

Tarayıcınız video etiketini desteklemiyor.

Bir dakika, beş saniye zaman için #t=00:01:05 hours:minutes:seconds olarak kullanmalısınız. videonun ilk dakikasını oynatmak için #t=00:01:00 belirtmeniz gereken saatlerdir. Aralık İstekler'in sunucunuz tarafından desteklendiğinden emin olmalısınız: Accept Ranges: bytes komutu açıkmı kontrol edin. Accept Ranges: bytes. Apache ve diğer birçok sunucu için varsayılan olarak açık, ancak denetlemeye değer.

ŞEKİLLENDİRME

<video> öğesi HTML öğesi olduğu için onu başka herhangi bir öğe gibi 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:

ÖRNEK:

<video style="filter:grayscale(100%)" controls="controls"> <source src="rafadan.mp4" type="video/mp4"> <source src="rafadan.ogg" type="video/ogg"> </video>

ÇIKTI:

Tarayıcınız video etiketini desteklemiyor.

HTML5 VİDEO - TARAYICI DESTEĞİ

HTML5 <video> etiketi MP4, WebM ve Ogg video formatlarını desteklemektedir.

Tarayıcıların video formatı desteği

Tarayıcı	MP4 desteği	WebM desteği	Ogg desteği
Internet Explorer	VAR	YOK	YOK
Chrome	VAR	VAR	VAR
Firefox	VAR	VAR	VAR
Safari	VAR	YOK	YOK
Opera	VAR	VAR	VAR

HTML5 TARAYICILARIN DESTEKLEDİĞİ VİDEO FORMATLARI

Dosya Formatı	Video Type	Video Codec
MP4	video/mp4	H.264
WebM	video/webm	VP8
Ogg	video/ogg	Theora

HTML5 video kontrol etmek için JavaScript'i kullanma

HTML5 <video> nesnesini, JavaScript tarafından Video oynatmayı kontrol etmek için kullanabileceğiniz yöntemler, özellikler ve olaylar sağlar.

Web sayfanıza bir HTML5 video denetimi ekleme bölümünde açıklanan HTML5 video öğesi, web sayfalarınızdaki video öğelerini kullanmaya başlamanıza izin verir. JavaScript'in eklenmesiyle, Javascript kodları kullanarak özel Video oynatma denetimleri oluşturabilir, geçerli Video oynatma konumunu alabilir ve ayarlayabilir ve geçerli videoyu değiştirebilirsiniz.

Bahadır GENÇ 21/05/2018

Html kodlama da video koydum, fakat mobilden girince mobil görünümde video gözükmüyor sadece cover gözüküyor ve videonun sadece sesi oynuyor. Bi türlü çözemedim. Neden olabilir?

yönetici 21/05/2018

Bahadır, Önceki yaptığın işlemleri tarayıcı kaydetmiştir. "Geçmişi sil" tekrar bakın. Mutlaka tarayıcı chrome olmalı diğerlerinde bazı hatalar oluyor. Olmazsa Tarayıcı güncelle birde başka bir mobilden bakınız.

adnan öntürk 12/01/2019

cihaz exper mini,hiç görüntü yok,html5 video oynamıyor,hız ile de ilgisi yok neden çalışmıyor

yönetici 12/01/2019

Adnan, html5 yeni bir teknolejidir. Bundan dolayı eski tarayıcılarda çalışmaz masa üstü için ie 11'de çalışmaz edge 12 ve üstünde çalışır. Tarayıcını yenile öyle bak olmazsa android chrome son sürümü desteklemekte.

onur umut 06/10/2019

video player'iniz calisiyor; Fakat ben aynı anda 4, 5 video ekleyip izlemek istiyorum onu nasil yapabilirim. Yardımci olabilirmisiniz..

yönetici 06/10/2019

Onur, video etiketinde listeleme özelliği yoktur. En kolay yolu websitene 4 veya 5 ne kadar gerekiyorsa video ekle. Böyle olmasın diyorsan hazır javascripte yapılan video eklentilere bakman gerekir. Google'dan "js video player liste" diye aratma yap.

Enes Doğru 14/12/2019

Merhaba, Peki videonun kullanıcı tarafından tamamlanıp tamamlanmadığını nasıl ölçerim?

yönetici 15/12/2019

Enes, javascript ile yapabilirsin yada youtube atarak youtube videoları sitene ekleyebilirsin; zaten youtube ölçüyor.

Duran Dayıoğlu 20/01/2020

Videonun indirilmesini engellemek için öneriniz nedir? En basitinden 3 noktada görünen videoyu indir elemanını nasıl kaldırabilirim

yönetici 21/01/2020

Duran, video etiketine controlsList="nodownload" ekle.

Naci koçal 07/03/2020

Posteri nasıl otomatik yaparız örneğin youtube bir video yüklediğimizde poster otomatik çıkıyor.

yönetici 09/03/2020

Naci, video etiketine şu poster özelliği ekle, gösterdiğin resmi poster olarak yayınlar, belirtmezsen videonun ilk karesini poster resmi yapar. <video poster="rafadan.jpg"></video> Sitenin Dışardan video yükleme özelliği varsa php yazılımı kullanarak veritabanından poster özelliğini atamalısın.

Yiğit 09/04/2020

Blog hazırlıyorum. Dreamwear'da ödevim'de . Video eklemem gerekli buradan bakarak ekledim ama hata veriyor daha önceden hazırlamıştım sonra denedim video ekledim acaba bir yerinde hata mı yapıyorum. nasıl çözebilirim.

yönetici 10/04/2020

Yiğit, Video uzantısını doğru yazıyormusun. ".mp4" gibi, dizin altında ise şöyle yazacaksın. src="video/rafadan.mp4" yine olmasa bir HTML dosyası oluştur. sadece o kodları orda dene.

vedat taştekin 26/04/2020

merhabalar. dreamweaver da web sayfasına internetteki video kaynağını yükleme işlemi nasıl yapılıyor acaba ? Bu benim vize ödevim ve cevabını asla bulamıyorum.. yardımcı olur musunuz lütfen

yönetici 27/04/2020

Vedat, google'dan "HTML youtube video ekleme" diye aratma yap.

Furkan 12/07/2020

video mu yükledim fakat mobil görünümde videonun orta kısmı görünüyor tamamı görünmüyor nasıl çözebilirim?

yönetici 13/07/2020

Furkan, genişlik değerine yüzde ver width="80%"

ahin güneş 20/07/2020

stream serverden, canlı Stream videoları nasıl ekleyebiliriz. Yani ziyaretçi sayfaya girdiğinde stream otomatik playerle html5 sayfada başlasın

yönetici 21/07/2020

stream server hakkında bilgim yok. Artık chrome otomatik video başlamasını istemiyor. video özelliğine mute özelliği eklersek otomatik başlıyor. videoda ses kapalı olacak video kısmına "muted" ekle.

Barış 10/12/2020

Videoların konumunu sitede ne tarafa koymak istedigimi nasil belirlerim

yönetici 10/12/2020

Barış, css ile yapılır, sitedeki css derslerine bakabilirsin.

yaşar e 11/01/2021

merhabalar, videolara url adresi üzerinden ses eklenebilir mi ? Örneğin 5dk bir video arka planına radyo yayın akış url si ekleyip oynatmak istiyorum

yönetici 12/01/2021

video ve audio playerlere eklenemez.

иупф 12/05/2021

merhaba abiler ben bu sitede 1 yıldır aktifim site yaptım? Ama internetde gözükmiyor nasıl yapabilirim?

yönetici 13/05/2021

Önce Domain ismi ve hosting firmasından 1 yıllık alan almalısın. Domain ve hosting konusunu internetten araştır.

lll 22/08/2021

Teşekkürler abi senden öğreniyorum herşeyi.

Yusuf Altay 23/10/2021

Merhaba. Sağ alt köşedeki üç noktaya veya alta paylaş yapılabilir mi whatsapp için mesela

yönetici 26/10/2021

Yusuf, o şekilde yapmak için kod yok tarayıcılar belirler.

Ahmet Arslan 02/11/2021

Merhaba, videoyu şu şekilde kullanıyorum. Fakat Chrome, Safari tarayıcılarda otomatik oynamıyor. Yardımcı olur musunuz? Otomatik sessiz oynamasını ve sürekli tekrar etmesini istiyorum. Hata yaptığım bir nokta var mıdır?

yönetici 04/11/2021

Ahmet, bazı tarayacılar otomatik oynatmaya izin vermiyor.

Grafiker 21/12/2021

Merhaba mailing de video eklemek için Video tıklamadan otomatik oynatmak istiyorum. Şekildeki böyle video otomatik oynatmıyor :( nasıl yardımcı olur musunuz? Rica ederim.

yönetici 22/12/2021

Tarayıcılar otomatik oynatmaya izin vermiyor.

Mert 03/05/2023

Merhaba, Ticimax e video eklemek istiyorum. Ancak video kaynağını nasıl gösterebilirim. Serverda local de tutsam bunu yazabilirim .

yönetici 04/05/2023

servere kaydet dizin yapısını src kısmına yaz.

enes burak bilgiç 14/02/2024

merhaba şimdi bu oynatıcıyı özelleştirme yapabilirmiyiz artı olarak video kalite butonu ekleyebilirmiyiz 720p 1080p 360p tarzı internet hızına göre otomatik geçiş yapsa youtube tarzı

yönetici 17/02/2024

Bu mediaplayere özelleştirme yapaman. Javascript biliyorsan sıfırdan oluşturabilirsin. Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

5707

Gönder