Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Video

Kullanicilar videolari sever; videolar eglenceli, bilgilendirici olabilir. Mobil cihazlarda, videolar kolay bir bilgi tüketme yolu olabilir. Ancak videolar bant genisligini kullanir; her platformda her zaman ayni sekilde çalismazlar. Kullanicilar videolarin yüklenmesini beklemeyi veya oynat dügmesine bastiklarinda hiçbir seyin olmamasini sevmez. Sitenize video eklemenin ve kullanicilarin tüm cihazlarda mümkün olan en iyi deneyimi yasamalarini saglamanin en basit yolunu bulmak için daha fazla bilgi edinin.

Video ekleme

Sitenize video eklemenin ve kullanicilarin tüm cihazlarda mümkün olan en iyi deneyimi yasamalarini saglamanin en basit yollarini ögrenin.

TL;DR

  • Sitenizde video yüklemek, kodunu çözmek ve oynatmak için video ögesini kullanin.
  • Çesitli mobil platformlari kapsamak için videoyu birden çok biçimde olusturun.
  • Videolarin boyutunu dogru bir sekilde ayarlayin; kapsayicilarindan tasmadiklarindan emin olun.
  • Erisilebilirlik önemlidir; parça ögesini, video ögesinin alt ögesi olarak ekleyin.

Video ögesini ekleme

Sitenizde video yüklemek, kodunu çözmek ve oynatmak için video ögesini ekleyin.

<video src="chrome.webm" type="video/webm">
    <p>Tarayiciniz video ögesini desteklemiyor.</p>
</video>

Birden çok dosya biçimi belirtme

Tüm tarayicilar ayni video biçimlerini desteklemez. <source> ögesi, kullanicinin tarayicisinin biçimlerden birini desteklememesi olasiligina karsi yedek olarak birden çok biçim belirtebilmenizi saglar. Örnegin:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

Tarayici <source> etiketlerini ayristirdiginda, indirilip oynatilacak dosyaya karar vermesinde yardimci olmasi için istege bagli type özelligini kullanir. Tarayici WebM biçimini destekliyorsa chrome.webm dosyasini oynatir, aksi halde MPEG-4 videolarini oynatip oynatamayacagini kontrol eder. Video ve sesin web'de nasil çalistigiyla ilgili daha fazla bilgi edinmek için A Digital Media Primer for Geeks adli videoya göz atin.

Bu yaklasimin farkli HTML sunma veya sunucu tarafi komut dosyasi olusturmaya göre, özellikle mobil cihazlar açisindan bazi avantajlari vardir:

  • Gelistiriciler, biçimleri tercih sirasina göre listeleyebilir.
  • Yerel istemci tarafi geçisi gecikmeyi azaltir; içerigi almak için yalnizca bir istekte bulunulur.
  • Tarayicinin bir biçim seçmesi, kullanici-araci algilamali sunucu tarafi destek veritabani kullanmaktan daha basit, daha hizli ve muhtemelen daha güvenilirdir.
  • Her bir dosya kaynagi türünün belirtilmesi ag performansini iyilestirir; tarayici, biçimi kontrol etmek için videonun bir parçasini indirmek zorunda kalmadan bir video kaynagi seçebilir.

Bu noktalarin tümü özellikle bant genisligi ve gecikmenin çok önemli oldugu ve kullanici sabrinin muhtemelen sinirli olacagi mobil baglamlarda önemlidir. Tür özelliginin koda dahil edilmemesi, desteklenmeyen türlere sahip birden çok kaynak oldugunda performansi olumsuz etkileyebilir.

Mobil tarayici gelistirici araçlarinizi kullanarak ag etkinligini tür özellikleri ile ve tür özellikleri olmadan karsilastirin. Ayrica, sunucunuzun dogru MIME türünü bildirdiginden emin olmak için tarayici gelistirici araçlarinizdaki yanit üstbilgilerini kontrol edin; aksi halde, video kaynagi türü kontrolleri çalismaz.

Bir baslangiç ve bitis zamani belirtme

Bant genisliginden tasarruf edin ve sitenizin daha duyarli hissettirmesini saglayin: Video ögesine bir baslangiç ve bitis zamani eklemek için Medya Parçalari API'sini kullanin.

Bir medya parçasi eklemek için medya URL'sine yalnizca #t=[start_time][,end_time] kodunu eklersiniz. Örnegin, videoyu 5. saniye ile 10. saniye arasinda oynatmak için sunlari belirtin:

