HTML Medya

Görüntü haritaları tek bir resmin bölgelerini tıklanabilir yaptı. Webde medya daha geniştir: durağan görüntüler, ses, hareketli görüntüler ve bazen iç içe sayfalar veya barındırılan oynatıcılar. HTML, tarayıcıların bu kaynakları denetimler ve erişilebilirlik kancalarıyla gösterebilmesi veya oynatabilmesi için amaca özel etiketler verir. Bu oturum, Video, Audio, YouTube ve Plug-ins derinleşmeden önceki haritanızdır.

Burada “medya” ne demek

Kursun günlük dilinde medya, yalnızca paragraf ve başlık olmayan içerik demektir — fotoğraflar, simgeler, ses klipleri, demolar ve gömmeler. Doğru öğe, tarayıcının yerel oynatma arayüzünü göstermesine, doğru kaynak türünü indirmesine ve yardımcı teknolojilere gizemli, betik dolu bir <div>den daha net bir rol vermesine yardım eder.

Doğrudan yanıt

• Görüntüler → img (ve bazen birden çok dosya için picture)
• Ses → audio
• Filmler ve klipler → video
• İç içe gezinme (haritalar, başka sitelerin oynatıcıları) → çoğu zaman iframe
  İş için eşleşen öğeyi tercih edin. Güçlü ve erişilebilir özel bir oynatıcınız yoksa audio ve video üzerinde kullanıcılara controls verin. Medya önemli bilgi taşıyorsa metin alternatifi, altyazı veya deşifre planlayın.

Yapı taşlarına kısa bakış

Küçük bir örnek

imgyi zaten biliyorsunuz. İşte audio ve videonun ilk alıştırma sayfasında yanında nasıl durduğu — yollar örnektir; evde denerken gerçekten sahip olduğunuz dosyaları kullanın.

Örneği okumak

• img hâlâ src ve anlamlı alt ister
• audio ve video src kullanır (veya sonraki derslerde iç içe source çocukları) ve controlstan yararlanır
• video üzerindeki width, dosya yüklenirken düzen alanı ayırabilir
• Boş dosyalar veya yanlış yollar diğer varlıklar gibi başarısız olur — klasörleri erken kontrol edin

Controls bir başlangıç alışkanlığıdır

controls özniteliği tarayıcıdan oynat, duraklat ve ilgili arayüzü göstermesini ister. Açık bir kullanıcı eylemi olmadan sesin otomatik oynaması çoğu zaman engellenir ve genellikle rahatsız eder. Görünür denetimlerle başlayın. Özel oynatıcılar, bir proje gerçekten ihtiyaç duyarsa sonra gelir.

Doğru aracı seçmek

• Podcast veya sesli not → audio
• Ekran kaydı veya klip → video
• Fotoğraf veya diyagram → img / picture
• Harita widget’ı veya üçüncü taraf oynatıcı sayfası → çoğu zaman iframe (performans ve güvenlik bilinciyle)
  Yerel bir öğe varken videoyu görüntü etiketine zorlamayın veya tüm dış uygulamayı gizemli bir betik yığınına sıkıştırmayın.

Erişilebilirlik ve anlam

Medya bir şey öğretiyorsa, duyamayan veya göremeyen bir kişinin yine de fikri almasını planlayın: bilgilendirici görüntüler için alt, konuşmalı video için altyazılar, uzun ses için deşifre. Bilgi taşımayan dekoratif hareket odağı tuzağa düşürmemeli veya yüksek sesle otomatik oynamamalıdır. Sonraki uzman dersler daha derine iner; alışkanlığı şimdi kilitleyin.

iframe maliyeti (önizleme)

iframe başka bir gezinme bağlamı gömer. Haritalar ve barındırılan oynatıcılar için güçlüdür; ayrıca o sayfanın betiklerini, çerezlerini ve düzen ağırlığını sizinkine getirir. Gerçek hedef iç içe gömmek olduğunda kullanın — kendi barındırdığınız her medya dosyası için varsayılan olarak değil. Kendi dosyalarınız için yerel audio / video / img daha basit kalır.

Sonraki dersler nasıl oturur

Bu haritadan sonra: Video ve Audio öznitelikleri, birden çok kaynağı ve pratik dosya alışkanlıklarını öğretir. Plug-ins ve YouTube daha eski veya barındırılan kalıpları kapsar. Iframe gömmeyi derinleştirir. Bu sayfayı dizin, o sayfaları atölye gibi düşünün.

Editörünüzde pratik

1. Tablodan bir podcast dosyası için hangi öğeyi seçeceğinizi söyleyin (audio).
2. Alıştırma sayfasına net alt ile bir img ekleyin (bunu zaten biliyorsunuz).
3. Küçük bir mp3 veya mp4’ünüz varsa controls ile audio veya video ekleyin.
4. Notlarınıza bir satır yazın: “konuşmalı içerik için altyazı/deşifre.”
5. Yol haritası tanıdık gelsin diye sonraki medya oturumlarının başlıklarına göz atın.

Kolay hatalar

• Controls veya açık kullanıcı jesti olmadan sesi otomatik oynatmak
• Boyut düşüncesi ve alternatif metin planı olmadan devasa videolar gömmek
• Yerel audio/video/img yeterliyken her dosya için iframe kullanmak
• iframe’in başka bir sayfanın güvenlik ve performans maliyetlerini ithal ettiğini unutmak
• Bu genel bakışı “sonsuza kadar yeterli” sayıp gerçekten medya yayınlarken uzman dersleri atlamak

Özet

• HTML medya görüntüleri, audio, video ve gömmeleri kapsar
• İş için eşleşen öğeyi tercih edin
• Kullanıcılara denetim verin; medya anlam taşıyorsa alternatifleri planlayın
• Kendi dosyalarınız için yerel etiketler; gerçekten başka bir sayfa veya barındırılan oynatıcı iç içe koyduğunuzda iframe
• Sonraki dersler her türü uzmanlaştırır — bu sayfa haritadır