Scroll ile bir ilerleyen video nasıl yapılır?

Vatanay Özbeyli HTML5

Özellikle teknoloji firmaları yeni ürünleri tanıtırken hazırladıkları web tasarımlarında HTML5‘in video oynatıcısı aracılığıyla küçük çaplı şovlar yapmakta. Siz ön katmanda ürünle ilgili detaylı bilgileri okurken alt katmanda gizli bir video yapısı kaydırma çubuğuyla eş zamanlı olarak ileri/geri ilerleyebilmekte.

Bu anlatımımız gözünüzde bir tasarım canlandırmadıysa aşağıdaki örneği görüntüleyerek işe başlayabilirsiniz. Daha sonrasında ise bu yeni teknoloji ürünü tasarımı oluşturacağız.

ÖRNEĞİ GÖRÜNTÜLE

HTML5 Video Oynatıcısı

Bu güncel ve kullanışlı video oynatıcısı daha önceki teknolojilerde alışık olmadığımız değiştirilebilir ve esnek yapısıyla büyük kolaylıklar sağlıyor. Eğer HTML5 video player hakkında bilgi edinmek istiyorsanız işe aşağıdaki makalelerimize göz atarak başlayabilirsiniz.

Scroll (kaydırma çubuğu) ile kayan video nasıl hazırlanır?

Daha önce de bahsettiğimiz gibi HTML5 video oynatıcısı değiştirlebilir ve özgünleştirilebilir seçenekleri sayesinde bize büyük bir esneklik kazandırıyor. İşte bu yapıyı kullanarak videomuzun ilerleyiş aşamasını web sayfamızın kaydırma çubuğuyla eşleştireceğiz. Birkaç satır HTML, JavaScript ve CSS kodu işimizi görecektir. Hadi CSS kodlarımız ile başlayalım!

CSS Kodları

Boşu boşuna endişe etmeyin. Bu makalemizde hiçbir dil de 5 satırdan fazla kod yazmayacağız. Aşağıdaki CSS tanımlaması ile video playerimizin üzerini örtüp kaydırma çubuğunu istediğimiz ölçüye hizalayacak Division’ı tanımlıyoruz.

Not : Burası önemli. Aşağıda girdiğimiz 2500 piksellik height değeri, kullandığımız örnek videosuna özgündür. Daha uzun bir video için daha uzun bir height değeri girmeniz gerekmektedir.

.aw-screensizer {
    display: table;
    width: 100%;
    height: 2500px;
}

Şimdi HTML kodlarımız ile devam edelim.

HTML Kodları

İlk olarak yukarıda yüksekliğini tanımladığımız aw-screensizer divini ekleyelim, sonrasında da HTML5 playerda oynatacağımız videoyu bağlayalım. Son olarak kullanıcının 

<div class="aw-screensizer"></div>
<video id="aw-video" tabindex="0" autobuffer="autobuffer" preload="preload">
  <source src="images/ders-videosu2.mp4"></source>
  <p>Tarayıcınız HTML5'in &lt;video&gt; elemanını desteklememekte.</p>
</video>

Ve son olarak JavaScript kodlarımızı ekleyelim.

Bu da ilginizi çekebilir  HTML5 Nedir?

JavaScript Kodları

İlk olarak aw-video’yu yakalıyoruz. Daha sonra video oynatıcıyı durdurup, scroll’u oynatıcının pause işlevine bağlıyoruz. Böylece her pause() çalıştırıldığında video duruyor ya da devam ediyor. Son olarak da video için atlama süresi ve geçiş sıklığı belirliyoruz.

var slideOut = document.getElementById('aw-video');
slideOut.pause();
window.onscroll = function(){slideOut.pause();};
setInterval(function(){slideOut.currentTime = window.pageYOffset/400;}, 40);

Bu kadar.

Kapanış

Bu tip kapsamlı web aksiyonları ne kadar karmaşık gözükse de , basit kilit hamlelerle kolayca hazırlanabiliyorlar. HTML5’in bize kattığı avantajları konuşmaya devam edeceğiz fakat şimdilik bu kadar.

İyi çalışmalar.