Web için video dosyasını doğru şekilde hazırlamış olmanız gerekir. Doğru boyutları ve çözünürlüğü girdiğinizden emin olun. Hatta farklı tarayıcılar için ayrı WebM ve MP4 dosyaları oluşturdunuz.
Videonuzun herkes tarafından görülebilmesi için 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 oynatamayacağı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ın, özellikle mobil cihazlarda farklı HTML veya sunucu tarafı komut dosyası yayınlamaya kıyasla çeşitli avantajları vardır:
- Biçimlerinizi 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ı, biçimi "koklamak" için videonun bir bölümünü indirmek zorunda kalmadan video kaynağı seçebilir.
Bu sorunlar özellikle bant genişliği ve gecikmenin önemli olduğu ve kullanıcının sabrının sınırlı olduğu mobil bağlamlarda çok ö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. Ayrıca, 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.
Medya fragmanı 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 dosya kodlayıp yayınlamak zorunda kalmadan aynı videoda birden fazla görüntüleme (ör. DVD'deki işaret noktaları) 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 değerini 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şmaması
Video öğeleri, görüntü alanı için çok büyük olduğunda kapsayıcılarının dışına taşabilir ve kullanıcının içeriği görmesini veya kontrolleri kullanmasını imkansız hale getirebilir.
CSS 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 JavaScript kitaplıkları ve FitVids gibi eklentiler yardımcı olabilir. Maalesef bu kaynaklar, gelirleriniz ve kullanıcılarınızın cüzdanları için olumsuz sonuçlara yol açarak ağ yükü boyutlarınızı artırabilir.
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 (ör. YouTube videoları) için duyarlı bir yaklaşımı (John Surdakowski tarafından önerilen gibi) deneyin.
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, iPad'de yatay olarak oynatılan bir video, özelleştirme yapılmadan ş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. Tam olarak nasıl çalıştığı platforma ve tarayıcıya bağlıdır.
Chrome: Görüntülemenin masaüstünde mi yoksa mobil cihazda mı yapıldığı ve mobil kullanıcının sitenizi ya da uygulamanızı ana ekranına ekleyip eklemediği gibi çeşitli faktörlere 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ılı bilgi için Firefox'ta medya otomatik oynatmaya 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, tarayıcıya ne kadar bilgi veya içeriğin önceden yükleneceğiyle ilgili bir ipucu sağlar.
| 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ı hemen indirmek istenir. 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 nedenle, mobil cihazlarda oynatma işleminin başlatılması masaüstünde yaşanmayan gecikmeler yaşayabilirsiniz. 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ı.