Video html selalu menampilkan kontrol

Contoh di atas menunjukkan penggunaan sederhana dari elemen <video>. Dengan cara yang mirip dengan elemen

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Konten di dalam tag pembuka dan penutup

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Seperti semua elemen HTML lainnya, elemen ini mendukung atribut global

Atribut Boolean;

Catatan. Situs yang secara otomatis memutar audio (atau video dengan trek audio) dapat menjadi pengalaman yang tidak menyenangkan bagi pengguna, jadi sebaiknya dihindari sebisa mungkin. Jika Anda harus menawarkan fungsionalitas putar otomatis, Anda harus membuatnya ikut serta (mengharuskan pengguna untuk mengaktifkannya secara khusus). Namun, ini bisa berguna saat membuat elemen media yang sumbernya akan diatur di lain waktu, di bawah kendali pengguna. Lihat panduan putar otomatis kami untuk informasi tambahan tentang cara menggunakan putar otomatis dengan benar

Untuk menonaktifkan putar otomatis video,

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Di beberapa browser (mis. g. Chrome 70. 0) putar otomatis tidak berfungsi jika tidak ada atribut

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Atribut Boolean yang jika

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Jika atribut ini ada, browser akan menawarkan kontrol untuk memungkinkan pengguna mengontrol pemutaran video, termasuk volume, pencarian, dan jeda/melanjutkan pemutaran

Atribut

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Nilai yang diperbolehkan adalah

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Gunakan atribut jika Anda ingin menonaktifkan mode Picture-In-Picture (dan kontrol)

Atribut yang disebutkan ini menunjukkan apakah akan menggunakan CORS untuk mengambil video terkait. Sumber daya yang mendukung CORS dapat digunakan kembali dalam elemen

AddType video/webm .webm

AddType video/webm .webm

Mengirim permintaan lintas asal tanpa kredensial. Dengan kata lain, mengirimkan header HTTP

AddType video/webm .webm

AddType video/webm .webm

AddType video/webm .webm

Mengirim permintaan lintas asal dengan kredensial. Dengan kata lain, mengirimkan header HTTP

AddType video/webm .webm

AddType video/webm .webm

