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 oynanabilmesi için büyük bir teknik bilgiye ihtiyacınız olacak.

Bu bölümde, CodeW3C.com sizi sorunlarla çözüm yöntemleri hakkında bilgilendiriyor.

<embed> etiketini kullanma

<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österemez.
  • Videoyi diğer formatlara dönüştürdüğünüzde, hala tüm tarayıcılarda oynatılamaz.

<object> etiketini kullanma

<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österemez.
  • Videoyi diğer formatlara dönüştürdüğünüzde, hala tüm tarayıcılarda oynatılamaz.

<video> etiketini kullanma

<video> HTML 5'teki yeni etikettir.

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

Aşağıdaki HTML parçası web sayfasına gömülü ogg, mp4 veya webm formatlı 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> elementi eski tarayıcılarda etkisizdir.
  • <video> elementi HTML 4 ve XHTML doğrulamasından 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 formatta kullanılmıştır. HTML 5 <video> elementi videoyu mp4, ogg veya webm formatlarından biriyle oynatmaya çalışır. Eğer tümü başarısız olursa, <embed> elementine geri döner.

Sorun

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

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

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üper Bağlantılar Kullanımı

Web sayfasında 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ı, 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çerik olarak dahil edilen videoya içsel video denir.

Web uygulamanızda içsel video kullanmayı planlıyorsanız, birçok kişinin içsel videoyu rahatsız edici bulduğunu fark etmeniz gerekecek.

Aynı zamanda, kullanıcıların tarayıcılarında 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çermektir. Olumlu bir örnek, kullanıcıların video görmek ve bir bağlantıya tıklamak istediği bir durumda, sayfanın açılması ve ardından videonun oynatılmasıdır.

HTML 4.01 Çokluortam Etiketleri

Etiket Açıklama
<applet> Tercihen kullanılmaz.İçe aktarılan applet'i tanımlar.
<embed> Tercihen kullanılmaz.İçe aktarılan nesneyi tanımlar. (HTML5'te izin verilir)
<object> İçe aktarılan nesneyi tanımlar.
<param> Nesnenin parametrelerini tanımlar.

HTML 5 Çokluortam Etiketleri

Etiket Açıklama
<video> Ses, örneğin müzik veya diğer ses akışları gibi sesleri tanımlar.
<embed> Etiketler, örneğin eklentileri gibi içe aktarılan içerikleri tanımlar.