HTML Video

HTML'de video oynatma yöntemleri birçok.

Ö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 bilmeniz gerekiyor.

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

<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österemez.
  • Videoyi diğer formatlara 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österemez.
  • Videoyi diğer formatlara 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 ögesi gömmektir.

Aşağıdaki HTML parçası web sayfasına gömülmüş 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> ö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 formatta 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 ardından web sayfanıza HTML kodunu ekleyerek videoyu oynatabilirsiniz:

<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üperlink Kullanımı

Web sayfasında medya dosyasına yönlendiren bağlantılar içeren, ç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

İçe gömülü video hakkında bir yorum

Web sayfasında içe gömülen video, içe gömülü video olarak adlandırılır.

Web uygulamanızda içe gömülü video kullanmayı planlıyorsanız, birçok kişinin içe gömülü videoyu rahatsız edici bulduğunu fark etmeniz gerekecek.

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

En iyi önerimiz, kullanıcıların içe gömülü videoyu görmek istediği yerlerde bunları içerir. Bir örnek, kullanıcıların videoyu görmek ve bir bağlantıya tıklamak zorunda olduğu bir sayfada videoyu oynatmak olur.

HTML 4.01 Çokluortam Etiketleri

Etiket Açıklama
<applet> Tercih edilmemektedir.İçe gömülen applet'i tanımlar.
<embed> Tercih edilmemektedir.İçe gömülen nesneyi tanımlar. (HTML5'te izin verilmiştir)
<object> İçe gömülen nesneyi tanımlar.
<param> Nesnenin parametrelerini tanımlar.

HTML 5 Çokluortam Etiketleri

Etiket Açıklama
<video> Sesleri, örneğin müzik veya diğer ses akışlarını tanımlar.
<embed> Etiketler içe gömülen içerikleri tanımlar, örneğin eklentiler.