Daha küçük dosya boyutuna sahip animasyonlu bir GIF oluşturmak için HTML5 Video Nasıl Kullanılır

Çevrimiçi olarak biraz zaman geçirirseniz, GIF’in her yerde olduğunu bileceksiniz. Onlar sadece iyi bir mizah kaynağı değil, aynı zamanda içeriğinize eşlik etmek için yararlı bir medya kaynağıdır. Sorun şu ki, GIF, sayfaları yavaşlatma eğiliminde olan büyük bir dosya boyutu nedeniyle kötü bir üne sahiptir. Neyse ki, GIF artık bu şehirdeki tek oyun değil. Aslında, animasyonunuzu sadece daha iyi çalışan HTML5 videolarına dönüştürmenin bir yolu var, aynı zamanda çok daha az yer kaplıyor. Bu makalede, son avantajlar hakkında birinciye kıyasla derinlemesine tartışacağız, daha sonra GIF’inizi bir HTML5 videosuna nasıl değiştireceğinizi öğreteceğiz ve mümkün değilse ne yapacağınızı göstereceğiz. Hadi kazalım!
Neden teoride sıradan GIF’den HTML5 videosunu kullanmayı düşünmelisiniz, GIF ve HTML5 video çok farklı. Birincisi, statik ve animasyonlu görüntüler görüntülemenizi sağlayan biçimdir, sonuncusu ise web sitesine gömülü videoları görüntülemenin bir yolunu sunar. Daha önce, bunu yapmanın tek yolu Flash gibi üçüncü taraf yazılımları kullanmaktır, çünkü uzun GIF birçok durumda çok ağır olacaktır. HTML5 videosu burada kaydedildi. En büyük sorun GIF (büyük dosya boyutu) açısından gereklidir ve aşağıdan yukarıya göre daha iyi optimizasyon sayesinde çözün. Ancak hepsi bu değil:
Daha düşük dosya boyutları daha hızlı yükleme süresine neden olur. İyi bir kullanıcı deneyimi sağlamak için sitenizin hızlı bir şekilde yüklendiğinden emin olun.
Daha iyi ayarlama seçenekleri. GIF’ler yararlı olabilir, ancak bunu yapmak ve değiştirmek genellikle özel yazılım gerektirir. Öte yandan, HTML5 video özniteliklerinizi birkaç basit kod satırı kullanarak ayarlayabilirsiniz. Gördüğünüz gibi, HTML5 videoları birçok fayda sunar. Ancak, GIF’in yerine kullanmak herkes için ideal değildir. Örneğin, birçok hücresel tarayıcı, ücretsiz medya oynatmanın veri kotası üzerindeki etkisi nedeniyle otomatik oynamayı devre dışı bırakır ve bu da kullanıcı deneyiminde azalmaya neden olur.
Dahası, HTML5 hala yeni bir standart olduğundan, bazı tarayıcılar diğerlerinden farklı videolar uygular. Dolayısıyla, mümkün olduğunca çok sayıda cihaza ve tarayıcıya medya göndermek istiyorsanız, GIF’lerin yine de silahlarınızın bir parçası olması gerekebilir. Ancak, yukarıda listelenen nedenlerle HTML5 videoları uygulamakla ilgileniyorsanız, okuyun nasıl olduğunu bulmaya devam edin! GIF’inizi HTML5 Videoya Nasıl Çevirirsiniz Öne adım atmadan önce, HTML5 videosunun formatın kendisi olmadığı belirtilmelidir (GIF). Tersine, bu MP4, WebM ve OGG dahil video biçimlerini destekleyen bir öğedir.
Çoğu durumda, MP4 veya WebM dosyalarını kullanacaksınız, çünkü dosya OGG’den daha popüler olma eğilimindedir. Sorun, GIF’in çok özel bir davranış türüne sahip olmasıdır. Genellikle yükledikten hemen sonra oynamaya başlarlar ve sesleri yoktur. Girilen HTML5 öznitelikleri burada. Birkaç basit kod satırı kullanarak, videolarımızı GIF gibi davranacak şekilde değiştirebiliriz. Örneğin bu kısa animasyonu alın:
İlk bakışta, sıradan bir GIF gibi görünebilir, ancak aslında otomatik olarak tekrar tekrar döndürülecek şekilde ayarlanmış bir webm videosudur. Oraya ulaşmak için GIF’i CloudConvert Service kullanarak dönüştürüyoruz ve aşağıdaki kod snippet’lerini kullanarak sabitliyoruz:

