Cara kecil untuk memasukkan video ke halaman web HTML

现在如果要在页面中使用 Video 标签 ， 需要考虑三种情况 ， 支持 Ogg Theora 或者 VP8 （如果这玩意儿没出事的话）的（ Opera 、 Mozilla 、 Chrome） ， 支持 H.264 的（ Safari 、 IE 9 、 Chrome) tidak mendukung (IE6, 7, 8). Baiklah, mari kita pahami video HTML 5 dari tingkat teknis, termasuk penggunaan tag video, atribut media dan metode yang dapat digunakan objek video, dan acara media.

Tag video berisi SRC, poster, preload, autoplay, loop, kontrol, lebar, tinggi dan atribut lainnya, serta label <source> digunakan secara internal. Selain label <source>, tag video juga dapat menyertakan konten yang dikembalikan ketika video yang ditentukan tidak dapat diputar.

Dapatkah Anda membayangkan apa yang digunakan atribut SRC. Seperti label <mmg>, atribut ini digunakan untuk menentukan alamat video. Atribut poster digunakan untuk menentukan gambar, menampilkan (diagram pratinjau) ketika data video saat ini tidak valid. Data video yang tidak valid mungkin bahwa video sedang dimuat, yang mungkin merupakan kesalahan alamat video.

 <Lebar Video = 658 Tinggi = 444 SRC = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png Toplay> </video>

Atribut ini juga dapat dipahami melalui nama. Ada tiga nilai opsional: tidak ada, metadata, otomatis. Jika atribut ini tidak digunakan, standarnya adalah otomatis.

 <Lebar video = 658 tinggi = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = none> </video >

Tidak ada: Tidak ada pra -muatan. Menggunakan nilai atribut ini mungkin bahwa produsen halaman percaya bahwa pengguna tidak mengharapkan video ini, atau mengurangi permintaan HTTP.

Metadata: pra -muatan parsial. Menggunakan nilai atribut ini, produser halaman percaya bahwa pengguna tidak mengharapkan video ini, tetapi memberi pengguna beberapa metadata (termasuk ukuran, bingkai pertama, daftar trek, durasi, dll.).

Otomatis: Semua pra -muatan.

Atribut lain yang tergantung pada namanya tahu tujuannya. Atribut autoplay digunakan untuk mengatur video apakah video diputar secara otomatis, yang merupakan atribut boolean. Ketika muncul, itu berarti pemutaran otomatis, yang berarti tidak bermain.

 <Lebar video = 658 tinggi = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = none> </video >

Perhatikan bahwa nilai atribut boolean dalam HTML tidak benar dan salah. Penggunaan yang benar adalah bahwa menggunakan atribut ini dalam label menunjukkan benar. )); Jika atribut ini tidak digunakan dalam label, itu berarti false (pemutaran otomatis adalah <video />).

 <Lebar video = 658 tinggi = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png Toplay loop = loop> </video >

Jelas sekilas bahwa atribut loop juga digunakan untuk menentukan apakah video diedarkan, yang juga merupakan atribut boolean.

 <Lebar video = 658 tinggi = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = tidak ada kontrol = kontrol> </dide>

Atribut kontrol digunakan untuk menunjukkan ke browser untuk menunjukkan bahwa produser halaman tidak menggunakan skrip untuk menghasilkan pengontrol pemutaran, dan browser perlu menggunakan bilah kontrol pemutaran.

Bilah kontrol harus mencakup kontrol jeda bermain, kontrol kemajuan bermain, kontrol volume, dan sebagainya.

Bilah kontrol pemutaran default dari setiap browser berbeda pada antarmuka. Karena masalah aneh browser saya, label video Firefox dan Safari tidak normal, sehingga keduanya hanya dapat menemukan tangkapan layar secara online.

Atribut universal milik label, jadi tidak perlu mengatakan ini.

 <Lebar video = 658 tinggi = 444 poster = http://www.youname.com/images/firs/png autoplay = autoplay preload = tidak ada kontrol> <sumber s> <sumber s rc = http: //www.youname. com/Images /firtst.ogv/> <Source src = http://www.youname.com/images/first.ogg/> </dide>

Label sumber digunakan untuk menentukan beberapa opsi (karena tag audio juga dapat menyertakan label ini, jadi gunakan media alih -alih video) (browser hanya dapat memilih satu di akhir) Gunakan saat menggunakan atribut SRC.

Browser dapat mendeteksi apakah video yang ditentukan oleh label sumber dapat diputar (mungkin format video tidak mendukung, video tidak ada, dll.) Jika tidak dapat diputar, ganti yang berikutnya. Metode ini sebagian besar digunakan untuk browser yang berbeda. Tag sumber itu sendiri tidak berarti makna apa pun dan tidak dapat muncul sendiri.

Label ini mencakup tiga atribut: SRC, Type, dan Media.

Atribut SRC: Digunakan untuk menentukan alamat media, sama dengan label video.

Jenis Atribut: Ini digunakan untuk menjelaskan jenis media yang ditentukan atribut SRC, membantu browser untuk menentukan apakah akan mendukung format media tersebut sebelum mendapatkan media.

Atribut Media: Ini digunakan untuk menjelaskan di mana media digunakan dalam medium, dan nilai defaultnya adalah semua saat tidak diatur, yang berarti mendukung semua media. Apakah Anda berpikir tentang atribut media dari label <yaya>? Sama.

 <Lebar video = 658 tinggi = 444 poster = http://www.youname.com/images/firs/png autoplay = autoplay preload = tidak ada kontrol> <sumber s> <sumber s rc = http: //www.youname. com/Images /firtst.ogv/> <Source src = http://www.youname.com/images/first.ogg/> </dide>

Kode ini mendefinisikan video di halaman. piksel, ketinggian esensi 240 piksel

Pilih alamat video pertama dari label sumber pertama, nilai atribut SRC, kategori video adalah OGG Video, decoder pengkodean video adalah Theora, decoder pengkodean audio adalah Vorbis, media pemutaran adalah tampilan; Alamat tidak lagi lagi alamat video tidak lagi lelah. Jika Anda harus kompatibel dengan IE, Anda dapat menambahkan set label flash player setelah label sumber terakhir, atau menggunakan kode javascript kecil.

Di atas adalah ringkasan dari metode memasukkan video di halaman web HTML yang diperkenalkan oleh Xiaobian. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!