Bagaimana untuk membenamkan imej dan video dalam html5?

Bagaimana untuk membenamkan imej dan video dalam html5?

Imej dan video membenamkan dalam HTML5 adalah mudah, menggunakan tag <img> untuk imej dan tag <video> untuk video. Untuk imej, atribut src menentukan url atau laluan imej, manakala atribut alt menyediakan teks alternatif untuk akses dan enjin carian. Teks alt harus menerangkan kandungan imej dengan ringkas. Sebagai contoh:

<img src="myimage.jpg" alt="A beautiful sunset over the ocean">

Untuk video, tag <video> membolehkan anda menentukan pelbagai sumber video menggunakan tag <source> untuk menyokong format yang berbeza (seperti MP4, Webm, OGG) memastikan keserasian penyemak imbas yang lebih luas. Atribut controls menambah permainan terbina dalam, jeda, dan kawalan kelantangan. Anda juga boleh menentukan imej poster menggunakan atribut poster, yang memaparkan sebelum video mula dimainkan. Berikut adalah contoh:

<video width="320" height="240" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Teks "Penyemak imbas anda tidak menyokong tag video" bertindak sebagai sandaran untuk pelayar yang tidak menyokong elemen <video>. Ingat untuk menggantikan "myimage.jpg", "myvideo.mp4", dan "myvideo.webm" dengan laluan fail atau URL sebenar. Atribut pentingnya ialah

(sumber imej) dan

(teks alternatif). Atribut pilihan termasuk

,

, <img> (untuk gaya CSS), dan lain -lain untuk mengawal paparan imej. Di dalam tag src, anda biasanya menggunakan tag alt untuk menentukan pelbagai sumber video dengan format yang berbeza ( atribut) untuk memastikan keserasian merentasi pelbagai pelayar. Atribut seperti width, height, style (untuk menambah kawalan pemain),

(imej pegun untuk dipaparkan sebelum main balik), dan

(untuk memulakan main balik secara automatik) biasanya digunakan. Ingat, mesej sandaran disyorkan dalam tag <video> untuk penyemak imbas yang tidak menyokong elemen video HTML5. Kaedah yang paling berkesan ialah menggunakan CSS. Daripada menentukan atribut tetap <video> dan <source> dalam HTML, gunakan CSS untuk mengawal saiznya. Untuk imej, tetapkan type hingga 100% dan width untuk mengekalkan nisbah aspek: height

<img src="myimage.jpg" alt="A beautiful sunset over the ocean">

Untuk video, anda boleh memohon CSS yang sama dengan elemen

itu sendiri: <video>

<video width="320" height="240" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

secara alternatif, anda boleh menggunakan atribut

yang ditetapkan kepada 100% dan biarkan penyemak imbas mengendalikan ketinggian secara automatik, namun kaedah ini kadang -kadang akan mengganggu nisbah aspek bergantung pada penyemak imbas. Menggunakan width dan max-width biasanya lebih disukai untuk mengekalkan nisbah aspek. Menggunakan CSS height: auto memastikan penjajaran yang betul dan menghalang isu jarak yang tidak dijangka. Berikut adalah beberapa amalan terbaik: display: block;

Pengoptimuman imej:

Gunakan format imej yang sesuai (WEBP untuk pemampatan unggul jika disokong, JPEG untuk gambar, PNG untuk imej dengan ketelusan), memampatkan imej menggunakan alat seperti tinypng atau imageoptim untuk mengurangkan saiz fail tanpa kehilangan kualiti. Pertimbangkan untuk menggunakan imej responsif (

elemen atau

atribut dalam
• tag) untuk memenuhi saiz imej yang berbeza berdasarkan peranti pengguna. Gunakan alat pemampatan video untuk mengurangkan saiz fail. Pertimbangkan untuk menyediakan pelbagai resolusi video menggunakan tag dalam tag untuk memenuhi jalur lebar yang berbeza. Ini bermakna hanya memuatkan imej dan video apabila mereka akan kelihatan dalam viewport. Ini mengurangkan masa beban halaman awal. Ini dapat dicapai dengan atribut seperti <picture> dalam tag srcset dan <img> (disokong oleh penyemak imbas yang paling moden) atau dengan perpustakaan JavaScript. Penghantaran.

Atas ialah kandungan terperinci Bagaimana untuk membenamkan imej dan video dalam html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!