HTML5 videosu

HTML5 video , tümü öğenin yerini alan film ve videoların çoğaltılmasında yeni standartlar açmak amacıyla HTML5 belirtiminde tanıtılan bir öğedir<object> .

Bu, HTML5 uyumlu tarayıcıların , etiket aracılığıyla gömülü videoları oynatmak için tescilli oynatıcılara ( Adobe Flash Player gibi) ihtiyaç duymadığı anlamına gelir <video>.

Bu standart, hangi video formatlarının resmi olarak desteklenmesi gerektiği konusunda anlaşma olmaması nedeniyle engellenmektedir.

Özellikler

<video>HTML5 , tarayıcıya belirli özelliklerin kullanılıp kullanılmayacağını ve nasıl kullanılacağını belirtmek için açılış etiketine eklenecek bir dizi özellik sağlar :

• src- video dosyasının konumunu belirtir;
• width- videonun genişliğini piksel olarak ayarlayın;
• height- videonun yüksekliğini piksel olarak ayarlayın;
• poster- video oynatılmadan önce oynatma alanında görüntülenecek bir resmi belirlemenize olanak tanır;
• controls- varlığı, tarayıcıya klasik kontrolleri oynatma, duraklatma, ses seviyesi, ilerleme çubuğu vb. görüntülemesini söyler;
• autoplay- mevcut olduğunda, tarayıcıya gerekli minimum arabellek koşullarına ulaşılır ulaşılmaz videoyu oynatmaya başlamasını söyler;
• loop- bu dize mevcutsa, tarayıcı videoyu sonuna ulaşır ulaşmaz yeniden oynatmaya başlar;
• preload- bu özellik videonun yüklenmesiyle ilgilidir ve üç seçeneğe sahiptir: noneve metadata: autoilki tarayıcıya oynat düğmesine basılana kadar videoyu yüklememesini söyler, ikincisi yalnızca meta verileri , yani süre gibi temel bilgileri yüklemesini belirtir , videonun boyutları ve kodekleri, üçüncüsü tarayıcıya videoyu hemen yüklemeye başlamasını söyler;
• muted- bu özelliğin varlığı, tarayıcının videoyu oynatırken herhangi bir ses çalmadığı anlamına gelir;
• audio- mutedolarak ayarlanan bu öznitelik, teknik özelliklerde yapılan bir revizyondan sonra bir öncekiyle değiştirildi ve artık kullanılmadı.

HTML5'i desteklemeyen tarayıcıların video yerine göstereceği açılış ( <video>) ve kapanış ( ) etiketleri </video>arasına metin eklenebilir .

Aşağıdaki HTML5 kod parçacığı , sayfaya WebM biçiminde bir video ekler ve daha önce görülen özelliklerin kullanımını gösterir (örnekte tümü gösterilir, gerçekte yalnızca istenenler eklenir).

<video src = "example.webm" genişlik = "720" yükseklik = "576" poster = "immagine.jpg" otomatik oynatma döngüsü önyüklemesini kontrol eder = "otomatik" sessize alındı>
  Bu metin, tarayıcı HTML5'i desteklemiyorsa görüntülenir.
</video>

Desteklenen video biçimleri

Mevcut HTML5 kuralları, tarayıcıların video etiketinde hangi video biçimlerini desteklemesi gerektiğini belirtmez. Bu nedenle bugüne kadar geliştiricilerinin uygun gördüğü herhangi bir formatı destekleyebilirler.

Tek format tartışması

HTML5 Çalışma Grubu, tüm tarayıcılar tarafından desteklenen tek bir video formatının tercih edilebilir olduğuna inanmaktadır. İdeal format şunları yapmalıdır:

• iyi sıkıştırmaya, iyi görüntü kalitesine sahip olun ve işlemciye çok fazla yük getirmeyin;
• kullanımı için lisanslar için ödeme yapma ihtiyacından muaf olmak;
• yazılım kod çözücülerine ek olarak bir donanım kod çözücüsü de vardır, çünkü birçok entegre işlemci videoların kodunu çözecek kadar güçlü değildir.

Theora , bilinen herhangi bir patente bağlı olmadığı için başlangıçta HTML5 için önerilen video standardıydı . Ancak 10 Aralık 2007'de HTML5 taslağı değiştirildi ve Theora'ya yapılan referans değiştirildi:

