Web için bir video dosyasını doğru şekilde hazırladınız. Doğru boyutları ve çözünürlüğü belirlemişsiniz. Farklı tarayıcılar için ayrı WebM ve MP4 dosyaları bile oluşturdunuz.
Videonuzun herkes tarafından görülebilmesi 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 bilgilerin yanı sıra iyi bir kullanıcı deneyimi oluşturmak için bu etiketlere eklemeniz gereken özellikler açıklanmaktadır.
Tek bir dosya belirtme
Önerilmese de video öğesini tek başına kullanabilirsiniz. Her zaman aşağıda gösterildiği gibi type özelliğini kullanın. Tarayıcı, sağlanan video dosyasını
oynatıp oynatamayacağını belirlemek için bunu kullanır. Gösterilemiyorsa 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ıyla ilgili temel bilgiler bölümünden hatırlayacağınız üzere, tüm tarayıcılar aynı video biçimlerini desteklemez. <source> öğesi, kullanıcının tarayıcısının desteklememesi durumunda yedek olarak birden fazla biçim belirtmenize olanak tanır.
Aşağıdaki örnek, bu makalenin ilerleyen bölümlerinde örnek olarak kullanılan yerleştirilmiş videoyu oluşturur.
<video controls>
<source src="chrome.webm" type="video/webm">
<source src="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ı sunmaya kıyasla çeşitli avantajları vardır:
- Biçimleri tercih sırasına göre listeleyebilirsiniz.
- İstemci tarafı 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ı destek veritabanı kullanmaktan daha basit, daha hızlı ve muhtemelen 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 kısmını indirmek zorunda kalmadan bir 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ı olabileceği mobil bağlamlarda önemlidir. Desteklenmeyen türlere sahip birden fazla kaynak olduğunda type özelliğinin atlanması performansı etkileyebilir.
Ayrıntıları incelemek için kullanabileceğiniz birkaç yöntem vardır. Video ve sesin web'de nasıl çalıştığı hakkında daha fazla bilgi edinmek için A Digital Media Primer for Geeks (Teknoloji Meraklıları İçin Dijital Medyaya Giriş) başlıklı makaleye göz atın. Ağ etkinliğini tür özellikleri olan ve tür özellikleri olmayan olarak karşılaştırmak için Geliştirici Araçları'nda 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ş zamanları eklemek için medya parçalarını kullanın.
Medya parçası kullanmak için medya URL'sine #t=[start_time][,end_time] ekleyin. Örneğin, videoyu 5. saniyeden 10. saniyeye kadar oynatmak için şunu belirtin:
<source src="chrome.webm#t=5,10" type="video/webm">
Saatleri <hours>:<minutes>:<seconds> olarak da 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ı videonun birden fazla görünümünü (DVD'deki işaret noktaları gibi) yayınlamak 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 istekleri devre dışı bıraktığından, sitenizde parçaları kullanmak için aralık isteklerinin kullanılabilir olduğunu onaylamanız gerekir.
Neyse ki bunu tarayıcınızın geliştirici araçlarında yapabilirsiniz. Örneğin Chrome'da 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 görmüyorsanız barındırma sağlayıcınızla iletişime geçmeniz gerekir.
Poster resmi ekleme
video öğesine bir poster özelliği ekleyin. Böylece izleyiciler, videoyu indirmeye veya oynatmaya gerek kalmadan, öğe yüklenir yüklenmez içerik hakkında fikir sahibi olabilir.
<video poster="poster.jpg" ...>
…
</video>
Poster, video src bozuksa veya sağlanan video biçimlerinden hiçbiri desteklenmiyorsa yedek olarak da kullanılabilir. Poster resimlerinin tek dezavantajı, ek bir dosya isteği gerektirmesidir. Bu da bant genişliği tüketir ve oluşturma işlemi gerektirir.
Daha fazla bilgi için Resimleri verimli bir şekilde kodlama başlıklı makaleyi inceleyin.
Videoların kapsayıcıların dışına taşmadığından emin olun.
Video öğeleri görüntü alanı için çok büyük olduğunda kapsayıcılarından taşabilir. Bu durumda kullanıcı, içeriği göremez veya kontrolleri kullanamaz.
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 FitVids gibi JavaScript kitaplıkları ve eklentileri yardımcı olabilir. 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 CSS medya sorgularını kullanarak öğelerin boyutunu görüntü alanının boyutlarına göre belirtin. max-width:
100% size yardımcı olacaktır.
iframe'lerdeki medya içerikleri (ör. YouTube videoları) için duyarlı bir yaklaşım deneyin (John Surdakowski tarafından önerilen 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>
Duyarlı örneği duyarlı olmayan sürümle karşılaştırın. Gördüğünüz gibi, duyarlı olmayan sürüm iyi bir kullanıcı deneyimi sunmuyor.
Cihazın yönü
Cihaz yönü, masaüstü monitörler 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'da Safari, dikey ve yatay yön arasında geçiş yapma konusunda iyi bir iş çıkarır:
iPad'de ve Android'de Chrome'da cihaz yönü sorunlu olabilir. Örneğin, herhangi bir özelleştirme yapılmadan iPad'de yatay yönde oynatılan bir video şu şekilde görünür:
CSS ile videonun width: 100% veya max-width: 100% değerini ayarlamak, cihaz yönüyle ilgili birçok düzen sorununu çözebilir.
Otomatik oynatma
autoplay özelliği, tarayıcının bir 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 yapılıp yapılmadığı ve mobil kullanıcının sitenizi veya uygulamanızı ana ekranına ekleyip eklemediği gibi (ancak bunlarla sınırlı olmamak üzere) birden fazla 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 video ve sesleri engeller ancak kullanıcılara bu kısıtlamaları tüm siteler veya belirli siteler için esnetme imkanı tanır. Ayrıntılı bilgi için Firefox'ta medyanın otomatik 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 şartı esnetti. 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ı düşünmeniz gerekir:
- Veri kullanımı pahalı olabilir.
- Kullanıcı istemeden önce medya oynatmak, bant genişliğini ve CPU'yu tüketebilir ve bu nedenle sayfa oluşturmayı geciktirebilir.
- Kullanıcılar, video veya ses oynatmanın rahatsız edici olduğu bir ortamda bulunabilir.
Önceden Yükle
preload özelliği, tarayıcıya ne kadar bilgi veya içerik önceden yükleneceği konusunda bir ipucu verir.
| Değer | Açıklama |
|---|---|
none |
Kullanıcı videoyu izlememeyi tercih edebilir. Bu nedenle, önceden yükleme yapmayın. |
metadata |
Meta veriler (süre, boyutlar, metin parçaları) önceden yüklenmeli 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 arabelleğe almaz. Bu nedenle, mobil cihazlarda oynatma başlatılırken masaüstünde yaşanmayan gecikmeler olabilir. Daha fazla bilgi için Ses ve video ön yüklemesiyle hızlı oynatma bölümüne veya Steve Souders'ın bloguna bakın.
Web sayfanıza nasıl medya ekleyeceğinizi öğrendiğinize göre, işitme engelliler için veya ses çalmanın uygun bir seçenek olmadığı durumlarda videonuza altyazı ekleyeceğiniz Medya erişilebilirliği hakkında bilgi edinme zamanı geldi.