Video ve ses içeriği

Artık bir web sayfasına basit resimler ekleme konusunda rahat olduğumuza göre, sonraki adım HTML belgelerinize video ve ses oynatıcıları eklemektir! Bu makalede <video> ve <audio> öğeleriyle tam da bunu yapmaya çalışacağız; ardından videolarınıza nasıl açıklama ekleyeceğinize bakarak bitireceğiz.

Web’de video ve ses

Web geliştiricileri, her türlü videoyu çalıştıracak kadar hızlı internet bağlantısına sahip olmaya başladığımız 2000’li yılların başlarından beri (video dosyaları metinden ve hatta resimlerden çok daha büyüktür.) web sayfalarında video ve ses dosyaları kullanmayı istedi. İlk günlerde, HTML gibi yerel web teknolojileri Web’e video ve ses yerleştirme yeteneğine sahip değildi, bu nedenle aşağıdaki gibi tescilli veya eklenti tabanlı teknolojiler (flaş ve sonra Silverlight – ikisi de artık modası geçmiş durumda) bu tür içerikleri işlemek için popüler hale geldi. Bu teknolojiler işe yarasa da, HTML/CSS özellikleriyle iyi çalışmaması, güvenlik sorunları ve erişilebilirlik sorunları da dahil olmak üzere bir dizi sorunu vardı.

Neyse ki, birkaç yıl sonra HTML5 spesifikasyonuna <video> ve <audio> öğeleriyle birlikte bunları kontrol etmek için bazı yeni JavaScript API’leri eklendi. Burada JavaScript’e bakmayacağız – yalnızca HTML ile elde edilebilecek temel özellikler ile ilgileneceğiz.

Tamamen farklı bir beceri seti gerektiren ses ve video dosyalarının nasıl oluşturulacağını da öğrenmeyeceğiz. Bu sebeple örnek ses ve video dosyaları ile örnek kod dosyalarını indirebilirsiniz.

Not: Bu konuya başlamadan önce Youtube, dailymotion, ve vimeo , bunun gibi birçok çevrimiçi video sağlayıcısı olduğunu da bilmelisiniz. Bu tür şirketler videoları barındırmak ve izletmek için uygun ve kolay bir yol sunar, böylece bant genişliği tüketimi konusunda endişelenmenize gerek kalmaz. Bu servisler genellikle web sayfalarınıza video/ses yerleştirmek için hazır kodlar da sağlar; eğer bu rotayı kullanırsanız, bu makalede tartıştığımız bazı zorluklardan kaçınabilirsiniz. Bu tür bir hizmeti bir sonraki makalede biraz daha tartışacağız.

<video> öğesi

<video> elemanı video gömme işimizi oldukça kolaylaştırır. Basit bir örnek şöyle görünür:

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>

Dikkat etmemiz gereken özellikleri şunlardır:

src: <img> öğesinde olduğu gibi src(source) niteliği, gömmek istediğiniz videonun yolunu/adresini içerir. Tam olarak aynı şekilde çalışır. controls: Kullanıcılar video ve ses oynatmayı kontrol edebilmelidir (özellikle epilepsi hastaları). Tarayıcının kendi kontrol arayüzünü eklemek için controls özniteliği kullanmanız veya uygun JavaScript API’sini kullanarak arayüzünüzü kendiniz oluşturmanız gerekir. Arayüz en azından medyayı başlatmanın ve durdurmanın ve ses seviyesini ayarlamanın bir yolunu içermelidir.

<video> etiketlerin içindeki paragraf: Buna yedek içerik denir – <video> öğesi desteklenmiyorsa bu içerik ziyaretçilere görüntülenir ve daha eski tarayıcılar için bir geri dönüş sağlamamıza olanak tanır. Bu hoşunuza giden herhangi bir şey olabilir; yukarıdaki örnekte video dosyasına doğrudan bir bağlantı sağladık, böylece kullanıcı hangi tarayıcıyı kullanıyor olursa olsun en azından bir şekilde ona erişebilir.

Gömülü video şöyle görünecek:

Bu örneğin kaynak koduna bakmak isteyebilirsiniz.

Diğer <video> özellikleri

