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 :

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


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.


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7059

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.