iOS Safari: HTML5 Video Thumbnail .load() Kullanmadan Yüklenmiyor!

HTML5 video elementini kullandığım ve iOS safari'de çalışması gereken bir proje üzerinde çalışırken fark ettiğim bir durumu sizlerle paylaşmak istiyorum.

Video elementine aşina olmayanlar için küçük bir hatırlatma yapalım;

HTML Kodu;

<video width="320" height="240" controls id="video">
  <source src="video.mp4" type="video/mp4">
</video>

Javascript Kodu;

let video = document.getElementById("video");

video.play();
// Video'yu başlatacak.
video.pause();
// Video'yu durduracak.

Benim projemde yapmaya çalıştığım şey de bu basitliğe indirilebilir tarzdaydı. Kontrolleri ile birlikte modern tarayıcılarda video istenildiği gibi oynatılıp/durdurulabiliyordu. Ayrıca video için bir de thumbnail video başlamadan önce bir thumbnail çıkıyordu.

Fakat iOS Safari tarayısında, video başlamadan, video'nun ilk karesinin resmini göremiyoruz.

Bunun nedenini uzun baş ağrısı veren aramalar sonucunda öğrenmiş oldum: iOS Safari, video elementini implement ederken diğer tarayıcılar gibi, .load() metodunu, video'nun play metodu çalıştığında eğer çalıştırılmadıysa çalıştırıyor, fakat diğer tarayıcılardan farklı olarak, .load() metodu çalışmadıysa, video için bir thumbnail atamıyor.

Bu nedenle eğer video başlamadan önce iOS Safari'de video'nun thumbnail'i olmasını istiyorsanız, video için manüel olarak .load() kullanmanız gerekiyor.

Javascript Kodu;

let video = document.getElementById("video");

video.load();
// Videonun thumbnail'ini ios safari'de yükleyecek.
video.play();
// Video'yu başlatacak.
Yorumları Göster veya Yeni Yorum Yaz