"Programlar, Theora video ve Vorbis sesinin yanı sıra Ogg kapsayıcı biçimini de desteklemelidir ."

ile birlikte:

“Tüm tarayıcılar aynı codec bileşenlerini destekliyorsa, birlikte çalışabilirlik için yararlıdır. Ancak, şu anda mevcut tüm oyuncularla çalışan bilinen bir codec bileşeni yoktur: Lisans ödemesi gerektirmeyen, açık kaynak geliştirme modeliyle uyumlu , kullanılabilecek yeterli kaliteye sahip ve mevcut olan bir codec bileşenine ihtiyaç vardır. şirketler için potansiyel gizli patent riskleri değildir. Bu bölüm yeni bilgiler geldikçe güncellenecektir."

Theora bilinen herhangi bir patente bağlı olmasa da, Apple ve Nokia gibi şirketler , sahipleri büyük bir şirketin formatı kullanmasını ve ardından lisanslar için ödeme talep etmesini bekleyen gizli patent olasılığı konusunda endişe duyuyor. Apple , Microsoft ve diğer şirketler, ana rakibi olan H.264 formatının patentlerine sahiptir .
Ogg formatının spesifikasyondan çıkarılması, Theora'nın "gizli" patentlerle bağlı olduğunu varsaymak için hiçbir neden olmadığı ve H.264 durumunda "gizli" patentlerin de var olduğunu tespit etmenin mümkün olmadığı için eleştirilmiştir. .

Apple ayrıca birçok aygıtın diğer biçimleri çok daha kolay desteklediğini ve HTML'nin hiçbir zaman belirli bir biçimin kullanımını hiçbir şey üzerinde zorlamadığını savunarak HTML standardında (zaten zorunlu olmayan) Ogg biçiminin kullanılmasına da karşı çıktı .

H.264 / MPEG-4 AVC daha yaygın olarak kullanılır ve iyi bir hıza, sıkıştırmaya, donanım kod çözücüye ve video kalitesine sahiptir, ancak patent kapsamındadır. H.264 kullanıcıları, özel durumlar dışında, Microsoft ve Apple'ı içeren H.264 patent sahiplerinden oluşan bir grup olan MPEG LA'ya lisans ücreti ödemek zorundadır . Bu nedenle HTML5 için benzersiz bir codec bileşeni olarak uygun görülmedi.

Google'ın On2'yi satın alması

Google'ın On2 Technologies'i satın alması, Vorbis sesli bir Matroska kapsayıcısında patentsiz, açık kaynaklı video codec bileşeni VP8'i kullanan WebM projesinin oluşturulmasına yol açtı . Google Chrome , Opera ve Mozilla Firefox tarayıcılarının yanı sıra daha az kullanılan diğerleri tarafından desteklenir .