<source src="video/chrome.webm#t=5,10" type="video/webm">

Medya Parçalari API'sini, birden çok dosyayi kodlayip sunmak zorunda kalmadan ayni videoda birden çok görünüm sunmak (DVD'lerdeki bölüm baslangiçlari gibi) için de kullanabilirsiniz.

Tarayici gelistirme araçlarinizi kullanarak yanit üstbilgilerindeki Accept-Ranges: bytes dizesini kontrol edin:

Chrome Dev Tools ekran görüntüsü: Accept-Ranges: bytes

Bir poster resmi ekleme

Video ögesine bir poster özelligi ekleyerek kullanicilarinizin, videoyu indirmelerine veya oynatmaya baslamalarina gerek kalmadan, öge yüklenir yüklenmez içerikle ilgili bir fikir edinmelerini saglayin.

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

Poster, video src ögesi bozulursa veya saglanan video biçimlerinin hiçbiri desteklenmiyorsa bir yedek olarak da kullanilabilir. Poster resimlerin tek dezavantaji, biraz bant genisligi tüketen ve olusturma gerektiren ek dosya istegidir. Daha fazla bilgi için Resim optimizasyonu konusuna bakin.

Burada, poster resmi olmayan ve poster resmi olan videolarin yan yana karsilastirmasini bulabilirsiniz. Poster resmi, bunun video olmadigini göstermek için gri tonlarinda yaptik:

Android Chrome ekran görüntüsü, dikey: poster yok
Android Chrome ekran görüntüsü, dikey: poster yok
Android Chrome ekran görüntüsü, dikey: poster resimli
Android Chrome ekran görüntüsü, dikey: poster resimli

Eski platformlar için alternatifler saglama

Tüm video biçimleri tüm platformlarda desteklenmez. Büyük platformlarda desteklenen biçimlere bakin ve videonuzun bunlarin her birinde çalistigindan emin olun.

Hangi biçimlerin desteklendigini kontrol etme

Hangi video biçimlerinin desteklendigini ögrenmek için canPlayType() islevini kullanin. Yöntem; bir mime-type ve istege bagli codec'lerden olusan bir dize bagimsiz degiskeni alir ve asagidaki degerlerin birini döndürür:

Dönüs degeri Açiklama
(bos dize) Kapsayici ve/veya codec desteklenmiyor.
maybe Kapsayici ve codec'ler destekleniyor olabilir, ancak tarayicinin kontrol etmek üzere videonun bir kismini indirmesi gerekiyor.
probably Biçimin desteklendigi görülüyor.

Burada bazi canPlayType() bagimsiz degisken örneklerini ve Chrome'da çalistirildiklarinda gelen dönüs degerlerini bulabilirsiniz:

Tür Yanit
video/xyz (bos dize)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (bos dize)
video/xyz; codecs="nonsense, noise" (bos dize)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

Birden çok biçimde video olusturma

Ayni videoyu farkli biçimlerde kaydetmenize yardimci olacak çok sayida araç vardir:

Hangi biçimin kullanildigini kontrol etme

Tarayicinin hangi video biçimini seçtigini bilmek ister misiniz?

Kullanilan kaynagi döndürmek için JavaScript'te, videonun currentSrc özelligini kullanin.

Bunu çalisirken görmek için bu demoya göz atin: Chrome ve Firefox, chrome.webm kaynagini seçerken (bunun, bu tarayicilarin destekledigi olasi kaynaklar listesinde ilk sirada olmasindan kaynaklanir) Safari chrome.mp4 kaynagini seçer.

Videolarin boyutlarini dogru bir sekilde ayarlama

Kullanicilarinizin memnuniyeti söz konusu oldugunda boyut önemlidir.

TL;DR

  • Platformun isleyebileceginden daha genis çerçeve boyutuna veya daha yüksek kaliteye sahip videolar sunmayin.
  • Videolarinizi, olmalari gerekenden daha uzun yapmayin.
  • Uzun videolar, indirme ve aramada kesintilere neden olabilir; bazi tarayicilar videoyu oynatmaya baslamak için indirme isleminin bitmesini bekleyebilir.

Video boyutunu kontrol etme

Kodlandigi sekliyle gerçek video çerçeve boyutu, video ögesi boyutlarindan farkli olabilir (bir resmin gerçek boyutlari kullanilarak görüntülenmeyebilecegi gibi).