Jika tidak ada, sumber daya diambil tanpa permintaan CORS (mis. e. tanpa mengirimkan header HTTP

AddType video/webm .webm

AddType video/webm .webm

AddType video/webm .webm

Mencegah browser menyarankan menu konteks Gambar-dalam-Gambar atau untuk meminta Gambar-dalam-Gambar secara otomatis dalam beberapa kasus

Atribut Boolean yang digunakan untuk menonaktifkan kemampuan pemutaran jarak jauh pada perangkat yang terpasang menggunakan kabel (HDMI, DVI, dll. ) dan teknologi nirkabel (Miracast, Chromecast, DLNA, AirPlay, dll. )

Di Safari, Anda dapat menggunakan

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

Ketinggian area tampilan video, dalam (hanya nilai absolut; )

Atribut Boolean;

Atribut Boolean yang menunjukkan pengaturan default audio yang terdapat dalam video. Jika diatur, audio awalnya akan dibungkam. Nilai defaultnya adalah

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

Atribut Boolean yang menunjukkan bahwa video akan diputar "inline", yang berada di dalam area pemutaran elemen. Perhatikan bahwa tidak adanya atribut ini tidak berarti bahwa video akan selalu diputar dalam layar penuh

URL untuk gambar yang akan ditampilkan saat video sedang diunduh. Jika atribut ini tidak ditentukan, tidak ada yang ditampilkan hingga bingkai pertama tersedia, kemudian bingkai pertama ditampilkan sebagai bingkai poster

Atribut yang disebutkan ini dimaksudkan untuk memberikan petunjuk kepada browser tentang apa yang menurut penulis akan menghasilkan pengalaman pengguna terbaik terkait konten apa yang dimuat sebelum video diputar. Ini mungkin memiliki salah satu dari nilai berikut

• <!-- Using multiple sources as fallbacks for a video tag -->
  <!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
  <!-- Poster hosted by Wikimedia -->
  <video
    width="620"
    controls
    poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
    <source
      src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
      type="video/ogg" />
    <source
      src="https://archive.org/download/ElephantsDream/ed_hd.avi"
      type="video/avi" />
    <source
      src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
      type="video/mp4" />
  
    Sorry, your browser doesn't support embedded videos, but don't worry, you can
    <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
      download the MP4
    </a>
    and watch it with your favorite video player!
  </video>
  

  0. Menunjukkan bahwa video tidak boleh dimuat sebelumnya

• <!-- Using multiple sources as fallbacks for a video tag -->
  <!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
  <!-- Poster hosted by Wikimedia -->
  <video
    width="620"
    controls
    poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
    <source
      src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
      type="video/ogg" />
    <source
      src="https://archive.org/download/ElephantsDream/ed_hd.avi"
      type="video/avi" />
    <source
      src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
      type="video/mp4" />
  
    Sorry, your browser doesn't support embedded videos, but don't worry, you can
    <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
      download the MP4
    </a>
    and watch it with your favorite video player!
  </video>
  

  1. Menunjukkan bahwa hanya metadata video (mis. g. panjang) diambil

• <!-- Using multiple sources as fallbacks for a video tag -->
  <!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
  <!-- Poster hosted by Wikimedia -->
  <video
    width="620"
    controls
    poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
    <source
      src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
      type="video/ogg" />
    <source
      src="https://archive.org/download/ElephantsDream/ed_hd.avi"
      type="video/avi" />
    <source
      src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
      type="video/mp4" />
  
    Sorry, your browser doesn't support embedded videos, but don't worry, you can
    <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
      download the MP4
    </a>
    and watch it with your favorite video player!
  </video>
  

  2. Menunjukkan bahwa seluruh file video dapat diunduh, meskipun pengguna tidak diharapkan untuk menggunakannya
• string kosong. Sinonim dari nilai

  <!-- Using multiple sources as fallbacks for a video tag -->
  <!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
  <!-- Poster hosted by Wikimedia -->
  <video
    width="620"
    controls
    poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
    <source
      src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
      type="video/ogg" />
    <source
      src="https://archive.org/download/ElephantsDream/ed_hd.avi"
      type="video/avi" />
    <source
      src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
      type="video/mp4" />
  
    Sorry, your browser doesn't support embedded videos, but don't worry, you can
    <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
      download the MP4
    </a>
    and watch it with your favorite video player!
  </video>
  

  _2

Nilai default berbeda untuk setiap browser. Spesifikasi menyarankan untuk disetel ke

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  </a>
  and watch it with your favorite video player!
</video>

Catatan

• Atribut

  const elem = document.querySelector("video");
  
  elem.audioTracks.onaddtrack = (event) => {
    trackEditor.addTrack(event.track);
  };
  
  elem.audioTracks.onremovetrack = (event) => {
    trackEditor.removeTrack(event.track);
  };
  

  4 lebih diutamakan daripada

  <!-- Simple video example -->
  <!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
  <!-- Poster from peach.blender.org -->
  <video
    controls
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
    width="620">
    Sorry, your browser doesn't support embedded videos, but don't worry, you can
    <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
    and watch it with your favorite video player!
  </video>
  

  9. Jika

  const elem = document.querySelector("video");
  
  elem.audioTracks.onaddtrack = (event) => {
    trackEditor.addTrack(event.track);
  };
  
  elem.audioTracks.onremovetrack = (event) => {
    trackEditor.removeTrack(event.track);
  };
  

  4 ditentukan, browser jelas harus mulai mengunduh video untuk diputar
• Spesifikasi tidak memaksa browser untuk mengikuti nilai atribut ini;

URL video yang akan disematkan. Ini opsional;

Lebar area tampilan video, dalam (hanya nilai absolut; )

Event NameFired When

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

Tidak semua browser mendukung format video yang sama;

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

Kami menawarkan panduan substantif dan menyeluruh untuk jenis file media dan panduan untuk codec yang didukung untuk video. Juga tersedia panduan untuk codec audio yang dapat digunakan dengannya

Catatan penggunaan lainnya

• Jika Anda tidak menentukan atribut

  AddType video/ogg .ogm
  AddType video/ogg .ogv
  AddType video/ogg .ogg
  

  _0, video tidak akan menyertakan kontrol default browser; . Lihat Membuat pemutar video lintas-browser untuk detail selengkapnya
• Untuk memungkinkan kontrol yang tepat atas konten video (dan audio) Anda, <audio>0 mengaktifkan berbagai. Selain memberikan kemampuan kontrol, peristiwa ini memungkinkan Anda memantau kemajuan pengunduhan dan pemutaran media, serta status dan posisi pemutaran
• Anda dapat menggunakan properti <audio>2 untuk menyesuaikan posisi video di dalam bingkai elemen, dan properti <audio>3 untuk mengontrol bagaimana ukuran video disesuaikan agar muat di dalam bingkai
• Untuk menampilkan subtitel/teks bersama dengan video Anda, Anda dapat menggunakan beberapa JavaScript bersama dengan elemen <audio>4 dan format WebVTT. Lihat Menambahkan teks dan subtitel ke video HTML untuk informasi lebih lanjut
• Anda dapat memutar file audio menggunakan elemen <video>. Ini berguna jika, misalnya, Anda perlu menjalankan audio dengan transkrip WebVTT, karena elemen <audio> tidak mengizinkan teks menggunakan WebVTT
• Untuk menguji konten fallback pada browser yang mendukung elemen tersebut, Anda dapat mengganti <video> dengan elemen yang tidak ada seperti <audio>8

Sumber informasi umum yang baik tentang penggunaan HTML <video> adalah tutorial pemula konten Video dan audio

Elemen <video> adalah elemen yang diganti — nilainya

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Tidak ada pertimbangan khusus untuk penataan <video>; . , lalu berikan informasi gaya dan tata letak sesuai kebutuhan. Dasar-dasar gaya pemutar video menyediakan beberapa teknik gaya yang berguna

Anda dapat mendeteksi kapan trek ditambahkan ke dan dihapus dari elemen <video> menggunakan peristiwa

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Tambahkan pendengar

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Tambahkan pendengar acara

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Misalnya, untuk mendeteksi saat trek audio ditambahkan atau dihapus dari elemen <video>, Anda dapat menggunakan kode seperti ini

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Kode ini mengawasi trek audio untuk ditambahkan dan dihapus dari elemen, dan memanggil fungsi hipotetis pada editor trek untuk mendaftarkan dan menghapus trek dari daftar editor trek yang tersedia

Anda juga dapat menggunakan

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Jika jenis MIME untuk video tidak disetel dengan benar di server, video mungkin tidak menampilkan atau menampilkan kotak abu-abu berisi X (jika JavaScript diaktifkan)

Jika Anda menggunakan Server Web Apache untuk menyajikan video Ogg Theora, Anda dapat memperbaiki masalah ini dengan menambahkan ekstensi jenis file video ke jenis MIME "video/ogg". Ekstensi jenis file video yang paling umum adalah ". gmn", ". ogv", atau ". ogg". Untuk melakukannya, edit file "mime. ketik" file di "/etc/apache" atau gunakan direktif konfigurasi

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Jika Anda menyajikan video Anda sebagai WebM, Anda dapat memperbaiki masalah ini untuk Server Web Apache dengan menambahkan ekstensi yang digunakan oleh file video Anda (". webm" adalah yang paling umum) ke tipe MIME "video/webm" melalui "mime. types" di "/etc/apache" atau melalui direktif konfigurasi "AddType" di

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

AddType video/webm .webm

Host web Anda mungkin menyediakan antarmuka yang mudah untuk perubahan konfigurasi tipe MIME untuk teknologi baru hingga pembaruan global terjadi secara alami

Contoh ini memutar video saat diaktifkan, memberikan pengguna kontrol video default browser untuk mengontrol pemutaran

HTML

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

Hasil

Hingga video mulai diputar, gambar yang diberikan dalam atribut

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

Contoh ini dibangun di atas yang terakhir, menawarkan tiga sumber berbeda untuk media;

HTML

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  </a>
  and watch it with your favorite video player!
</video>

Hasil

Pertama dicoba. Jika itu tidak bisa diputar, maka AVI dicoba. Akhirnya dicoba. Pesan fallback ditampilkan jika elemen video tidak didukung, tetapi tidak jika semua sumber gagal

Beberapa tipe file media memungkinkan Anda memberikan informasi yang lebih spesifik menggunakan parameter

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Video harus menyediakan teks dan transkrip yang mendeskripsikan kontennya secara akurat (lihat Menambahkan teks dan subtitel ke video HTML untuk informasi lebih lanjut tentang cara menerapkannya). Teks memungkinkan orang yang mengalami gangguan pendengaran untuk memahami konten audio video saat video diputar, sedangkan transkrip memungkinkan orang yang membutuhkan waktu tambahan untuk dapat meninjau konten audio dengan kecepatan dan format yang nyaman bagi mereka.

Perlu diperhatikan bahwa meskipun Anda dapat memberi teks pada media audio saja, Anda hanya dapat melakukannya saat memutar audio dalam elemen <video>, karena wilayah video dari elemen tersebut digunakan untuk menyajikan teks. Ini adalah salah satu skenario khusus yang berguna untuk memutar audio dalam elemen video

Jika layanan subtitel otomatis digunakan, penting untuk meninjau konten yang dihasilkan untuk memastikannya mewakili video sumber secara akurat

Selain dialog lisan, subtitel dan transkrip juga harus mengidentifikasi musik dan efek suara yang mengomunikasikan informasi penting. Ini termasuk emosi dan nada

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

Teks tidak boleh menghalangi subjek utama video. Mereka dapat diposisikan menggunakan

• Format Trek Teks Video Web (WebVTT)
• WebAIM. Teks, Transkrip, dan Deskripsi Audio
• Memahami Kriteria Sukses 1. 2. 1. W3C Memahami WCAG 2. 0
• Memahami Kriteria Sukses 1. 2. 2. W3C Memahami WCAG 2. 0

Kategori konten, konten frasa, konten tersemat. Jika memiliki atribut. konten interaktif dan konten gamblang. Konten yang diizinkan

Jika elemen memiliki atribut. nol atau lebih <audio>4 elemen, diikuti oleh konten transparan yang tidak mengandung elemen media–tidak ada <audio> atau <video>

Kalau tidak. nol atau lebih

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  </a>
  and watch it with your favorite video player!
</video>

Bagaimana cara menunjukkan kontrol untuk video dalam HTML?

Bagaimana cara memutar video tanpa kontrol di HTML?

Bagaimana cara menyembunyikan kontrol video di tag video?

Bagaimana cara menyesuaikan kontrol video dalam HTML?

Create a new JavaScript file called script. js and link it up to your HTML page using a

kode html

Reply 7 1 Membagikan

Pos Terkait

Cara menggunakan connection python

Cara menggunakan exception python

Tindakan ini tidak akan bekerja pada banyak pilihan excel copy paste

Penggunaan fungsi FORMATSTRING pada PHP

Cara mendapatkan daftar dari kamus python

Dockerfile mulai php-fpm dan nginx

Bagaimana Anda mengganti semua string dalam daftar dengan python?

Apa itu variabel biner di python?

Bagaimana menghitung persentase di excel?

Bagaimana cara menyimpan database mysql?