Google Ocak 2011'de Chrome'daki yerel H.264 desteğini kaldırma niyetini duyurduğunda, Ars Technica'dan Peter Bright ve Microsoft'tan Tim Sneath (H. 264'ten biri) dahil olmak üzere birçok çevreden eleştiri aldı. Esperanto'nun Amerika Birleşik Devletleri'nin resmi dili olarak ilan edilmesi . Ancak, Opera Software'den Haavard Moen , Ars Technica makalesini, ürünlerinde WebM'yi İnternet'in açıklığına dayalı olarak tanıtma niyetini açıklayan şiddetle eleştirdi.

Tarayıcı desteği

Tarayıcı	İşletim sistemleri	En son kararlı sürüm	Desteklenen video formatları
			Ogg	MPEG	WebM
			teori	H.264	VP8	VP9
Android tarayıcı	Android	4.4.4 "KitKat" (19 Haziran 2014)	2.3'ten itibaren	3.0'dan itibaren	2.3'ten itibaren	Numara
Krom	Tüm desteklenen		r18297'den	Manuel kurulum	r47759'dan itibaren	r172738'den
Google Chrome	Tüm desteklenen	44.0.2403.125 (28 Temmuz 2015)	3.0'dan itibaren	3.0'dan	6.0'dan itibaren	29.0'dan itibaren
Internet Explorer	pencereler	11.0.21 (14 Temmuz 2015)	Manuel kurulum	9.0'dan itibaren	Manuel kurulum	Numara
	Windows Telefon	11.0 (10 Şubat 2014)	Numara	9.0'dan itibaren	Numara
	Windows RT	10.0 (14 Şubat 2011)		10.0'dan itibaren
fatih	Tüm desteklenen	4.14.3 (11 Kasım 2014)	4.4'ten
Microsoft Kenarı	Windows 10	20.10240.16384.0 (29 Temmuz 2015)	17'den itibaren	1.0'dan itibaren	Numara	Numara
Mozilla Firefox	Windows 7+	39.0 (2 Temmuz 2015)	3.5'ten itibaren	21.0'dan itibaren	4.0'dan itibaren	28.0'dan itibaren
	Windows Vista			22.0'dan itibaren
	Windows XP			Manuel kurulum
	Linux			26.0'dan itibaren
	Android			17.0'dan itibaren
	Mac os işletim sistemi			34.0'dan itibaren
	Firefox işletim sistemi			1.1'den itibaren
Opera	Android	30.0.1856.93524 (24 Haziran 2015)	Numara	11.50'den itibaren	15.0'dan itibaren	16.0'dan itibaren
	Symbian S60	12.0.22 (24 Haziran 2012)
	Windows Mobil	10.0 (16 Mart 2010)
	Windows , macOS , Linux	30.0.1835.125 (14 Temmuz 2015)	10.50'den itibaren	24.0'dan itibaren	10.60'dan itibaren	Numara
Safari	iOS	8.0.7 (30 Haziran 2015)	Numara	3.1'den itibaren	Numara	Numara
	Mac os işletim sistemi		Manuel kurulum		Manuel kurulum
ağ	Tüm desteklenen	3.16.3 (18 Mayıs 2015)	2.28'den

Formatların yayılması

Nisan 2010'da, Apple'ın iPad'i piyasaya sürülmek üzereyken , birçok site, iPad olarak tanımlanan kullanıcılara Flash yerine H.264 codec'li HTML5 video sunmaya başladı.

Mayıs 2010 itibariyle, HTML5 videoları Flash videolar kadar popüler değildi, ancak bazı siteler Dailymotion (Theora ve Vorbis biçimlerini kullanarak), YouTube (hem H.264 hem de WebM'de) ve Vimeo (H'de ) dahil olmak üzere HTML5 videoları denemeye başlamıştı . .264).

Bir YouTube notuna göre, öğe <video>şu anda sitenin tüm ihtiyaçlarını karşılamıyor. Bunun temel nedeni standart bir formatın olmaması, içerik koruma sisteminin olmaması ve videoların tam ekran olarak görüntülenememesidir. Hulu bile , kullanıcıya sunulan bant genişliğini uyarlamanın ve gösterilen içeriği korumanın imkansızlığı nedeniyle HTML5'i benimsemedi. Ayrıca , Netflix benzer nedenlerle HTML5'i benimsememiştir.

11 Ocak 2011'de Google'ın Chromium projesi, Chrome'un gelecekteki sürümlerinden kapalı kodekler (özellikle H.264) desteğinin kaldırıldığını duyurdu. Duyuru, kararın, VP8 ve Theora açık kaynak kodeklerinin kullanımını destekleyerek patentsiz HTML5'in yayılmasına yardımcı olmak için verildiğini belirtti.

Nisan 2011'de Google, en çok görüntülenenlerin %30'undan başlayarak tüm YouTube videolarının WebM'ye dönüştürüldüğünü duyurdu.

Aynı anda birden fazla video formatı kullanma

HTML5 Çalışma Grubunun öğe için resmi video formatının ne olması gerektiğini kesin olarak belirlemesini beklerken , tarayıcının hangisini açacağını seçmesi için aynı etikete farklı multimedya formatları <video>eklemek mümkündür . <video>Bunu yapmak için elementi kullanmanız gerekir <source>.

Örneğin, "örnek" videoyu Theora , H.264 ve WebM üç biçimindeki bir sayfaya eklemek istediğinizi varsayalım , aşağıdaki kodu kullanmanız gerekir:

<video poster = "immagine.jpg" kontrolleri>
  <kaynak kaynağı = "example.ogv" türü = "video / ogg">
  <kaynak kaynağı = "example.mp4" türü = "video / mp4">
  <kaynak kaynağı = "example.webm" türü = "video / webm">
  <p> Bu metin, tarayıcınız HTML5'i desteklemiyorsa görüntülenir. </p>
</video>

Harici veya dahili platform

