Penjelasan detail tentang atribut dan metode tag video di Html5

Baru-baru ini saya menulis pemain khusus. Sebelum menulis, kita harus mempelajari semua properti dan metode pemain. Hanya dengan mengetahui musuh kita dan diri kita sendiri kita dapat bertarung melalui seratus pertempuran... Nanti kita akan membahasnya pemain yang kami tulis dan beberapa kendala yang kami temui. Unggah juga

• src: URL video
• poster: sampul video, tidak ada gambar yang ditampilkan selama pemutaran
• pramuat: pramuat
• putar otomatis: putar otomatis
• putaran: pemutaran putaran
• kontrol: Bilah kontrol yang disertakan dengan browser
• lebar: lebar video
• tinggi: tinggi video
• webkit-playsinline=true mencegah pemutaran layar penuh di iOS
• playsinline=true Sama seperti di atas
• x-webkit-airplay=true mendukung fungsi AirPlay ios
• x5-video-player-type=h5 Aktifkan pemutar H5 lapisan yang sama
• x5-video-player-fullscreen=pengaturan layar penuh yang sebenarnya
• x5-video-orientation=potret layar vertikal
• style=object-fit:isi penutup penuh
• muted=benar-benar pemutaran yang diredam

Seharusnya masih ada lagi...tapi saya belum menggunakannya. Anda dapat memeriksa dokumentasi MDN.

1. Status kesalahan

 $video.error; //null: normal $video.error.code; //1. Penghentian pengguna 2. Kesalahan jaringan 3. Kesalahan penguraian kode 4. URL tidak valid

2. Atribut status jaringan (beberapa lebih umum digunakan)

 $video.currentSrc; //Kembalikan URL sumber daya saat ini $video.src = value; //Kembalikan atau atur URL sumber daya saat ini $video.canPlayType(type); memutar $video.networkState ; //0. Elemen ini tidak diinisialisasi 1. Normal tetapi tidak menggunakan jaringan 2. Data sedang diunduh 3. Tidak ada sumber daya yang ditemukan $video.load(); video.buffer; //Kembali ke area buffer, $video.buffered.end(0) mendapatkan data saat terakhir $video.preload; //tidak ada: jangan memuat metadata terlebih dahulu: memuat informasi sumber daya secara otomatis:

3. Keadaan siap

 $video.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA $video.seeking;

4. Status pemutaran (umum digunakan)

 $video.currentTime = nilai; //Posisi pemutaran saat ini, tugas dapat mengubah posisi $video.duration; //Aliran panjang sumber daya saat ini mengembalikan tak terbatas $video.paused; //Apakah akan menjeda $video.defaultPlaybackRate = nilai; //Default Kecepatan pemutaran dapat diatur $video.playbackRate = value; //Kecepatan pemutaran saat ini akan diubah segera setelah pengaturan $video.seekable //Kembali ke area yang dapat dicari $video.ended; $video.putar otomatis; //Apakah akan memutar $video.loop secara otomatis; //Apakah akan memutar $video.play(); //Putar $video.pause();

5.Kontrol

 $video.controls;//Apakah ada bilah kontrol default $video.volume = value; //Volume $video.muted = value; //Menonaktifkan metode event video (biasanya ditambahkan *) loadstart //Klien mulai meminta data *kemajuan //Klien meminta penangguhan data //Pembatalan pengunduhan yang tertunda //Klien secara aktif menghentikan pengunduhan (bukan disebabkan oleh kesalahan), *kesalahan //Terjadi kesalahan saat meminta data terhenti //Kecepatan jaringan terhenti * mainkan //mainkan () dan pemicu putar otomatis *jeda saat memulai pemutaran //pause() memicu metadata yang dimuat //Berhasil memperoleh panjang sumber daya *menunggu //Menunggu data, bukan kesalahan *memutar //Memulai pemutaran canplay //Dapat memutar, tetapi mungkin dijeda karena memuat di tengah *canplaythrough // Dapat mencari pemutaran // Dicari selama pencarian sumber daya // Pencarian sumber daya selesai *pembaruan waktu // Waktu pemutaran diubah *berakhir // Perubahan laju pemutaran berakhir // Kecepatan pemutaran diubah durasiperubahan // Panjang sumber daya diubah *perubahan volume // Volume diubah

Pada dasarnya, kode pemain khusus ditulis berdasarkan API dan atribut ini, yang memudahkan Anda memeriksanya nanti....

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.