Bu yazıda kısaca Html5 ile birlikte gelen standart video oynatıcısı ve bir kaç özelliğinden bahsetmek istiyorum.
Daha eskiler bilirler hayatımızda bir süre öncesine kadar flash, vb… tabanlı video oynatıcılar hüküm sürüyordu. Epey zamandır bu durum html5 teknolojisi ve daha öncesindeki bazı jquery veya javascript tabanlı eklentiler ile değişmiş durumda. Artık günümüzde bir video oynatmak için bu tip taklalara gerek kalmadan sadece <video> tagi ile bu işlemi yapabiliyor durumdayız. Tabi daha gelişmiş oynatıcılar yine var. Onlara ulaşmak hem biraz pahalı hem de biraz daha profesyonel işler için diyebiliriz.
Html5 Video Player Nedir? Nasıl Kullanılır? Html5 Video Player Kullanımı
Aslında bugün günümüzdeki tüm yeni tarayıcılar html5 destekli durumda. Yani çok çok özel bir çaba sarf etmemiz gereksiz. Kısaca kullanımı aşağıdaki gibi.
<video src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4" type="video/mp4"/>
Birden Çok Video Kaynağı Belirtme
Ola ki linklerinizden biri veya bir kaçı kırık. Ancak bu durum sizin videoyu oynatmanızı engellesin istemiyorsunuz. Bu durumda birden çok kaynağa (örneğin; sunucunuza, bir cdn hesabına veya başka bir sunucuya da yedekleme yapmış olabilirsiniz) dayalı olarak tek bir videoyu verebiliyor ve hangisi sağlam ve ulaşılabilir ise onu oynatmasını sağlayabiliyorsunuz. Elbette oynatma sırası yukarıdan aşağıya gerçekleşmektedir.
<video controls>
<source src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4" type='video/webm;codecs="vp8, opus"'/>
<source src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor-2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
</video>Video Player’ın Kontrollerini Gösterme ve Gizleme
Oynat, Durdur, Duraklar, Sesi Aç/Kıs, vb… özelliklerin tümünü dilerseniz tek bir özellik ile kısıtlayabiliyorsunuz. Eğer teker teker müdahale etmek isterseniz yazının en altındaki üçlü işinizi görecektir.
<video controls src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4" preload="none"></video>
Video Player Önyüklemeyi veya Önizlemeyi İptal Etme
Videoya ait ilk saniye görüntüsü standart olarak önizlemede gelir. Ancak dilerseniz tarayıcıyı yormaması veya kullanıcıya sürpriz olması için bu özelliği kapatıp, kullanıcının sadece OYNAT dediğinde videoyu görmesini de sağlayabilirsiniz.
<video controls src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4" preload="none"></video>Video Player Tam Ekranı ve İndirmeyi Engelleme
Kimi videoların kaliteleri düşük ve küçük boyutlarda oynatılması gerekli olabilir. Bu gibi durumlarda videonun sizin isteğiniz dışında büyütülerek (tam ekran) bozuk kalite ile görüntülenmesini istemeyebilirsiniz. İşte bu özellik de bu gibi durumlar için.
<video controls controlsList="nofullscreen nodownload" src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4" preload="none"> </video>
Video Player İle Videoyu İstediğiniz Bir Zaman Aralığından Başlatın
Belli bir videonun, belli bir zamandan sonrasını öncelikli olarak başlatmak isteyebilirsiniz. Örneğin jeneriği atlatmak isteyebilirsiniz. Bu gibi durumlarda da “t=xx” özelliğini kullanabilirsiniz. Youtube gibi platformlardan tanıdık geldi değil mi? 🙂
<video controls src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4#t=15,20" preload="metadata"></video>
Video Player ‘da Öncesinde Bir Küçük Resim Gösterin
Videonun herhangi bir kesitinden ekran görüntüsü (screenshot) almış olabilir ve video başlatılmadan önce bu görseli görüntülemek istiyor olabilirsiniz. Bu gibi durumlarda tek yapmanız gereken “video” taginin sonrasında “poster” özelliğine bu linki vermek olacaktır.
<video controls src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4" poster="https://www.edomurcuk.com/wp-content/uploads/2020/09/ornek-projeler-banner-1.jpg" preload="none"> </video>
Video Player İle Oynatmadan Önce Videonun Yüklenmesini Bekleyin
Özellikle internetten video izliyor isek “yükleniyor” (loading) gibi durumlar can sıkıcı olabiliyor. Özellikle internet bağlantınızda ve/veya kaynak sitede bir yavaşlık durumu söz konusu ise o zaman videoyu izlemek bir eziyete dönüşebiliyor. Bu gibi durumlar için de video’yu başlatmadan önce belleğe tamamen alınmasını sağlayabilirsiniz.
Elbette bu özelliği kullanırken mutlaka büyük puntolar ile durumu belirtin. Yoksa izleyicileriniz “video çalışmıyor” izlenimine kapılabilirler. 🙂
<video preload="metadata" controls src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4" preload="metadata"> </video>
Video Player Otomatik Oynatma, Tekrar Oynat ve Sessize Alma Özellikleri
Otomatik Oynatma (Autoplay)
Videonun otomatik olarak oynamaya başlaması için bu özelliği aktif etmeniz yeterli olacaktır.
<video autoplay controls src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4"></video>
Video Player – Tekrar Oynatma (Loop)
Videonun bittikten sonra tekrar başa sarması istenebilir. İşte bu “loop” özelliği bu gibi durumlar için tam size göre.
<video loop controls src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4"></video>
Video Player – Sessize Alma (Mute)
Videonuzdaki sesin bir anda çıkması kullanıcılar ürkütebilir veya rahatsız edebilir belki kim bilir? Bu gibi durumları önlemek de html5 video player ile sizin elinizde. Dilerseniz video satırınıza sadece “muted” ekleyerek videonun başlangıçta sessiz olarak başlamasını sağlayabilirsiniz.
<video muted controls src="https://www.edomurcuk.com/wp-content/uploads/2020/09/yikadigi-camasirlari-asmaya-gidiyor.mp4"></video>
Aklıma gelen ve/veya kullanımlarım sırasında gözüme çarpan yeni özellikler olur ise bunları da yine size bu makale altından paylaşmaya özen göstereceğimden emin olabilirsiniz.
Yeni yazılar gelene kadar, herkese iyi çalışmalar… 🙂
Autoplay butonu Chrome’da çalışmıyor. Nasıl çalıştırabilirim?