HTML Video

Medya özeti sizi birkaç aileye yönlendirdi. Bu oturum tek birine odaklanır: kendiniz barındırdığınız klipler ve demolar için video öğesi. Ziyaretçilere sürpriz otomatik ses yerine controls ile oynat/duraklat arayüzü verin.

Video ne yapar

video, tarayıcıya bir film dosyasını indirmesini ve sayfada çizmesini söyler. Tek bir dosyayı src ile gösterebilir veya tarayıcının desteklenen bir format seçebilmesi için birkaç <source> çocuğu listeleyebilirsiniz. İsteğe bağlı öznitelikler boyut ayırır (width / height), oynatmadan önce durağan bir kare gösterir (poster) ve yerel denetimleri açar.

Doğrudan yanıt

<video controls src="movie.mp4"> kullanın veya birkaç format için <source> çocuklarını iç içe koyun. Oynatmadan önce önizleme karesi için bir poster görüntüsü ekleyin. Medyayı oynatamayan aracılar için video içinde kısa fallback metni (ve isteğe bağlı bir indirme bağlantısı) bırakın. Sıkıştırılmış, makul boyutlu dosyaları tercih edin.

Controls ile basit video

Tek bir MP4 artı controls ve bir genişlik, birçok öğretim sayfası için yeterlidir.

Basit örneği okumak

• controls tarayıcıdan oynat/duraklat arayüzü ister
• width="480" dosya yüklenirken düzen alanı ayırmaya yardım eder
• src media klasörünüzdeki film dosyasını gösterir
• video içindeki metin, öğe desteklenmediğinde fallback içeriğidir

Birden çok kaynak ve poster

Tarayıcılar format rahatlığında farklılık gösterir. type ipuçlarıyla WebM ve MP4 listelemek, üstüne durağan bir poster eklemek yaygın pratik bir kalıptır.

Çok kaynaklı örneği okumak

• poster, oynatma başlayana kadar bir önizleme görüntüsü gösterir
• Her source bir dosya ve bir MIME type adlandırır
• Tarayıcı oynatabildiği ilk kaynağı seçer
• İçerideki indirme bağlantısı, oynatma yokken yardımcı olur

Dosya boyutu ve formatlar

Dev kamera dışa aktarımları yavaş ağlarda takılır. Öğretim ihtiyacına uyan web boyutunda bir MP4 (ve isteğe bağlı WebM) dışa aktarın — bir ders sayfasında kısa demolar, çok gigabaytlık master kopyalardan iyidir. İlk günde her kapsayıcıya ihtiyacınız yok; önce net bir MP4 çalıştırın, ardından kitleniz gerektiriyorsa ikinci bir format ekleyin.

Autoplay: önce controls öğrenin

Sesli otomatik oynatma çoğu zaman engellenir ve genellikle kötü bir nezakettir. Pazarlama kahramanları için susturulmuş autoplay hileleri vardır, ancak yeni başlayanlar önce controls ve kullanıcı başlatmalı oynatmayı öğrenmelidir. Daha sonra autoplay gerektiğinde tarayıcı politikalarını dikkatle okuyun ve erişilebilir bir duraklatma yolu bırakın.

Altyazılar ve erişilebilirlik (alışkanlık)

Konuşulan içerik önemli bir şey öğretiyorsa, altyazı veya deşifre planlayın — tam track öğelerini sonraki bir geçişte bağlasanız bile. Konuşan-kafa dersinin tek erişilebilir özeti olarak yalnızca poster görüntüsüne güvenmeyin.

Width, height ve düzen

width (ve en-boy oranını bildiğinizde eşleşen height) ayarlamak, video meta verisi yüklenirken düzen sıçramasını azaltır. Uyumsuz sayılarla germek yanlış görünür; gerçek en-boy oranını görüntülerde yaptığınız gibi aklınızda tutun.

Editörünüzde pratik

1. Kısa bir .mp4 dosyasını media klasörüne koyun.
2. video + controls + makul bir genişlikle gömün.
3. Öğenin içine fallback metni ekleyin.
4. İsteğe bağlı olarak bir poster görüntüsü ve ikinci bir source formatı ekleyin.
5. Sayfayı açın, oynatın ve duraklatın, ardından mümkünse ağı kısıtlayarak test edin — dosya boyutunun neden önemli olduğunu fark edin.

Kolay hatalar

• Kullanıcıların kolayca oynatamaması için controls eksik
• Yavaş ağlarda takılan dev sıkıştırılmamış dosyalar göndermek
• Fallback metni veya indirme bağlantısını unutmak
• Temelleri anlamadan önce sesli autoplay’e yönelmek
• imgde yaptığınız gibi video üzerine alt koymak (bunun yerine altyazı/deşifre ve görünür açıklamalar kullanın)
• Barındırılan YouTube gömmelerini (iframe) kendi barındırdığınız video dosyalarıyla karıştırmak

Özet

• video barındırdığınız film dosyalarını gömer
• Oynatma arayüzü için controls kullanın
• Birden çok source etiketi format desteğini iyileştirir
• poster oynatmadan önce bir önizleme karesi gösterir
• Sıkıştırılmış dosyaları tercih edin ve sürpriz sesli autoplay’den kaçının