Bir videoyu web sitesi sunucunuzda barındırarak ("kendi kendine barındırma ") veya harici bir platformda ( YouTube , Vimeo , ...) gömebilirsiniz .

Kendi sunucusu		Harici platform
profesyonel	KARŞI	profesyonel	KARŞI
Tam gizlilik ve kontrol	Daha uzun sayfa yükleme süreleri	Farklı cihazlar ve tarayıcılar farklı dosya biçimleri gerektirir. Üçüncü taraf hizmetler video dosyasını dönüştürebilir.	Video, özel web servisleri aracılığıyla indirilebilir
Videoyu kimse indiremez, silemez veya yasaklayamaz	Özel barındırma düşük performans gösteriyorsa, oynatma eksik olabilir	Ortak özel barındırmadan çok daha yüksek bant genişliği	Daha az gizlilik ve kontrol
Logo veya filigran yok	Daha yavaş ve daha az güvenilir oynatma	Daha hızlı oynatma	Görünüm tamamen özelleştirilemez
Tamamen özelleştirilebilir renkler / görünüm	Sitenin dışında ek promosyon yok ana bilgisayar sağlar	Kullanıcının İnternet hızından bağımsız olarak video bitene kadar durmayacak	Olası filigranlar
Ziyaretçileri kendi sayfanızda tutuyorsunuz	Video harici bir platformdaysa, potansiyel müşteriler yanlışlıkla videoyu izleyebilir. Bu özel bir barındırmada olmaz	Potansiyel müşteriler yanlışlıkla videoya gelebilir	Video sırasında dışarıdan firmalardan duyurular
Videonun sonunda önerilen reklam veya video yok	Platformların daha sınırlı SEO'su tanınmış	Daha İyi SEO (popüler platformlar özel web sitelerinden daha iyi dizine eklenir)	Belirli kurallara uymuyorsa videonun olası silinmesi

Diğer tekniklerle karşılaştırma

Çeşitli tekniklerle oluşturulan bazı animasyonlar, görsel olarak aynı veya etiketli gömülü bir videoya çok benzer <video>. İhtiyaçlarınıza bağlı olarak her tekniğin artıları ve eksileri vardır :

Farklı tekniklerle aynı animasyonlu sonuç elde edilebilir

GIF	CSS animasyonu	Tuval \ WebGL	SVG	<video>
PROS: yaratmanın basitliği, Farklı cihazlara uyarlanabilirlik, kullanıcı tarafından sağ fare tuşu ile kaydedilebilir , programlama gerektirmez EKSİLERİ: çok sınırlı olanaklar, etkileşim yok	AVANTAJLAR: geniş olanaklar, KB cinsinden az ağırlık, etkileşim EKSİLERİ: her zaman uyarlanamaz tüm cihazlara, programlama gerekli her zaman kolay değil	PROS: geniş olanaklar, 3D gerçekçilik, etkileşim EKSİLERİ: her zaman uyarlanamaz tüm cihazlara, programlama gerekli her zaman kolay değil	PROS: geniş olanaklar, piksel kalitesinde kısıtlama yok, etkileşim EKSİLERİ: her zaman uyarlanamaz tüm cihazlara, programlama gerekli her zaman kolay değil	PRO: Premiere ve After Effects gibi gelişmiş animasyon yazılımlarının kullanımıyla çok geniş olanaklar , uyarlanabilir tüm cihazlara, videoyu herhangi bir noktadan durdurma ve devam ettirme imkanı, tüm dillerde altyazı, programlama yok EKSİLERİ: etkileşim yok, kalın dosyalar, kullanıcı tarafından sağ fare düğmesiyle indirilebilen video

Altyazılar

Seçtiğiniz tüm dillerde, video sırasında görünen ve ayrıca TXT veya başka bir formatta indirilebilen altyazılar oluşturabilirsiniz :

< video  id = "video"  önyükleme kontrolleri  = "meta veri" > < kaynak kaynağı = " video / uno.mp4" türü = "video / mp4" > < kaynak kaynağı = " video / uno.webm" türü = "video / webm " > < parça etiketi = " İngilizce " tür = " altyazılar " srclang = " en " src = " başlıklar / vtt / uno-en.vtt " varsayılan > < parça etiketi = " Deutsch " tür = " altyazılar " srclang = " de " src = " captions / vtt / uno-de.vtt " > < track label = " Español " tür = " altyazılar " srclang = " es " src = " captions / vtt / uno-es.vtt " > </ video >
     
     
        
       
       