Bir videonun kodlandigi boyutu kontrol etmek için video ögesinin videoWidth ve videoHeight özelliklerini kullanin. width ve height, video ögesinin boyutlarini döndürür. Bu boyutlar, CSS veya satir içi genislik ve yükseklik özellikleri kullanilarak ayarlanmis olabilir.

Videolarin kapsayicilarindan tasmadiklarindan emin olma

Video ögeleri görüntü alani için çok büyük olduklarinda, kapsayicilarindan tasip kullanicinin içerigi görmesini veya denetimleri kullanmasini imkansiz hale getirebilirler.

Android Chrome ekran görüntüsü, dikey: biçimlendirilmemis video ögesi görüntü alanindan tasar
Android Chrome ekran görüntüsü, dikey: biçimlendirilmemis video ögesi görüntü alanindan tasar
Android Chrome ekran görüntüsü, yatay: biçimlendirilmemis video ögesi görüntü alanindan tasar
Android Chrome ekran görüntüsü, yatay: biçimlendirilmemis video ögesi görüntü alanindan tasar

Video boyutlarini JavaScript veya CSS'yi kullanarak kontrol edebilirsiniz. JavaScript kitapliklari ve FitVids gibi eklentiler, YouTube ve diger kaynaklardaki Flash videolar için bile uygun boyutun ve en boy oraninin korunmasini mümkün kilmaktadir.

Görüntü alani boyutlarina bagli olarak ögelerin boyutunu belirtmek için CSS medya sorgularini kullanin; max-width: 100% sizin dostunuzdur.

