Ses ve Video

Ders 17/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda sayfanıza oynatılabilir ses ve video ekleyebileceksiniz.

Video

video etiketi bir video oynatır. controls niteliği oynat, duraklat ve ses düğmelerini gösterir. Bu nitelik yazılmazsa kullanıcı videoyu kontrol edemez.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video</title>
</head>
<body>
  <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls width="320"></video>
</body>
</html>

controls gibi niteliklerin değeri yoktur. Yalnızca yazılmaları yeterlidir. Bunlara mantıksal nitelik denir.

Ses

audio etiketi de aynı şekilde çalışır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ses</title>
</head>
<body>
  <p>The Frontwards House (Remix)<br>Cihezels</p>
  <audio src="music.mp3" controls></audio>
</body>
</html>

Birden fazla dosya biçimi

Her tarayıcı her biçimi oynatamayabilir. source etiketleriyle seçenekler sunabilirsiniz. Tarayıcı oynatabildiği ilk dosyayı seçer. Etiketin içine yazdığınız metin, video hiç desteklenmezse görünür.

<video controls width="320" poster="kapak.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Tarayıcınız videoyu oynatamıyor.
</video>

poster, video başlamadan önce görünen resimdir.

Otomatik oynatma

Tarayıcılar, sesli videoların kendiliğinden başlamasını genellikle engeller. Otomatik oynatma istiyorsanız videonun sessiz olması gerekir:

<video src="video.mp4" autoplay muted loop></video>

loop niteliği videoyu başa sarıp tekrar oynatır.

Altyazı

track etiketi videoya altyazı ekler. Altyazı dosyası .vtt uzantılı bir metin dosyasıdır.

<video controls width="320">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="altyazi.vtt" srclang="tr" label="Türkçe">
</video>

Altyazılar yalnızca işitme engelli kullanıcılara değil, sesi kapalı izleyenlere ve dil öğrenenlere de yardımcı olur.

Sık yapılan hatalar

controls yazmamak. Video görünür ama kullanıcı başlatamaz.

Çok büyük video dosyası koymak. Uzun videoları YouTube gibi bir yere yükleyip bir sonraki derste göreceğimiz yöntemle sayfaya ekleyin.

Sesli videoyu otomatik başlatmaya çalışmak. muted olmadan genellikle çalışmaz ve kullanıcıları rahatsız eder.

Soru 1

Video oynatma düğmelerini göstermek için hangi nitelik gerekir?

play :: Böyle bir nitelik yoktur.
controls :: Doğru.
autoplay :: autoplay videoyu kendiliğinden başlatır.

Soru 2

Otomatik oynatılacak bir videoya genellikle hangi nitelik de eklenmelidir?

muted :: Doğru. Tarayıcılar sesli otomatik oynatmayı genellikle engeller.
poster :: poster kapak resmidir.
loop :: loop tekrar oynatır ama otomatik başlatma iznini etkilemez.

Video ekleyin

Hedefteki sonucu elde edin. Yalnızca body içine yazılacak kodu yazın. Kontrolleri olan, 320 piksel genişliğinde bir video ekleyin. Niteliklerin sırası hedefle aynı olsun: src, controls, width. Adres şu olsun: https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4

<video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls width="320"></video>

Bu derste öğrendikleriniz

video ve audio etiketleri controls niteliğiyle kullanıcıya kontrol verir.
source ile birden fazla dosya biçimi sunulabilir.
Otomatik oynatma için genellikle muted gerekir, altyazı için track kullanılır.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.