Web için video dosyasını doğru şekilde hazırlamış olmanız gerekir. Doğru boyutları ve doğru çözünürlüğü vermeniz gerekir. Hatta farklı tarayıcılar için ayrı WebM ve MP4 dosyaları oluşturdunuz.
Videonuzu herkesin görebilmesi için videoyu bir web sayfasına eklemeniz gerekir. Bunu doğru şekilde yapmak için iki HTML öğesi eklemeniz gerekir: <video> öğesi ve <source> öğesi. Bu makalede, bu etiketlerle ilgili temel bilgilere ek olarak, iyi bir kullanıcı deneyimi oluşturmak için bu etiketlere eklemeniz gereken özellikler açıklanmaktadır.
Tek bir dosya belirtme
Önerilmez ancak video öğesini tek başına kullanabilirsiniz. type özelliğini her zaman aşağıda gösterildiği gibi kullanın. Tarayıcı, sağlanan video dosyasını oynatıp
oynayamayacağını belirlemek için bunu kullanır. Bu işlem yapılamazsa ekteki metin gösterilir.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Birden fazla dosya biçimi belirtme
Medya dosyası ile ilgili temel bilgiler bölümünde, tüm tarayıcıların aynı video biçimlerini desteklemediğini belirtmiştik. <source> öğesi, kullanıcının tarayıcısı bunlardan birini desteklemediği takdirde yedek olarak birden fazla biçim belirtmenize olanak tanır.
Aşağıdaki örnekte, bu makalenin ilerleyen bölümlerinde örnek olarak kullanılan yerleştirilmiş video oluşturulmaktadır.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
İsteğe bağlı olsa da <source> etiketlerine her zaman bir type özelliği eklemeniz gerekir. Bu sayede tarayıcı yalnızca oynatabileceği dosyayı indirir.
Bu yaklaşım, özellikle mobil cihazlarda, farklı HTML veya sunucu tarafı komut dosyası sunma ile kıyaslandığında bazı avantajlar sunar:
- Biçimleri tercih sırasına göre listeleyebilirsiniz.
- İstemci tarafında geçiş, gecikmeyi azaltır. İçerik almak için yalnızca bir istek gönderilir.
- Tarayıcının bir biçim seçmesine izin vermek, kullanıcı aracısı algılama özelliğine sahip sunucu tarafı bir destek veritabanı kullanmaktan daha basit, daha hızlı ve potansiyel olarak daha güvenilirdir.
- Her dosya kaynağının türünü belirtmek ağ performansını artırır. Tarayıcı, bir video kaynağını seçerek biçimi "koyumak" için videonun bir bölümünü indirmek zorunda kalmaz.
Bu sorunlar, bant genişliği ile gecikmenin çok yüksek olduğu ve kullanıcının sabrının muhtemelen sınırlı olduğu mobil bağlamlarda özellikle önemlidir. type özelliğinin atlanması, desteklenmeyen türlere sahip birden fazla kaynak olduğunda performansı etkileyebilir.
Ayrıntıları incelemenin birkaç yolu vardır. Video ve sesin web'de nasıl çalıştığı hakkında daha fazla bilgi edinmek için Bilgisayar meraklıları için dijital medyayla ilgili temel bilgiler başlıklı makaleyi inceleyin. Ağ etkinliğini tür özellikleriyle ve tür özellikleri olmadan karşılaştırmak için Geliştirici Araçları'ndaki uzaktan hata ayıklama özelliğini de kullanabilirsiniz.
Başlangıç ve bitiş zamanlarını belirtin
Bant genişliğinden tasarruf edin ve sitenizin daha duyarlı olmasını sağlayın: Video öğesine başlangıç ve bitiş zamanı eklemek için medya parçalarını kullanın.
Bir medya parçası kullanmak için medya URL'sine #t=[start_time][,end_time] ekleyin. Örneğin, videoyu 5 ila 10. saniyeler arasında oynatmak için şunları belirtin:
<source src="video/chrome.webm#t=5,10" type="video/webm">
<hours>:<minutes>:<seconds> içinde saatleri de belirtebilirsiniz. Örneğin, #t=00:01:05 videoyu bir dakika beş saniyede başlatır. Videonun yalnızca ilk dakikasını oynatmak için #t=,00:01:00 değerini belirtin.
Bu özelliği, birden fazla dosyayı kodlamak ve sunmak zorunda kalmadan aynı videoda birden fazla görüntüleme (bir DVD'deki işaret noktaları gibi) sunmak için kullanabilirsiniz.
Bu özelliğin çalışması için sunucunuzun aralık isteklerini desteklemesi ve bu özelliğin etkinleştirilmesi gerekir. Çoğu sunucu, aralık isteklerini varsayılan olarak etkinleştirir. Bazı barındırma hizmetleri bu özellikleri devre dışı bıraktığı için sitenizdeki parçaları kullanmak için aralık isteklerinin kullanılabildiğini onaylamanız gerekir.
Neyse ki bunu tarayıcı geliştirici araçlarınızda yapabilirsiniz. Örneğin, Chrome'da bu seçenek Ağ panelinde bulunur. Accept-Ranges başlığını bulun ve bytes yazdığını doğrulayın. Resimde, bu başlığın etrafına kırmızı bir kutu çizdim. Değer olarak bytes'yi görmüyorsanız barındırma sağlayıcınızla iletişime geçmeniz gerekir.
Poster resmi ekleme
İzleyicilerin öğe yüklendikten sonra videoyu indirmek veya oynatmaya başlamak zorunda kalmadan içeriğin bir fikrine sahip olması için video öğesine poster özelliği ekleyin.
<video poster="poster.jpg" ...>
…
</video>
Poster, src videosu bozuksa veya sağlanan video biçimlerinden hiçbiri desteklenmiyorsa yedek olarak da kullanılabilir. Poster resimlerinin tek dezavantajı, bant genişliği kullanan ve oluşturma gerektiren ek bir dosya isteği göndermesidir.
Daha fazla bilgi için Resimleri verimli bir şekilde kodlama başlıklı makaleyi inceleyin.
Videoların kapsayıcıları taşmadığından emin olma
Video öğeleri, görüntü alanı için çok büyük olduğunda kapsayıcıları taşarak kullanıcının içeriği görmesini veya kontrolleri kullanmasını imkansız hale getirebilir.
CSS'yi kullanarak video boyutlarını kontrol edebilirsiniz. CSS tüm ihtiyaçlarınızı karşılamıyorsa YouTube ve diğer kaynaklardan gelen videolar için bile FitVids gibi JavaScript kitaplıkları ve eklentileri kullanabilirsiniz. Maalesef bu kaynaklar, ağ yük boyutlarınızı artırarak gelirleriniz ve kullanıcılarınızın cüzdanları üzerinde olumsuz sonuçlar doğurabilir.
Burada açıkladığım gibi basit kullanımlar için öğelerin boyutunu görüntü alanı boyutlarına göre belirtmek üzere CSS medya sorgularını kullanın. max-width:
100% sizin için en iyi seçenektir.
iframe'lerdeki medya içerikleri (YouTube videoları gibi) için duyarlı bir yaklaşım deneyin (John Surdakowski'nin önerdiği yaklaşım gibi).
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>
Yanıt veren örneği yanıt vermeyen sürümle karşılaştırın. Gördüğünüz gibi, yanıt vermeyen sürüm mükemmel bir kullanıcı deneyimi sunmuyor.
Cihazın yönü
Cihaz yönü, masaüstü monitörleri veya dizüstü bilgisayarlar için sorun teşkil etmez ancak mobil cihazlar ve tabletler için web sayfası tasarımı söz konusu olduğunda son derece önemlidir.
iPhone'daki Safari, dikey ve yatay yön arasında geçiş yapma konusunda iyi bir iş çıkarır:
iPad'de cihaz yönü ve Android'de Chrome sorun yaratabilir. Örneğin, herhangi bir özelleştirme olmadan iPad'de yatay yönde oynatılan bir video şu şekilde görünür:
Videoyu CSS ile width: 100% veya max-width: 100% olarak ayarlamak, birçok cihaz yönü düzen sorununu çözebilir.
Otomatik oynatma
autoplay özelliği, tarayıcının videoyu hemen indirip oynatıp oynatmayacağını kontrol eder. İşleyiş şekli platforma ve tarayıcıya göre değişir.
Chrome: Görüntülemenin masaüstünde olup olmadığı ve mobil kullanıcının sitenizi ya da uygulamanızı ana ekranına ekleyip eklemediği dahil ancak bunlarla sınırlı olmamak üzere birden çok faktöre bağlıdır. Ayrıntılı bilgi için Otomatik oynatmayla ilgili en iyi uygulamalar başlıklı makaleyi inceleyin.
Firefox: Tüm videoları ve sesleri engeller ancak kullanıcılara tüm siteler veya belirli siteler için bu kısıtlamaları gevşetme olanağı tanır. Ayrıntılar için Firefox'ta medyanın otomatik olarak oynatılmasına izin verme veya engelleme başlıklı makaleyi inceleyin.
Safari: Geçmişte kullanıcı hareketi gerektiriyordu ancak son sürümlerde bu şartta esneklik sağlandı. Ayrıntılar için iOS için yeni <video> politikaları başlıklı makaleyi inceleyin.
Otomatik oynatmanın mümkün olduğu platformlarda bile bu özelliği etkinleştirmenin iyi bir fikir olup olmadığını değerlendirmeniz gerekir:
- Veri kullanımı pahalı olabilir.
- Kullanıcı istemeden medya oynatmak bant genişliğini ve CPU'yu işgal ederek sayfa oluşturmayı geciktirebilir.
- Kullanıcılar video veya ses oynatmanın rahatsız edici olduğu bir bağlamda olabilir.
Önceden Yükle
preload özelliği, ne kadar bilginin veya içeriğin önceden yükleneceği konusunda tarayıcıya bir ipucu verir.
| Değer | Açıklama |
|---|---|
none |
Kullanıcı videoyu izlememeyi tercih edebilir. Bu nedenle, hiçbir şeyi önceden yüklemeyin. |
metadata |
Meta veriler (süre, boyutlar, altyazı parçaları) önceden yüklenmiş olmalıdır ancak video minimum düzeyde olmalıdır. |
auto |
Videonun tamamının hemen indirilmesi tercih edilir. Boş bir dize de aynı sonucu verir. |
preload özelliğinin farklı platformlarda farklı etkileri vardır.
Örneğin, Chrome masaüstünde 25 saniyelik videoyu arabelleğe alır ancak iOS veya Android'de hiç arabelleğe almaz. Bu durum, mobil cihazlarda masaüstünde gerçekleşmeyen oynatma başlatma gecikmeleri olabileceği anlamına gelir. Daha fazla bilgi için Ses ve video ön yüklemeyle hızlı oynatma başlıklı makaleyi veya Steve Souders'in blogunu inceleyin.
Web sayfanıza medya eklemeyi öğrendiniz. Şimdi, işitme engelliler için videonuza altyazı ekleyebileceğiniz veya ses oynatmanın uygun olmadığı durumlarda medya erişilebilirliği hakkında bilgi edinme zamanı.