HTML Video

HTML'de video oynatmanın birçok yolu vardır.

Örnek

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Kişisel olarak deneyin

Sorunlar, sorunlar ve çözümler

HTML'de video oynatmak kolay değil!

Tüm tarayıcılar (Internet Explorer, Chrome, Firefox, Safari, Opera) ve tüm cihazlar (PC, Mac, iPad, iPhone) üzerinde video dosyanızın oynatılmasını sağlamak için birçok teknik bilgiye hakim olmanız gerekiyor.

Bu bölümde, CodeW3C.com sizi sorun ve çözüm yöntemleriyle tanıştırıyor.

<embed> etiketini kullanın

<embed> etiketinin HTML sayfasında multimedya öğeleri gömmek için kullanıldığı.

Aşağıdaki HTML kodu, web sayfasına gömülen bir Flash videosunu gösterir:

Örnek

<embed src="movie.swf" height="200" width="200"/>

Kişisel olarak deneyin

Sorun

  • HTML4 <embed> etiketini tanıyamaz. Sayfanız doğrulanamaz.
  • Tarayıcı Flash'ı desteklemiyorsa, video oynatılamaz
  • iPad ve iPhone Flash videoları görüntüleyemez.
  • Videoyu diğer bir formata dönüştürdüğünüzde, tüm tarayıcılarda oynatılamaz.

<object> etiketini kullanın

<object> etiketinin HTML sayfasında multimedya öğeleri gömmek için kullanıldığı.

Aşağıdaki HTML parçası, web sayfasına gömülen bir Flash videosunu gösterir:

Örnek

<object data="movie.swf" height="200" width="200"/>

Kişisel olarak deneyin

Sorun

  • Tarayıcı Flash'ı desteklemiyorsa, video oynatılamaz.
  • iPad ve iPhone Flash videoları görüntüleyemez.
  • Videoyu diğer bir formata dönüştürdüğünüzde, tüm tarayıcılarda oynatılamaz.

<video> etiketini kullanın

HTML 5'te yeni etiket olan <video>.

<video> etiketinin amacı HTML sayfasında video öğesi gömmektir.

Aşağıdaki HTML parçası, web sayfasına gömülmüş ogg, mp4 veya webm formatındaki bir videoyu gösterecektir:

Örnek

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Tarayıcınız video etiketini desteklememektedir.
</video>

Kişisel olarak deneyin

Sorun

  • Videoyu birçok farklı formatta dönüştürmelisiniz.
  • <video> ögesi eski tarayıcılarda etkisizdir.
  • <video> ögesi HTML 4 ve XHTML doğrulamasını geçemez.

En iyi HTML çözümü

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Kişisel olarak deneyin

Örnekte 4 farklı video formu kullanılmıştır. HTML 5 <video> ögesi videoyu mp4, ogg veya webm formatlarından biriyle oynamaya çalışır. Eğer tümü başarısız olursa, <embed> ögesine geri döner.

Sorun

  • Videoyu birçok farklı formatta dönüştürmelisiniz.
  • <video> ögesi HTML 4 ve XHTML doğrulamasını geçemez.
  • <embed> ögesi HTML 4 ve XHTML doğrulamasını geçemez.

Açıklama:<!DOCTYPE html> (HTML5) ile doğrulama sorununu çözmek için kullanın.

Youku Çözümü

HTML'de videoyu göstermenin en basit yolu Youku gibi video sitelerini kullanmaktır.

Web sayfasında video oynatmak istiyorsanız, videoyu Youku gibi video sitelerine yükleyebilir ve videoyu oynatmak için HTML kodunu web sayfanıza ekleyebilirsiniz:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Kişisel olarak deneyin

Süperlinkler kullanarak

Web sayfası, medya dosyasına yönlendiren bağlantılar içeriyorsa, çoğu tarayıcı bu dosyaları oynatmak için "yardımcı uygulamalar" kullanır.

Aşağıdaki kod parçası, AVI dosyasına yönlendiren bir bağlantıyı gösterir. Kullanıcı bu bağlantıya tıkladığında, tarayıcı, bu AVI dosyasını oynatmak için Windows Media Player gibi bir "yardımcı uygulama" başlatır:

Örnek

<a href="movie.swf">Bir video dosyasını oynatın</a>

Kişisel olarak deneyin

İçsel video hakkında bir not

Web sayfasında içerilen video, içsel video olarak adlandırılır.

Web uygulamanızda içsel video kullanmayı planlıyorsanız, birçok kişinin içsel videoların sinir bozucu olduğunu fark etmeniz gerekecek.

Aynı zamanda, kullanıcıların tarayıcılarındaki içsel video seçeneklerini kapattığını göz önünde bulundurun.

En iyi önerimiz, kullanıcıların içsel video görmek istediği yerlerde bunları içerirmektir. Bir olumlu örnek, kullanıcıların video görmek ve bir bağlantıya tıklamak zorunda olduğu bir sayfa açmak ve ardından videoyu oynatmaktır.

HTML 4.01 Çoklu Medya Etiketleri

Etiket Açıklama
<applet> Tercih edilmemektedir.Gömülü applet'i tanımlar.
<embed> Tercih edilmemektedir.Gömülü nesneyi tanımlar. (HTML5'te izin verilir)
<object> Gömülü nesneyi tanımlar.
<param> Nesnenin parametrelerini tanımlar.

HTML 5 Çoklu Medya Etiketleri

Etiket Açıklama
<video> Ses, örneğin müzik veya diğer ses akışları gibi gömülü içeriği tanımlar.
<embed> Etiketler, örneğin eklentiler gibi gömülü içeriği tanımlar.