HTML Videolar ~ HTML öğren

Sayfa içeriği

Videoların etiketleri ve özellikleri

Genel olarak, tarayıcıya sayfada bir video görüntülemek istediğimizi söylemek için <video> etiketini kullanırız.
Görüntülemek istediğimiz videoyu belirtmek için <source> etiketini kullanırız.

Sayfaya video eklemek için HTML5, sayfaya video eklemenin iki yolunu sağlayabilir ve iki yöntem de esas olarak <video> etiketini kullanır.
Tek bir video, yani yalnızca bir video dosyası eklemek için <video> etiketini <video src="..."> olarak kullanabilirsin.
Üç noktayı video dosyasının yolu veya bağlantısıyla değiştirebilirsin.

Gösterilebilecek video türleri

Üç tür .mp4, .webm ve .ogg tüm tarayıcılarda çalışır ve bununla, tarayıcıların herhangi bir eklentiye ihtiyaç olmadan bu tür video dosyalarıyla uğraşmaya adanmış olduğunu kastediyoruz.
Kullanıcının cihazının zayıf olması ve sayfadaki videonun çözünürlüğünün çok yüksek olması tarayıcının video dosyasını oynatamamasına yol açacağını olduğunu unutma.

Biraz önce bahsettiğim formüller tüm tarayıcılarda çalışıyor ancak bu video kullanıcının cihazında çalışacak anlamına gelmiyor,
Çok önemli bir şeye dikkat etmelisin, o da kullanıcının telefonunun veya bilgisayarının video dosya formatını desteklemeyebileceğidir.
Genel olarak .mp4 ve .webm kullanmanızı öneririm.

Bu nedenle, oynatılabilecek video türlerinin yanı sıra, kullanıcı tarafından hangi videoların oynatılabileceğini belirlerken videoların çözünürlük bakılması gereken bir şeydir.
Genel olarak, 360p tüm kullanıcılar için çalışır.

Video etiketi özellikleri

<video> etiketi için etiketin en önemli özellikleri şunlardır:

width: Video penceresinin genişliğini belirtmek için ona ilettiğimiz sayı, genişliği piksel olarak temsil eder.
height: Video penceresinin uzunluğunu belirtmek için, ona ilettiğimiz sayı, piksel cinsinden uzunluğu temsil eder.
control: Video penceresindeki kontrol düğmelerini gösterir.

<source> etiketi için, etiketin en önemli özellikleri şunlardır:

src: görüntülenecek videonun yolunu belirtmek için.
type: Görüntülenecek videonun türünü belirtir.

Teknik Bilgiler

Görüntülenecek videonun boyutunu belirtmezsen, tarayıcı videoyu yüklendikten sonra sayfada görüntülemeye çalıştığında büyük olasılıkla yanıp söner ve bir anda tüm sayfayı yeniden çizer, bu nedenle kullanıcı bunu bir flaş olarak görür.

Bu nedenle, ister HTML özellikleriyle ister CSS koduyla belirtsen de, sayfada görüntülemeyi düşündüğün videonun boyutunu her zaman belirtmeyi unutma.

Sayfaya video eklemek

Aşağıdaki örnekte sayfaya bir video ekledim.

<video src="https://src.k-html.com/video.mp4"/>

kod dene

<video> etiketi herhangi bir oynatma denetimi göstermez, HTML, CSS ve JavaScript ile kendini oluşturabilirsin; Demek istediğim şey video çıkıyor ama çalışmıyor ve duraklatma, ses kilidi veya diğer ayarlar gibi herhangi bir kontrol butonunu göstermiyor ve bu tercihler css ve javascript kullanılarak oluşturulabiliyor ve HTML5'de controls özelliği var.

<video src="https://src.k-html.com/video.mp4" controls/>

kod dene

Aşağıdaki örnekte, çalışmaması durumunda videonun bir yedek kopyasını ekledim.

