video Etiketi HTML sayfalarına iliştirilmiş video içeriğine izin verir.

Bu öğe, bir web kamerası kullanarak

getUserMedia().veya WebRTC aracılığıyla video akışı sağlayabilir veya srcözniteliği kullanarak referans verdiğiniz bir video kaynağını oynatabilir :

<video src="file.mp4" />

Varsayılan olarak, tarayıcı bu öğe için herhangi bir denetim göstermez, yalnızca videoyu gösterir.

Bu, sesin yalnızca otomatik oynatmaya ayarlandığında çalacağı anlamına gelir (bundan sonra daha fazlası) ve kullanıcı videoda nasıl durdurulacağını, duraklatılacağını, ses düzeyini kontrol edemeyeceğini veya belirli bir konumda atlayamayacağını görebilir.

Yerleşik denetimleri göstermek için controlsözniteliği ekleyebilirsiniz :

<video src="file.mp4" controls />

Chrome'da şu şekilde görünüyor:

Video etiketi görünümü

Başlangıçta görüntülenen görüntü, videonun ilk karesidir.

Oldukça yaygın bir ihtiyaç olan başka bir resmi şu posterözniteliği kullanarak görüntüleyebilirsiniz :

<video src="video.mp4" poster="image.png" controls />

Mevcut değilse, tarayıcı videonun ilk karesini mevcut olduğu anda görüntüleyecektir.

typeÖzniteliği kullanarak video dosyasının MIME türünü belirtebilirsiniz . Ayarlanmazsa, tarayıcı bunu otomatik olarak belirlemeye çalışır:

<video src="file.mp4" controls type="video/mp4" />

Varsayılan olarak bir video dosyası otomatik olarak oynatılmaz. autoplaySesi otomatik olarak çalmak için özelliği ekleyin :

<video src="file.mp4" controls autoplay />

Bazı tarayıcılar, mutedözniteliğin otomatik oynatılmasını da gerektirir . Video, yalnızca sessize alındığında otomatik olarak oynatılır:

<audio src="file.mp3" controls autoplay muted />

loopVideo dosyasının sonunda durur mevcut değil aksi takdirde özellik, 0:00 eğer kümesi en video oynatılmaya yeniden:

<video src="file.mp4" controls autoplay loop />

Tarayıcının bunu hesaba katabilmesi ve sonunda yüklendiğinde düzeni değiştirmemesi için öğenin alacağı alanı ayarlamak için widthve heightniteliklerini ayarlayabilirsiniz. Piksel cinsinden ifade edilen sayısal bir değer alır.

CORS

Video  CORS'a tabidir ve sunucu tarafından buna izin vermediğiniz sürece, bir video çapraz kaynakı oynatılamaz.

Bu etiketi bir web sayfasına koyarsanız hiçbir şey olmaz. Videoyu başlatmanın bir yolu yok ve otonom olarak oynamıyor. Videoyu oynatmak için şu autoplayözelliği eklemelisiniz :

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

Video görüntüleme özelliklerini değiştirme

Video alanı için widthve heightözelliklerini kullanarak piksel cinsinden ifade edilen bir genişlik ve yükseklik ayarlayabilirsiniz :

<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />

videoDesteklenmiyorsa içerik görüntüleme

videoEtikettir çok iyi desteklenen IE9 kadar, yani günümüzde tutucu metni olması gerekmez olmalı, ama bu seçeneği vardır. Bir kapanış etiketi eklemeniz ve açılış ve kapanış etiketleri arasına metin girmeniz yeterlidir:

<video src="video.mp4">Video tag not supported</video>

Birden çok kaynak eklemek

Tarayıcılar bir video codec bileşenini uygulayabilir ancak diğerini uygulayamaz. Belki dosya boyutunu yarıya indiren daha yeni bir standart kullanmak istiyorsunuz, ancak yine de eski tarayıcıları desteklemek istiyorsunuz.

Bunu sourceetiketiyle yaparsınız :

<video controls>
 <source src="video.mp4" type="video/mp4" />
 <source src="video.avi" type="video/avi"/>
</audio>

Bu giriş için kapsam dışında olmasına rağmen, CSS kullanarak denetimlere stil uygulayabilirsiniz.

Videoyu önceden yükleme

Ayarlamazsanız autoplay, teknik özellik, tarayıcıların yalnızca video meta verilerini indireceğini (örneğin uzunluğu öğrenmek için) ancak videonun kendisini indirmeyeceğini belirtir.

Kullanarak videoyu önceden yüklemeye zorlayabilirsiniz.

<video src="video.mp4" preload="auto" />

Video etkinlikleriyle çalışma

videoİlginç projeler ve arayüzler oluşturmak için JavaScript kullanarak her öğedeki olayları dinleyebiliriz . Oynamak için birçok farklı olay var.

playVideo oynatma başladığında olay tetiklenir:

document.querySelector('video').addEventListener('play', () => {
  alert('Video is playing!!!')
})

Ayrıca, bu etkinliği (diğerleri gibi) on<event>doğrudan HTML öğesi üzerindeki özniteliği kullanarak da ekleyebilirsiniz :

<video src="video.mp4" controls onplay="playing()" />
const playing = () => {
  alert('Video is playing!!!')
})

Bunlar dinleyebileceğiniz birkaç olaydır:

  • play video oynamaya başladı
  • pause video duraklatıldı
  • ended video oynatma tamamlandı
  • timeupdate kullanıcı oynatma zaman çizelgesiyle etkileşim kurdu ve ileri / geri gitti
  • volumechange kullanıcı sesi değiştirdi