iframe içindeki medya içerigi (YouTube videolari gibi) için duyarli bir yaklasim deneyin (John Surdakowski'nin önerdigi gibi bir yaklasim).

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="video-container">
  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
          frameborder="0" width="560" height="315">
  </iframe>
</div>

Duyarli örnegi, duyarli olmayan sürümle karsilastirin.

Video oynaticiyi özellestirme

Farkli platformlar videoyu farkli sekilde görüntüler. Mobil çözümlerde cihaz yönünün dikkate alinmasi gerekir. Video içeriginin tam ekran görünümünü kontrol etmek için Tam Ekran API'sini kullanin.

Farkli platformlar videoyu farkli sekilde görüntüler. Mobil çözümlerde cihaz yönünün dikkate alinmasi gerekir. Video içeriginin tam ekran görünümünü kontrol etmek için Tam Ekran API'sini kullanin.

Cihaz yönü farkli cihazlarda nasil çalisir?

Cihaz yönü masaüstü monitörler veya dizüstü bilgisayarlar için bir sorun degildir, ancak mobil cihazlar ve tabletler için web sayfasi tasarlanirken çok büyük öneme sahiptir.

iPhone'daki Safari, dikey ve yatay yönler arasinda geçis yapmada basarilidir:

iPhone'daki Safari'de oynayan videonun ekran görüntüsü, dikey
iPhone'daki Safari'de oynayan videonun ekran görüntüsü, dikey
iPhone'daki Safari'de oynayan videonun ekran görüntüsü, yatay
iPhone'daki Safari'de oynayan videonun ekran görüntüsü, yatay

iPad'de ve Android için Chrome'da cihaz yönü sorunlu olabilir. Örnegin, hiç özellestirme yapilmadan, yatay yöndeki bir iPad'de oynayan bir video sunun gibi görünür:

iPad Retina'daki Safari'de oynayan videonun ekran görüntüsü, yatay

Videoyu CSS ile width: 100% veya max-width: 100% degerine ayarlamak, birçok cihaz yönü yer paylasimi sorununu çözebilir. Tam ekran alternatiflerini de degerlendirmek isteyebilirsiniz.

Satir içi veya tam ekran görüntü

Farkli platformlar videoyu farkli sekilde görüntüler. iPhone'daki Safari, web sayfasindaki bir video ögesini satir içinde görüntüler, ancak videoyu tam ekran modunda oynatir:

iPhone'da video ögesinin ekran görüntüsü, dikey

Android'de, kullanicilar tam ekran simgesini tiklayarak tam ekran moduna geçmek için istekte bulunabilir. Ancak, varsayilan deger videonun satir içinde oynatilmasidir:

Android için Chrome'da oynayan videonun ekran görüntüsü, dikey

iPad'deki Safari, videoyu satir içinde oynatir:

iPad Retina'daki Safari'de oynayan videonun ekran görüntüsü, yatay

Içerigin tam ekran olmasini kontrol etme

Tam ekran video oynatmayi zorlamayan platformlar için Tam Ekran API'si yaygin bir sekilde desteklenir. Içerigin veya sayfanin tam ekran olmasini kontrol etmek için bu API'yi kullanin.

video: gibi bir ögeyi tam ekran yapmak için

elem.requestFullScreen();

Dokümanin tamamini tam ekran yapmak için:

document.body.requestFullScreen();

Ayrica, tam ekran durum degisikliklerini dinleyebilirsiniz:

video.addEventListener("fullscreenchange", handler);

Isterseniz ögenin su anda tam ekran modunda olup olmadigini kontrol edebilirsiniz:

console.log("In full screen mode: ", video.displayingFullscreen);

Ögelerin tam ekran modunda görüntülenme seklini degistirmek için CSS :fullscreen söz sinifini da kullanabilirsiniz.

Tam Ekran API'sini destekleyen cihazlarda, video için yer tutucu olarak küçük resimleri kullanabilirsiniz:

Bunu çalisirken görmek için demoya göz atin.

Erisilebilirlik önemlidir

Erisilebilirlik bir özellik degildir. Duyamayan veya göremeyen kullanicilar, bir videoyu altyazilar veya açiklamalar olmadan hiç deneyimleyemez. Bunlarin videonuza eklenmesi, kullanicilariniza sundugunuz kötü deneyimden çok daha kisa sürer. En azindan tüm kullanicilar için bir temel deneyim saglayin.

Erisilebilirligi iyilestirmek için altyazi ekleme

Medyanin mobil cihazlarda daha erisilebilir olmasini saglamak için parça ögesini kullanarak altyazilar veya açiklamalar ekleyin.

Izleme ögesi kullanildiginda altyazilar sunun gibi görünür:

Android için Chrome'da parça ögesi kullanilarak görüntülenen altyazilarin gösterildigi ekran görüntüsü

Parça ögesi ekleme

Videonuza altyazi eklemek çok kolaydir. Bunun için video ögesinin alt ögesi olarak bir parça ögesi eklemeniz yeterlidir:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

Parça ögesinin src özelligi, parça dosyasinin konumunu verir.

Parça dosyasinda altyazilari tanimlama

Bir parça dosyasi, WebVTT biçimindeki zamanli ipuçlarindan olusur:

WEBVTT

00:00.000 --> 00:04.000
Adam bir agaç dalinda oturup dizüstü bilgisayar kullanmaktadir.

00:05.000 --> 00:08.000
Dal kirilir ve adam düsmeye baslar.

...

Hizli Basvuru

Video ögesiyle ilgili özelliklere hizli, genel bir bakis.

Video ögesi özellikleri

Video ögesi özelliklerinin ve tanimlarinin tam listesi için video ögesi teknik özelliklerine bakin.

Özellik Kullanilabilirlik Açiklama
src Tüm tarayicilar Videonun adresi (URL).
poster Tüm tarayicilar Video ögesi görüntülenir görüntülenmez, video içerigi indirilmeden tarayicinin gösterebilecegi bir resim dosyasinin adresi (URL).
preload Tüm mobil tarayicilar önceden yüklemeyi yoksayar. Tarayiciya, oynatmadan önce meta verilerin (veya videonun bir kisminin) önceden yüklenmesinin yararli olup olmadigini bildiren ipuçlari. Seçenekler none, metadata veya auto degerleridir (ayrintili bilgi için Önceden yükleme bölümüne bakin).
autoplay iPhone veya Android'de desteklenmez; tüm masaüstü tarayicilar, iPad, Firefox ve Android için Opera'da desteklenir. Indirmeye ve oynatmaya mümkün olan en kisa zamanda baslatir (Otomatik oynatma bölümüne bakin).
loop Tüm tarayicilar Videoyu döngü seklinde oynatir.
controls Tüm tarayicilar Varsayilan video denetimlerini (oynat, duraklat vb.) gösterir.

Otomatik oynatma

Masaüstünde autoplay özelligi, tarayiciya videoyu hemen indirmeye baslamasini ve mümkün olan en kisa zamanda oynatmasini bildirir. iOS'ta ve Android için Chrome'da, autoplay özelligi çalismaz; kullanicilarin videoyu oynatmak için ekrana hafifçe vurmasi gerekir.

Otomatik oynatmanin mümkün oldugu platformlarda bile, bunu etkinlestirmenin iyi bir fikir olup olmadigini degerlendirmeniz gerekir:

  • Veri kullanimi pahali olabilir.
  • Önce sormadan medyanin indirilip oynatilmaya baslamasina neden olmaniz, beklenmedik bir sekilde bant genisligini ve CPU'yu isgal edebilir ve dolayisiyla, sayfanin olusturulmasinda gecikmeye neden olabilir.
  • Kullanicilar, video oynatmak veya ses çalmak için uygun olmayan bir durumda olabilir.

Otomatik oynatma davranisi Android WebView'da WebSettings API'si araciligiyla yapilandirilabilir. Varsayilan olarak true degerine ayarlanir, ancak bir WebView uygulamasi bunu devre disi birakmayi seçebilir.

Önceden yükleme

preload özelligi, tarayiciya ne kadar bilginin veya içerigin önceden yüklenmesi gerektigi konusunda bir ipucu saglar.

Deger Açiklama
none Kullanici videoyu izlemeyebilir bile; hiçbir seyi önceden yüklemeyin
metadata Meta veriler (süre, boyutlar, metin parçalari) önceden yüklenmelidir, ancak video minimum düzeyde tutulmalidir.
auto Tüm videonun hemen indirilmesinin istendigi düsünülmektedir.

preload özelliginin farkli platformlarda farkli etkileri vardir. Örnegin, Chrome masaüstünde videonun 25 saniyesini arabellegine alirken, iOS veya Android'de arabellege alma islemi gerçeklestirmez. Bu, mobil cihazlarda, masaüstünde olmayan oynatmayi baslatma gecikmelerinin olabilecegi anlamina gelir. Tüm ayrintilar için Steve Souders'in test sayfasina bakin.

JavaScript

HTML5 Rocks Video makalesi, video oynatmayi kontrol etmek için kullanilabilecek JavaScript özelliklerinin, yöntemlerinin ve olaylarinin harika bir özetini sunmaktadir. Bu içerigi, uygun durumlarda mobil cihazlara özel kaygilarla güncelleyerek buraya ekledik.

Özellikler

Özellik Açiklama
currentTime Oynatma konumunu alin veya saniye olarak ayarlayin.
volume Videonun geçerli ses düzeyini alin veya ayarlayin.
muted Ses kapatma ayarini alin veya belirleyin.
playbackRate Oynatma hizini alin veya ayarlayin; 1 degeri normal ilerleme hizidir.
buffered Videonun ne kadarinin arabellege alindigi ve oynatilmaya hazir olduguyla ilgili bilgi (demoya bakin).
currentSrc Oynatilmakta olan videonun adresi.
videoWidth Videonun piksel cinsinden belirtilen genisligi (video ögesi genisliginden farkli olabilir).
videoHeight Videonun piksel cinsinden belirtilen yüksekligi (video ögesi yüksekliginden farkli olabilir).

PlaybackRate (demoya bakin) ve volume, mobil cihazlarda desteklenmez.

Yöntemler

Yöntem Açiklama
load() Oynatmayi baslatmadan bir video kaynagini yükler veya yeniden yükler: Örnegin, video src ögesi JavaScript kullanilarak degistiginde.
play() Videoyu geçerli konumundan oynatir.
pause() Videoyu geçerli konumunda duraklatir.
canPlayType('format') Hangi biçimlerin desteklendigini ögrenir (bkz. Hangi biçimlerin desteklendigini kontrol etme).

Mobil cihazlarda (Android için Opera disinda) play() ve pause() yöntemleri, bir dügmeyi tiklama gibi kullanici eylemlerine yanit olarak çagrilmadikça çalismaz: Demoya bakin. (Benzer sekilde, yerlesik YouTube videolari gibi içerik için oynatma baslatilamaz.)

Olaylar

Bunlar, etkinlesebilecek medya olaylarinin yalnizca bir alt kümesidir. Tam liste için Mozilla Developer Network'te Medya olaylari sayfasina bakin.

Olay Açiklama
canplaythrough Tarayicinin videoyu kesintisiz bir sekilde oynatabilecegini düsündürecek yeterli veri oldugunda etkinlesir.
ended Videonun oynatilmasi bittiginde etkinlesir.
error Bir hata ortaya çikarsa etkinlesir.
playing Video ilk kez oynatilmaya basladiginda, duraklatildiktan sonra veya yeniden baslatilirken etkinlesir.
progress Indirme ilerleme durumunu göstermek için periyodik olarak etkinlesir.
waiting Baska bir eylemin tamamlanmasini bekleyen bir eylem geciktiginde etkinlesir.
loadedmetadata Tarayici videoya iliskin meta verileri (süre, boyutlar ve metin parçalari) yüklemeyi bitirdiginde etkinlesir.