<source> etiketi 2 kere ekledim sebebi daha önceden hazırladık 2 version vardır, niye böyle yaptık?
tarayıcı ilk version açmayı denicek çalıştı ise video normal bir şekilde görüncek , ama birinci version çalışmadı ise ikinci version oynatmayı denicek,
burada .mp4 bir version ekledim ve .webm bir version ekledim birinci version çalımadı ise sonraki version oynatmayı denicek
tabi kii version eklemekte zorunlulu değilsin ve bir tek version ekleye bilirsin version eklemekte önenirim ve istediğin kadar version eklebilirsin

Tarayıcınız video etiketini desteklemiyor! Metini kullanıcının tarayıcısı ilk etapta video oynatmayı desteklemiyorsa sayfada görüntülenir.
Tarayıcı yalnızca formatı desteklemiyorsa mesajın görüneceğini, ancak bu durumda gerekli videoyu bulamazsa, metni göstermeyeceğini ve yalnızca bir resmi de görüntüleyeceğini unutma.

<video controls>
 <source src="https://src.k-html.com/video.mp4" type="video/mp4">
 <source src="https://src.k-html.com/video.webm" type="video/webm">
 Tarayıcınız video etiketini desteklemiyor! 
</video>

kod dene

Aşağıdaki örnekte sayfaya video kontrol butonlarını gösteren ve genişliğinin 360 piksel ve uzunluğunun 200 piksel olduğunu belirten bir video ekledim.

<video width="360" height="200" controls>
<source src="https://src.k-html.com/video.mp4" type="video/mp4">
<source src="https://src.k-html.com/video.webm" type="video/webm">
Tarayıcınız video etiketini desteklemiyor! 
</video>

kod dene

video etiketin özellikleri

preload

Preload: özelliği, yazarın sayfa yüklendiğinde videonun yüklenmesi gerektiğini düşünüp düşünmediğini belirtir.
preload özelliği, yazarın tarayıcıya, en iyi kullanıcı deneyimine yol açacağını düşündüğü şey hakkında bir ipucu vermesini sağlar.

Not:autoplay özelliği varsa, preload özelliği yok sayılır.

preload özelliği Değerleri

auto: sayfa yüklendiğinde tarayıcının tüm videoyu yüklemesi gerektiğini olması.
metadata: sayfa yüklendiğinde tarayıcının yalnızca meta verileri yüklemesi gerektiğini olması
none: sayfa yüklendiğinde tarayıcının videoyu yüklememesi gerektiğini olması

poster

Bu özellik, video yüklenene veya video oynatılana kadar video penceresinde bir görüntü görüntülemek için kullanılır.

  <video src="https://src.k-html.com/video.mp4" poster="https://src.k-html.com/poster.png" controls>

kod dene

loop

Video dosyası yeniden oynatmayı bitirdiğinde videoyu tekrar oynatır.

<video src="https://src.k-html.com/video.mp4" controls loop>

kod dene

muted

Sesi kapatmak için kullanılır, böylece video dosyası yüklendiğinde ses varsayılan olarak kapatılmış olarak görünür.

<video src="https://src.k-html.com/video.mp4" controls muted>

kod dene

Videoyu otomatik olarak başlatmak

YouTube'da olduğu gibi sayfa açıldığında videonun otomatik olarak oynatılmasını istiyorsan, bu özelliğin bazı telefonlarda çalışmadığına dikkat ederek <video> etiketine autoplay özelliğini ekleyebilirsin.

Aşağıdaki örnekte sayfaya bir video ekledim ve sayfa açıldığında otomatik olarak oynatılmasını ekledim.

<video width="360" height"200" controls autoplay>
<source src="https://src.k-html.com/video.mp4" type="video/mp4">
<source src="https://src.k-html.com/video.webm" type="video/webm">
  Tarayıcınız video etiketini desteklemiyor! 
</video>

kod dene

önceki ders sonraki ders