Bir HTML videosunu görüntülerken ekleyebileceğiniz diğer özellikler de bulunur. Bir sonraki örneğimize bir göz atın:

<video controls width="400" height="400"
       autoplay loop muted preload="auto"
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

Ortaya çıkan kullanıcı arayüzü şuna benzer:

Burada gördüğümüz yeni özellikler şunlar:

width ve height

Video boyutunu bu niteliklerle veya CSS ile kontrol edebilirsiniz. Her iki durumda da videolar en boy oranı olarak bilinen doğal genişlik-yükseklik oranını korur. En boy oranı ayarladığınız boyutlara göre korunmazsa, video alanı yatay olarak dolduracak şekilde büyür ve doldurulmayan alana varsayılan olarak düz bir arka plan rengi verilir.

autoplay

Sayfanın geri kalanı yüklenirken ses veya videonun hemen oynatılmaya başlamasını sağlar. Kullanıcılar bunu gerçekten can sıkıcı bulabileceğinden sitelerinizde otomatik oynatılan video (veya ses) kullanmamanız önerilir.

loop

Videonun (veya sesin) bittiğinde yeniden oynatılmasını sağlar. Bu da can sıkıcı olabilir, bu yüzden sadece gerçekten gerekliyse kullanın.

muted

Medyanın varsayılan olarak ses kapalıyken oynatılmasına neden olur.

poster

Video oynatılmadan önce görüntülenecek bir resmin URL’si bastırılır. Bir açılış ekranı veya reklam ekranı için kullanılmak üzere tasarlanmıştır.

preload

Büyük dosyaları arabelleğe almak için kullanılır; üç değerden birini alabilir:

• "none" dosyayı arabelleğe almaz
• "auto" medya dosyasını arabelleğe alır
• "metadata" yalnızca dosyanın meta verilerini arabelleğe alır

<ses> öğesi

<audio> elemanı aynı <video> gibi çalışır. Bununla birlikte, aşağıda özetlendiği gibi, birkaç küçük fark da bulunur. Tipik bir ses örneği şöyle görünebilir:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

Tarayıcınızda aşağıdakine benzer bir şey göreceksiniz:

Burada bir görüntü bileşeni olmadığı için ses öğesi video oynatıcıdan daha az yer kaplar – sesi oynatmak için kontrolleri görüntülemeniz yeterlidir. Videodan diğer farkları şunlardır:

• <audio> elemanı width/ height özelliklerini desteklemez – yine hiçbir görsel bileşeni olmadığı için bir genişlik ve yükseklik atamak anlamsız olacaktır.
• Ayrıca poster özniteliğini de desteklemez – yine görsel bir bileşen yok.

Bunun dışında <audio, <video> ile aynı özellikleri destekler — bunlar hakkında daha fazla bilgi için yukarıdaki bölümleri inceleyin.

Video metni görüntüleme

Şimdi, gerçekten bilinmesi gereken biraz daha gelişmiş bir kavramı tartışacağız. Pek çok kişi, en azından belirli zamanlarda, Web’de buldukları ses/görüntü içeriğini duyamaz veya duymak istemez. Örneğin:

• Pek çok insanda işitsel bozuklukları vardır, bu nedenle sesi net olarak duyamazlar.
• Gürültülü ortamlarda (bir spor maçı gösterilirken veya kalabalık bir bar gibi) oldukları için sesi duyamayabilirler.
• Benzer şekilde, ses çalmanın dikkat dağıtacağı veya kesintiye uğrayacağı ortamlarda (örneğin bir kütüphanede veya birinin uyumaya çalıştığı durumlarda), altyazılara sahip olmak çok yararlı olabilir.
• Videonun dilini konuşmayan kişiler, medya içeriğini anlamalarına yardımcı olmak için bir metin dökümü hatta çeviri isteyebilir.

Bu insanlara ses/görüntüde konuşulan metnin bir dökümünü sağlayabilmek güzel olmaz mıydı? Olurdu. Neyseki bunu HTML video sayesinde yapabilirsiniz. Bunu yapmak için WebVTT dosya biçimini ve <track> öğesini kullanırız.

