Videoyu Mevcut Tarayıcılarda Görüntülemek için HTML5 Kullanma

Kendi HTML 5 Videonuzu Barındırma vs. YouTube'u kullanma

YouTube harika bir sitedir. içine video yerleştirmeyi kolaylaştırır. internet sayfaları hızlı bir şekilde ve bazı küçük istisnalar dışında bu videoların yürütülmesinde oldukça sorunsuz. YouTube'da bir video yayınlarsanız, herkesin onu izleyebileceğinden oldukça emin olabilirsiniz.

Ancak Videolarınızı Gömmek için YouTube'u Kullanmanın Bazı Dezavantajları Vardır

İle ilgili sorunların çoğu Youtube tasarımcı tarafında değil, tüketici tarafındadır:

• Yavaş arama ve indeksleme
• Sunucu kesintileri
• İçerik (görünüşte) keyfi olarak kaldırılıyor
• Çok fazla kötü içerik

Ancak YouTube'un içerik geliştiriciler için de kötü olmasının bazı nedenleri vardır:

• Videolar için maksimum 10 dakikalık uzunluk (ücretsiz hesaplar için)
• Kötü yükleme performansı
• YouTube, videonuz için sınırsız kullanım hakkı kazanır
• Herhangi bir YouTube kullanıcısı, videonuz için sınırsız kullanım hakkı kazanır

HTML5 Video, YouTube'a Göre Bazı Avantajlar Sağlıyor

kullanma HTML5 for video, videonuzun her yönünü, kimlerin görüntüleyebileceğini, ne kadar uzun olduğunu, içeriğin ne içerdiğini, nerede barındırıldığını ve sunucunun nasıl performans gösterdiğini kontrol etmenizi sağlar. Ve HTML5 maksimum sayıda kişinin görüntüleyebildiğinden emin olmak için size videonuzu istediğiniz kadar formatta kodlama fırsatı verir. Müşterilerinizin bir eklentiye veya YouTube'un daha yeni bir sürüm yayınlamasını beklemesine gerek yoktur.

Elbette, HTML5 Videosu Bazı Dezavantajlar Sunar

Bunlar şunları içerir:

• Videonuzu en az üç farklı codec ile kodlamanız gerekir.
• Desteklemeyen tarayıcılardan emin olmak için bazı JavaScript eklemeniz gerekir. HTML5 çalışacak.
• Sunucunuzun, video barındırmanın bant genişliği gereksinimlerini karşılayabilmesi gerekir.

Web'de Video Desteğine Hızlı Genel Bakış

Web sayfalarına video eklemek uzun zamandır zor bir süreç olmuştur. Yanlış gidebilecek o kadar çok şey vardı ki:

• İlk olarak, videonuzu sayfanıza yerleştirmek için etiketleyin. FAKAT bu etiket, başka bir etiket lehine kullanımdan kaldırılır. Ve bazı tarayıcılar zaten hiçbir zaman iyi desteklemedi.
• yani geçiş yaparsın etiketi, ancak eski tarayıcılar bunu desteklemez ve daha yeni tarayıcılar, desteği konusunda kabataslaktır.
• sonra düşünürsün flaş! Ve videonuzu bir FLV dosyası olarak kodlayın. Fakat flaş artık Windows cihazlarda desteklenmemektedir.
• Videonuzu YouTube gibi bir video gömme sitesine yüklemeye karar veriyorsunuz, ancak daha sonra YouTube ile tartıştığımız sorunlarla karşılaşıyorsunuz.
• Son olarak, HTML5 kullanmaya karar verdiniz, ancak Internet Explorer bunu desteklemiyor (Internet Explorer 9'a kadar). Bunu yapsanız bile, desteklenen iki video codec standardı ve her ikisini de kullanabilen yalnızca bir tarayıcı vardır.

Peki ne yapman gerekiyor? Video giderek daha önemli hale geldiğinden, videodan vazgeçmek çoğu site için artık bir seçenek değil. Ve birçok site başarıyla videoya geçti.

Bu makalenin aşağıdaki sayfaları, çalışan Web sayfalarınıza nasıl video ekleyeceğiniz konusunda size adım adım anlatacaktır. Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 ve 4, iPhone ve Android ve Internet Explorer 7 ve 8. Gerekirse diğer eski tarayıcılar için destek eklemek için ihtiyacınız olan anahtarlara da sahip olacaksınız.

Videonuzu Oluşturun ve Düzenleyin

Bir Web sayfasına video koyacağınız zaman ihtiyacınız olan ilk şey gerçek videodur. Bir özellik oluşturmak için sürekli çekim yapabilir ve daha sonra düzenleyebilirsiniz ya da komut dosyası yazabilir ve önceden planlayabilirsiniz. Her iki şekilde de işe yarar, rahat ettiğin şey odur. Ne tür bir video yapmanız gerektiğini bilmiyorsanız, Masaüstü Video Kılavuzundaki şu fikirlere göz atın:

• Aile Video Projeleri
• Pazarlama ve Tanıtım Videoları
• Video Sanal Turlar
• Videolar Nasıl Yapılır?
• Düğün Videoları

Yüksek Kaliteli Video Kaydetmeyi Öğrenin

İç ve dış mekanlarda nasıl kayıt yapılacağını ve ayrıca ses kaydı yapmayı bildiğinizden emin olun. Aydınlatma da çok önemlidir; çok parlak olan çekimler gözleri incitir ve çok karanlık sadece çamurlu ve amatörce görünür. Sitenizde yalnızca 30 saniyelik bir video bulundurmayı planlasanız bile, ne kadar kaliteli olursa web sitenize o kadar iyi yansıyacaktır.

Telif hakkının, videonuzda kullanmak isteyebileceğiniz herhangi bir ses veya müzik (ve stok görüntüleri) için geçerli olduğunu da unutmayın. Sizin için şarkı yazabilecek ve çalabilecek bir arkadaşınıza erişiminiz yoksa, telifsiz müzik arka planda oynamak için. Videolarınıza eklemek için görüntü stoklayabileceğiniz yerler de var.

Videonuzu Düzenleme

Hangi düzenleme yazılımını kullandığınızın bir önemi yok, yeter ki ona aşina olun ve onu etkin bir şekilde kullanın. Masaüstü Video Kılavuzu Gretchen, videolarınızı harika görünecek şekilde düzenlemenize yardımcı olabilecek bazı profesyonel video düzenleme ipuçlarına sahiptir.

Videonuzu bir MOV veya AVI'ye (veya MPG, CD, DV) kaydedin

Bu öğreticinin geri kalanında, videonuzu AVI veya MOV gibi bir tür yüksek kaliteli (sıkıştırılmamış) biçimde kaydettiğinizi varsayacağız. Bu dosyaları olduğu gibi kullanabilirsiniz, ancak videoda daha önce tartıştığımız tüm sorunlarla karşılaşırsınız. Aşağıdaki sayfalar, dosyanızı en fazla sayıda tarayıcı tarafından görüntülenebilmesi için üç türe nasıl dönüştüreceğinizi açıklamaktadır.

Videoyu Firefox için Ogg'e Dönüştürün

Dönüştüreceğimiz ilk format Ogg'dir (bazen Ogg-Theora olarak adlandırılır). Bu biçim, Firefox 3.5, Opera 10.5 ve Chrome 3'ün tümünün görüntüleyebildiği biçimdir.

Ne yazık ki, Ogg tarayıcı desteğine sahip olsa da, satın alabileceğiniz tanınmış video programlarının çoğu (Adobe Media Encoder, QuickTime, vb.) Ogg dönüştürme seçeneği sunmuyor. Bu yüzden videonuzu Ogg'a dönüştürmenin tek yolu Web'de bir dönüştürme programı bulmaktır.

Dönüşüm Seçenekleri

Çeşitli video (ve ses) formatlarını diğer video (ve ses) formatlarına dönüştürdüğünü iddia eden Media-Convert adlı çevrimiçi bir araç var. 3 saniyelik test videomla denediğimizde Mac'imde çalışmasını sağlayamadık. Ama şansın daha iyi olabilir. Bu sitenin ücretsiz olma avantajı vardır.

Bulduğumuz diğer bazı araçlar şunlardır:

• Miro Video Dönüştürücü (Windows Macintosh): Bu program, hem Ogg hem de MP4'e (H.264) dönüştürme avantajına sahiptir ve açık kaynaklıdır.
• Ücretsiz Video Dönüştürücü: Bunun hem Windows hem de Macintosh sürümü olduğunu düşünüyoruz, ancak sitelerinden anlamak zordu
• Basit Theora Kodlayıcı (Macintosh): Kullanmaya meyilli olduğumuz bu.

Videonuzu Ogg formatında kaydettikten sonra, web sitenizdeki bir yere kaydedin ve diğer tarayıcılar için başka formatlara dönüştürmek için sonraki sayfaya gidin.

Safari ve Internet Explorer için Videoyu MP4'e Dönüştürün

Videonuzu dönüştürmeniz gereken bir sonraki biçim MP4'tür (H.264 video), böylece Internet Explorer 9 ve sonraki sürümlerde, Safari 3 ve 4'te ve iPhone ve Android'de oynatılabilir.

Bu biçim ticari ürünlerde daha kolay bulunur ve bir video düzenleyiciniz varsa, muhtemelen MP4'e dönüştüren bir programınız da vardır. eğer varsa Adobe premiere Adobe Video Encoder'ı veya aynı zamanda çalışan QuickTime Pro'nuz varsa kullanabilirsiniz. Önceki sayfada tartıştığımız dönüştürücülerin çoğu, videoları MP4'e de dönüştürür.

• MedyaDönüştürme: Çevrimiçi bir AWS aracı.
• Miro Video Dönüştürücü (Windows Macintosh): Bu program, hem Ogg hem de MP4'e (H.264) dönüştürme avantajına sahiptir ve açık kaynaklıdır.
• SÜPER (Windows): Birçok farklı dosya türünü MP4'e dönüştürür
• Ücretsiz Video Dönüştürücü: Bunun hem Windows hem de Macintosh sürümü olduğunu düşünüyoruz, ancak sitelerinden bunu anlamak zordu.

Video Öğesini Web Sayfanıza Ekleyin

1. Web sayfanızı normalde oluşturduğunuz gibi oluşturun:

2. Vücudun içine yerleştirin
3. Videonuzun hangi özelliklere sahip olmasını istediğinize karar verin: Kontrolleri ve ön yüklemeyi kullanmanızı öneririz. Videonuzun ilk sahnesi iyi değilse poster seçeneğini kullanın.
   autoplay - indirilir yüklenmez başlamak için
4. kontroller - okuyucularınızın videoyu kontrol etmesine izin verin (duraklat, geri sar, ileri sar)
5. döngü - bittiğinde videoyu baştan başlat
6. ön yükleme - müşteri tıkladığında daha hızlı hazır olması için videoyu önceden indirin
7. poster - video durdurulduğunda kullanmak istediğiniz resmi tanımlayın
8. Ardından, videonuzun iki sürümünün (MP4 ve OGG) kaynak dosyalarını dosyanın içine ekleyin.
9. Sayfayı Chrome 1, Firefox 3.5, Opera 10 ve/veya Safari 4'te açın ve doğru görüntülendiğinden emin olun. En azından Firefox 3.5 ve Safari 4'te test etmelisiniz - çünkü her biri farklı bir codec bileşeni kullanır.

Bu kadar. Bu kodu yerleştirdikten sonra Firefox 3.5, Safari 4, Opera 10 ve Chrome 1'de çalışan bir videonuz olacak. Peki ya Internet Explorer?

Web sayfalarına video eklemek için HTML 5'i kullanmak çok kolaydır. Çoğu modern tarayıcı, HTML 5 videosunu destekler, ancak hepsi aynı şekilde desteklemez. Ancak bunun anlamı, videonuzu hem Ogg hem de MP4 formatlarında kaydederseniz, çoğu modern tarayıcıda (Internet Explorer 8 hariç) görüntülenmesini sağlamak için yalnızca dört veya beş satır HTML yazabilirsiniz. İşte nasıl:

Tarayıcıların HTML 5'i beklediğini bilmesi için HTML 5 belge türü işaretçisini yazın:

1. Web sayfanızı normalde oluşturduğunuz gibi oluşturun:

2. Vücudun içine yerleştirin
3. Videonuzun hangi özelliklere sahip olmasını istediğinize karar verin: Kontrolleri ve ön yüklemeyi kullanmanızı öneririz. Videonuzun ilk sahnesi iyi değilse poster seçeneğini kullanın.
   autoplay - indirilir yüklenmez başlamak için
4. kontroller - okuyucularınızın videoyu kontrol etmesine izin verin (duraklat, geri sar, ileri sar)
5. döngü - bittiğinde videoyu baştan başlat
6. ön yükleme - müşteri tıkladığında daha hızlı hazır olması için videoyu önceden indirin
7. poster - video durdurulduğunda kullanmak istediğiniz resmi tanımlayın
8. Ardından, videonuzun iki sürümünün (MP4 ve OGG) kaynak dosyalarını dosyanın içine ekleyin.
9. Sayfayı Chrome 1, Firefox 3.5, Opera 10 ve/veya Safari 4'te açın ve doğru görüntülendiğinden emin olun. Her biri farklı bir codec bileşeni kullandıkları için en az Firefox 3.5 ve Safari 4'te test etmelisiniz.

Bu kadar. Bu kodu yerleştirdikten sonra Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ ve Chrome 1'de çalışan bir videonuz olacak.

Olabildiğince Çok Tarayıcıda Test Edin

İçinizin rahat etmesi için, özellikle okuyucularınızın çoğu eski tarayıcılar kullanıyorsa, ne yaptıklarını görmek için eski tarayıcılarda da test etmelisiniz.

Başarılı bir lansman yapmak istiyorsanız video sayfalarını test etmek çok önemlidir. Sayfanızı, web siteniz için en popüler tarayıcılarda ve sürümlerde test ettiğinizden emin olmalısınız.

Videoyu test etmek için BrowserLab ve AnyBrowser gibi araçları kullanmanın mümkün olduğunu, ancak sayfayı bir tarayıcıda kendiniz açmak kadar güvenilir olmadığını gördük. Bunu yaptığınızda gerçekten çalışıp çalışmadığını görebilirsiniz.

Videonuzu birden çok biçimde kodlamak için tüm zahmete girdiğiniz için, birden çok tarayıcıda görüntülendiğinden emin olmak için test etmelisiniz. Bu, en azından Firefox, Safari ve IE'de test etmeniz gerektiği anlamına gelir.

İçinizin rahat etmesi için, özellikle okuyucularınızın çoğu eski tarayıcılar kullanıyorsa, ne yaptıklarını görmek için eski tarayıcılarda da test etmelisiniz.

Videonun Eski Tarayıcılarda Çalışmasını Sağlamak

Herhangi bir Web sayfasında olduğu gibi, öncelikle bu tarayıcıları çalıştırmanın ne kadar önemli olduğunu düşünmelisiniz. Müşterilerinizin %90'ı Netscape kullanıyorsa, onlar için bir geri dönüş planınız olmalıdır. Ancak %1'den daha azı yaparsa, o kadar da önemli olmayabilir.

Hangi tarayıcıları desteklemeye çalışacağınıza karar verdikten sonra, en kolay yol, videoyu görüntülemeleri için alternatif bir sayfa oluşturmaktır. Bu alternatif sayfada, HTML 4 kullanarak bir video yerleştirirsiniz. Ve sonra onları oraya yönlendirmek için bir çeşit tarayıcı algılama kullanın ya da bu sayfaya o sayfaya bir bağlantı ekleyin.