Altyazıların CSS stilleri

Altyazıları farklı stillerle biçimlendirebilirsiniz. Bunu yapmak için ana CSS özellikleri şunlardır :

• color
• opacity
• visibility
• text-decoration
• text-shadow
• background
• outline
• font
• white-space

Örnek:

:: işaret ( v [ ses = 'Test' ])  { 
   renk : #ccc ; 
   arka plan : # 0055dd ; 
}

Başka bir HTML öğesinin arka planı olarak kullanın

DIV'deki arka plan videosu örneği

Bir HTML5 videosu, paragraf, DIV veya hatta tüm web sitesi gibi başka bir HTML öğesinin arka planı olarak eklenebilir ve onu duyarlı hale getirebilir. Ancak arka plan olarak eklenirse, tıpkı bir resim veya CSS 3 gradyanı gibi, kullanıcı tarafından sağ fare tuşu ile kaydedilemez ve "farklı kaydet" yapılamaz, çünkü bu bir içerik değil dekorasyon videosu olacaktır .

# myVideo  { 
  pozisyon :  sabit ; 
  sağ :  0 ; 
  alt :  0 ; 
  min-genişlik :  % 100 ; min-yükseklik : % 100 ; } 
   


. içerik  { 
  konum :  sabit ; 
  alt :  0 ; 
  arka plan :  rgba ( 0 ,  0 ,  0 ,  0,5 ); 
  renk :  # f1f1f1 ; 
  genişlik :  % 100 ; dolgu : 20 piksel ; }
   

Biçimlendirme

CSS 3 , Canvas , SVG ve WebGL ile Adobe Premiere veya başka bir yazılımla <video>doğrudan video üzerinde işlem yapmadan gömülü videoyu formatlamak ve çeşitli efektler eklemek mümkündür .

Videonun önündeki animasyonlu öğeler

