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:

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:

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:

HTML5 VİDEO - TARAYICI DESTEĞİ

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

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

HTML5 TARAYICILARIN DESTEKLEDİĞİ VİDEO FORMATLARI

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.

<video poster="rafadan.jpg"></video>