Bu çok zahmetli görünebilir, ancak en iyi parçaları görmezden geliyoruz. Orijinal GIF 1 MB’den biraz daha fazla olsa da, WebM meslektaşları sadece 95KB. Bu büyük bir farktır ve her durumda aynı oran hayatta kalmasa bile, HTML5 videosunu seçerek dosya boyutunda çarpıcı bir iyileşme görebilirsiniz. Şimdi, mevcut kod görüntülerine dönelim. Elemanlarımızı gömmek için etiketini kullandığımızı göreceksiniz. Buna ek olarak, GIF’lerin davranışını simüle etmek için üç özel özellik ekledik – otomatik olarak oyun, döngü ve posterler. İlk ikisi oldukça açıktır, üçüncüsü ise videonuz yüklendiğinde (küçük dosyalar için bir sorun olmamalıdır) ikame olarak görünecek görüntüyü belirler.
Hangi özniteliklerin kullanılacağını belirledikten sonra, aşağıdaki kodlardan birini kullanarak hangi video türünü yerleştireceğinizi gösterebilirsiniz:
Webm
MP4

ogg
HTML5 yalnızca üç video türünü destekler, bu nedenle bu hatırlanması kolay bir listedir. Bundan sonra, kök klasörünüzü referans olarak kullanarak video dosyanızın konumunu belirlemelisiniz. Örneğin, medya kütüphanesine video yüklerseniz, konum şuna benzer: src = “wp-content/uploads/2017/04/chaplin.webm” Daha sonra, kullanmak isteyebileceğiniz birkaç özellik daha vardır. HTML5 videonuz. Örneğin, videonuzun bir sesi varsa, sessiz, öğenin boyutunu değiştirmek istiyorsanız yükseklik ve genişlik gerekebilir. Girmek istiyorsanız, tek yapmanız gereken etiketinize eklemek,

Yukarıdaki örnekte, WebM videomuz sessiz ve sıkı genişlik ve yükseklik değeri ile tekrar tekrar çalınır. Böyle görünecek olan budur:
Sadece bu! HTML’ye alışkınsanız, süreç sizin için çok kolay olacaktır. Özet için, tek yapmanız gereken videonuzu veya GIF’inizi HTML5 tarafından desteklenen formatlardan birine dönüştürmek, ardından istediğiniz öznitelikleri kullanarak sabitlemektir.
Doğal olarak, WordPress varsayılan kod düzenleyicisi sayesinde HTML5’i yerleştirmeyi kolaylaştırır ve Divi de öyle. Video modülü teması MP4 ve WebM videolarını destekler ve istediğiniz öznitelikleri özel CSS bölümünden ayarlayabilirsiniz. Ancak, Divi video modülü kullanılarak gömülü dikkatli-HTML5 videoları varsayılan kontrol ile görünür. Bu, GIF gibi görünmeyecekleri anlamına gelir. GIF’i mümkün olduğunca yakın taklit etmek için, kod modülünü kullanarak gerekli HTML5 kodunu eklemek ve istediğiniz öznitelikleri manuel olarak girmek isteyeceksiniz. Her iki durumda da, istediğiniz birçok seçeneğiniz var! HTML5 videolarını kullanamazsanız, çoğu modern tarayıcılar HTML5 videolarını destekler, ancak bir nedenden dolayı bu yönteme geçmemeyi tercih ederseniz, yine de başka seçenekler vardır. . GIF’i optimize etmenizi sağlayan birçok araç vardır, böylece daha az yer gerektirir. Favorilerimizden biri, GIF de dahil olmak üzere düzinelerce dosya türünü optimize etmenizi sağlayan FileOptimizer’dır:
Bu yazılım ücretsizdir ve kullanımı çok kolaydır. Tek yapmanız gereken hangi dosyaların optimize edileceğini seçmek ve mucizevi bir şekilde çalışmasına izin vermektir. Doğal olarak, optimizasyon seviyesi seçtiğiniz dosyaya bağlı olarak değişecektir, ancak genellikle GIF ile iyi sonuçlar göreceksiniz.
Çevrimiçi hizmetleri kullanmayı tercih ederseniz, ImageOPTIMS’ı kontrol etmenizi öneririz. Bu, tüm resimlerinizi ve GIF’lerinizi optimize etmek için otomatik olarak düzenlenebilen premium bir araçtır, böylece sayfanız daha hızlı yüklenir:
GIF’i optimize etmek için hangi seçeneklerin kullanılacağından hala şüphe duyuyorsanız, bir süre önce yayınladığımız karşılaştırma bölümüne bakın ve diğer en iyi seçeneklerden bazılarını gördük. Sonuç Çoğu durumda, GIF aracılığıyla HTML5 videolarının kullanılması mantıklıdır. Sonuçta, sayfalarınızı her zaman en iyi yükleme süresi ve performansı için optimize etmeye çalışmalısınız. Ayrıca, her zaman teknoloji eğrisinde en başta olmak için ödeme yapmak ve HTML5 birçok ilginç olasılık sunar. Bu fikre katılıyorsanız, başlamak için bilmeniz gereken şey budur: GIF’inizi CloudConvert gibi hizmetleri kullanarak MP4, WebM veya OGG dosyalarına dönüştürün.
Video dosyanızı HTML5 öğesini kullanarak sabitleyin.