Not: “Transkripsiyon”, “söylenen kelimeleri metin olarak yazmak” anlamına gelir. Ortaya çıkan metin bir “transkript”tir.

WebVTT, videoda her bir metin dizisinin görüntülenmesi gereken zaman ve hatta sınırlı stil/konumlandırma bilgisi gibi meta verilerle birlikte birden çok metin dizesi içeren metin dosyalarını yazmak için bir formattır. Bu metin dizelerine ipuçları denir ve farklı amaçlar için kullanılan birkaç tür ipucu vardır. En yaygın ipuçları şunlardır:

subtitles – çeviriler

Seste konuşulanları anlamayan kişiler için yabancı materyallerin çevirileri.

captions – altyazılar

Sesi duyamayan kişilerin neler olduğunu anlamalarını sağlamak için diyalogların veya önemli seslerin açıklamalarının senkronize transkripsiyonları.

timed descriptions – zamanlı açıklamalar

Kör veya başka bir şekilde görme engelli kullanıcılara önemli görselleri açıklamak için medya oynatıcı tarafından söylenmesi gereken metin.

Tipik bir WebVTT dosyası şuna benzer:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

Bunun HTML medya oynatma ile birlikte görüntülenmesini sağlamak için yapmanız gerekenler:

1. .vtt dosyasını mantıklı bir yere kaydedin .
2. .vtt‘yi <track> özelliği ile bağlayın. <track>, <audio> veya <video> içine yerleştirilmelidir, ancak bu tüm <source> öğelerinden sonra yapılır. kind özelliği ile kullanılan ipucunun türü belirtilir, örneğin subtitle. srclang kullanılarak tarayıcıya altyazıların hangi dilde yazıldığı söylenir. Son olarak, okuyucuların aradıkları dili belirlemelerine yardımcı olmak için ekleyin label eklenir.

Örneğin:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
</video>

Bu, aşağıdaki gibi altyazıların görüntülendiği bir videoyla sonuçlanacaktır:

Not: Arama motorları özellikle metin üzerinde başarılı olduklarından, metin parçaları eklemek SEO konusunda da size yardımcı olur. Metin parçaları, arama motorlarının videonun ortasındaki bir noktaya doğrudan bağlanmasına bile izin verirler.

Aktif öğrenme: Kendi ses ve videonuzu gömme

Bu aktif öğrenme için, (ideal olarak) kendi video ve sesinizi kaydetmenizi istiyoruz – çoğu telefon, ses ve videoyu çok kolay bir şekilde kaydetmenize izin veriyor. Video durumunda bir WebM ve MP4 ve ses durumunda bir MP3 ve Ogg elde etmek için biraz dönüştürme yapmanız gerekebilir, ancak bunu çok fazla sorun olmadan yapmanıza izin verecek yeterli program var; Miro Video Dönüştürücü ve audacity gibi.

Herhangi bir video veya ses kaynağı sağlayamıyorsanız, o zaman örnek ses ve video dosyalarını kullanmaktan çekinmeyin.

Şunları yapmanızı istiyoruz:

1. Ses ve video dosyalarınızı bilgisayarınızda yeni bir dizine kaydedin.
2. Aynı dizinde index.html adı verilen yeni bir HTML dosyası oluşturun.
3. Sayfaya <audio> ve <video> öğelerini ekleyin; varsayılan tarayıcı kontrollerinin görüntülenmesini sağlayın.
4. Tarayıcıların en iyi destekledikleri ses biçimini bulmaları ve yüklemeleri için her iki öğeye de <source> öğesi verin. Bunlar type nitelikleri içermelidir.
5. <video> öğesine, video oynatılmaya başlamadan önce gösterilecek bir poster verin. Kendi poster grafiğinizi yaratırken eğlenmeyi unutmayın!

Ek bir örnek olarak metin özelliklerini araştırmayı deneyebilir ve videonuza nasıl altyazı ekleyeceğinizi öğrenebilirsiniz.

Becerilerinizi test edin!

Bu makalenin sonuna geldiniz, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri sakladığınızı doğrulamak için başka testler de bulabilirsiniz.

Umarız web sayfalarına video ve ses eklerken eğlenmişsinizdir!