Melihat lebih dekat pada elemen video dalam HTML

Penjelasan terperinci tentang teg video dalam HTML

Teg video dalam HTML5 ialah teg yang digunakan untuk memainkan video di halaman web. Ia boleh memaparkan video menggunakan format yang berbeza, seperti MP4, WebM, Ogg dan banyak lagi. Dalam artikel ini, kami akan memperkenalkan penggunaan teg video secara terperinci dan memberikan contoh kod khusus.

1. Struktur Asas
   Berikut ialah struktur asas teg video:

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

Dalam contoh di atas, kami menentukan laluan ke fail video (video.mp4) dan menambahkan atribut kawalan untuk memaparkan kawalan di atas video Butang (main, jeda, pelarasan kelantangan, dsb.). Jika penyemak imbas tidak menyokong teg video, kandungan sandaran akan dipaparkan (Pelayar anda tidak menyokong teg video).

2. Penjelasan terperinci atribut
   2.1 src attribute
   Atribut src digunakan untuk menentukan laluan fail video. Anda boleh menggunakan laluan relatif atau mutlak. Contoh:

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

2.2 mengawal atribut
Atribut kawalan digunakan untuk memaparkan butang kawalan video. Contoh:

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

2.3 atribut lebar dan tinggi
Gunakan atribut lebar dan tinggi untuk menyesuaikan lebar dan tinggi video. Contoh:

<video src="video.mp4" width="640" height="360">
</video>

2.4 atribut automain
Gunakan atribut automain untuk menetapkan video supaya dimainkan secara automatik. Contoh:

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

2.5 atribut gelung
Gunakan atribut gelung untuk menetapkan video kepada gelung. Contoh:

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

2.6 atribut diredamkan
Gunakan atribut diredam untuk menetapkan video supaya dimainkan secara senyap. Contoh:

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

3. Format video yang disokong
   Walaupun teg video menyokong berbilang format video, penyemak imbas yang berbeza mungkin menyokong format yang berbeza. Berikut ialah beberapa format video yang biasa digunakan dan sokongan penyemak imbas yang sepadan:

• MP4: disokong oleh kebanyakan penyemak imbas
• WebM: disokong oleh kebanyakan penyemak imbas moden
• Ogg: disokong oleh Firefox, Chrome dan pelayar lain

Untuk

memastikan bahawa video boleh dimainkan dengan betul pada platform dan penyemak imbas yang berbeza, yang terbaik adalah menyediakan sumber video dalam berbilang format pada masa yang sama:

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

4. Sari kata terbenam
   Dengan menggunakan tag trek, kami boleh membenamkan fail sari kata dalam video tag. Contoh:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" label="English" srclang="en">
  Your browser does not support the video tag.
</video>

Dalam contoh di atas, kami membenamkan fail sari kata (sari kata.vtt) menggunakan teg runut dan menambahkan beberapa parameter yang berkaitan (jenis, label, srclang).

Ringkasan:
Dengan teg video, kami boleh membenamkan dan memainkan video dengan mudah di halaman web. Kita boleh menggunakan atribut yang berbeza untuk mengawal main balik automatik, gelung, meredam dan gelagat lain video. Untuk memastikan keserasian video, yang terbaik adalah menyediakan sumber video dalam berbilang format pada masa yang sama. Selain itu, kami juga boleh membenamkan fail sari kata menggunakan tag trek.

Melalui pengenalan artikel ini, saya percaya bahawa pembaca mempunyai pemahaman yang lebih mendalam tentang teg video dan boleh menerapkannya dengan berkesan dalam halaman web mereka sendiri. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Melihat lebih dekat pada elemen video dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!