@ ana kareler  yer paylaşımı  { 
	% 30 { sol : 0 ; genişlik : % 50 ; } % 50 { arka plan : # 00f ; } % 80 { sol : % 80 ; genişlik : % 20 ; } % 100 { sol : % 60 ; genişlik : % 40 ; arka plan : # 00f ; } } şekil # moda { ekran : satır içi blok ; pozisyon : göreceli ; yazı tipi boyutu : 0 ; kenar boşluğu : 0 ; } şekil # moda videosu { genişlik : % 100 ; 
		 
		 
	
	 
		 
	
	 
		 
		 
	
	 
		 
		 
		 
	

 
	 
	 
	 
	 

  
 

Filtreler

Ayrıca duyarlı arka plan modunda (sepya, vinyet , bulanıklık ...) videonun önüne filtreler ekleyebilirsiniz

CSS 3

video  {  
    konum :  sabit ; 
    üst :  % 50 ; sol : % 50 ; min-genişlik : % 100 ; min-yükseklik : % 100 ; genişlik : otomatik ; yükseklik : otomatik ; z-endeksi : -1 ; transform : translateX ( -50 % ) translateY ( -50 % );
     
     
     
     
     
     
      

}

SVG

< video  otomatik oynatma = "true"  id = "vid"  kontroller = "kontroller"  döngüsü = "döngü" >
  
< kaynak kaynak  = " https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm"  type = "video / ogg" /> 
< kaynak  src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm"  type = "video / mp4" /> 
</ video >

< svg  id = 'image'  version = "1.1"  xmlns = "http://www.w3.org/2000/svg" > 
< defs > 
< filtre  kimliği = "blurEffect" > 
< feGaussianBlur  stdDeviation = "4" /> 
</ filter > 
< filter  id = "türbülans" > 
< feTurbulence  baseFrequency = ".01"  type = "fractalNoise"  numOctaves = "3"  tohum = "23"  dikişTiles = "dikiş" /> 
</ filtre > 
< filtre  kimliği = "blur" > 
< feGaussianBlur  stdDeviation = "10,3"  sonuç = "outBlur" /> 
</ filter > 
< filter  id = "inverse" > 
< feComponentTransfer > 
< feFuncR  type = "table"  tableValues ​​​​= "1 0" /> 
< feFuncG  type = "table"  tableValues​​​​ = "1 0" /> 
< feFuncB  type = "table"  tableValues ​​​​= "1 0" /> 
</ feComponentTransfer > 
</ filtre >

Maskeler

İçinde bir video bulunan geometrik şekiller olan SVG veya CSS3 maskeleri oluşturabilirsiniz .

SVG

<? xml version = "1.0" bağımsız = "hayır"?>  <! DOCTYPE svg KAMU "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1 /DTD/svg11.dtd ">  < svg  sürümü = " 1.1 "  xmlns = " http://www.w3.org/2000/svg "  xmlns: xlink = " http://www.w3.org/1999 /xlink " >  < defs >  < mask >  < metin  kimliği = " metin "  x = " 10 "  y = " 140 "  yazı tipi boyutu = " 150 "  yazı tipi ağırlığı = " kalın "  yazı tipi ailesi = " Verdana "  dolgu = " beyaz " > HELLO </ text >  </ mask >  </ defs >  < xlink kullanın  : href = " #text " />  </ svg >

CSS 3

video  {  maske : url ( '#vmask' );  kutu resmi : url ( 'metin.svg' );  kenar boşluğu : 100 piksel ;  }

Canvas ile video düzenleme

Chroma Key efekti gibi HTML5 Canvas sayesinde manipülasyonlar yapabilirsiniz .

var  işlemci ;

  işlemci _ doLoad  =  fonksiyon  doLoad ()  { 
    bu . video  =  belge . getElementById ( 'video' ); 
    bu . c1  =  belge . getElementById ( 'c1' ); 
    bu . ctx1  =  bu . c1 . getContext ( '2d' ); 
    bu . c2  =  belge . getElementById ( 'c2' ); 
    bu . ctx2  =  bu . c2 . getContext ( '2d' ); 
    let  öz  =  bu ; 
    bu . video _ addEventListener ( 'oynat' ,  işlev ()  { 
        self . genişlik  =  self . video . videoWidth  /  2 ; 
        self . height  =  self . video . videoHeight  /  2 ; 
        self . timerCallback (); 
      },  false ); 
  },

WebGL Geçişleri

WebGL ile videolar arasında geçişler oluşturabilirsiniz .

const  perdeler  =  yeni  Perdeler ({ 
    kapsayıcı :  "tuval" , 
    pixelRatio :  Matematik . min ( 1.5 ,  pencere . devicePixelRatio ),  
}); 
const  params  =  { 
    vertexShaderID :  "vertexShader" , fragmanShaderID 
    : " fragmentShader " , üniformalar : { geçiş : { ad : "uTransition" , tür : "1f" , değer : 0 , }, }, }; 
     
         
         
         
         
        
    


const  multiTexturesPlane  =  new  Plane ( 
    perdeler ,  
    [... belge .getElementsByClassName ( " düzlem" )], params );
    

Video oynatıcıyı biçimlendirme

Ayrıca videoyu gösteren video oynatıcıyı da değiştirebilirsiniz (yani düğmeler, video ilerleme çubuğu, ana hat ...) . CSS ile bir örnek:

. kontrol  düğmesi  { 
   kenarlık : yok ; 
   imleç : işaretçi ; 
   arka plan : şeffaf ; 
   arkaplan boyutu : içerir ; 
   arka plan tekrarı : tekrar yok ; 
} 
. ilerlemeyi kontrol eder  { ekran : blok ; genişlik : % 100 ; yükseklik : % 81 ; kenar boşluğu : 0.125 rem ; sınır : yok ; renk : # 00ccff ; sınır yarıçapı : 2 piksel ; } 
   
   
   
   
   
   
   

Örnekler

• 

  Canvas ile yapılmış bir videodaki Chroma Key efekti örneği .

• 

  Bir videodaki SVG maskesi örneği (CSS3 ile aynı efekti elde edebilirsiniz)

• 

  SVG filtre örneği (aynı etki CSS3 ile de elde edilebilir)

Diğer projeler

Diğer projeler

• Wikimedia Commons

• Wikimedia Commons , HTML5 videodaki resimleri veya diğer dosyaları içeriyor

Dış bağlantılar

• ( TR ) HTML5 etiket bilgisi . <video>, whatwg.org'da . Erişim tarihi: 16 Nisan 2011 ( 20 Nisan 2010 tarihinde orijinalinden arşivlendi ) .