HTML <source> ຕາມ

ການກໍານົດ ແລະ ການນຳໃຊ້

<source> ຕົວໜຸ່ມທີ່ອະນຸຍາດທີ່ທ່ານສາມາດກໍານົດສາລະພາບ ສຽງ ແລະ ພາບ ສຳລັບສັນສິນສາລະພາບ (ເຊັ່ນ <video>、<audio> ພາຍໃນ <picture>）ກໍານົດຫຼາຍສາລະພາບ.

<source> ຕົວໜຸ່ມທີ່ອະນຸຍາດທີ່ທ່ານສາມາດກໍານົດສາລະພາບອີກຫຼາຍສາລະພາບ/ສຽງ/ພາບ ເຊິ່ງບັນດາຄົນບາບບານຈະເລືອກສາລະພາບທີ່ທິດທາງທີ່ສຸດ. <source>.

ອ່າງວິທີ:

ຫຼັກສູດ HTML:HTML ວິດີໂອ

ຫຼັກສູດ HTML:HTML ສຽງ

ຄູ່ມູນ HTML DOM:ບັນດາບັນລາ Source

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ນີ້ແມ່ນສານສຽງທີ່ມີສາລະພາບສອງສາລະພາບ. ບັນດາຄົນບາບບານຈະເລືອກສາລະພາບທີ່ຂອງພວກເຂົາສະຫຼຸບທີ່ສຸດ. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  ບັນດາຄົນບາບບານຂອງທ່ານບໍ່ສາມາດກະຕຸ້ນແຜ່ນຕັ້ງສຽງ.
</audio>

ທ້າທາຍຂອງຕົນເອງ

ຕົວຢ່າງ 2

ການນຳໃຊ້ໃນ <video> <source> ການສາຍວີດີໂອ:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  ບັນດາຄົນບາບບານຂອງທ່ານບໍ່ສາມາດກະຕຸ້ນແຜ່ນຕັ້ງວີດີໂອ.
</video>

ທ້າທາຍຂອງຕົນເອງ

ຕົວຢ່າງ 3

ການນຳໃຊ້ໃນ <picture> <source> ການກໍານົດພາບທີ່ຕ່າງກັນອີງຕາມຄວາມກວ້າງຂອງຂ້ອຍບານ:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

ທ້າທາຍຂອງຕົນເອງ

ປະສົງ

ປະສົງ ຄວາມພິຈາລະນາ ການອະທິບາຍ
media ການຊອກຫາສາລະພາບ ຍອມຮັບການຊອກຫາສາລະພາບທີ່ມີຢູ່ ປົກກະຕິຈະຖືກກໍານົດໃນ CSS.
sizes ການກໍານົດຂະໜາດພາບສຳລັບຖານອອກພາບທີ່ຕ່າງກັນ.
src URL

ສຳລັບການກໍານົດ URL ຂອງສາລະພາບ.

ເວລາ <source> ຖືກໃຊ້ສຳລັບ <audio> ແລະ <video> ນີ້ປະກອບຄວາມສຳຄັນ.
srcset URL

ນຳໃຊ້ໃຫ້ກຳນົດ URL ຂອງວິດີໂອທີ່ຈະນຳໃຊ້ໃນຕອນທີ່ຕ່າງກັນ.

ເມື່ອ <source> ນຳໃຊ້ໃນ <picture>, ປະເພດນີ້ຈະມີຄວາມຈໍາເປັນ.
type MIME ປະເພດ ປະກອບວິທະຍານ MIME ຂອງວັດຖຸ

ປະເພດທົ່ວໄປ

<source> ປະເພດຢູ່ໃນຕາຕະລາງຢູ່ໃນ ປະເພດທົ່ວໄປ HTML.

ປະເພດວິທະຍານ

<source> ປະເພດຢູ່ໃນຕາຕະລາງຢູ່ໃນ ປະເພດວິທະຍານ HTML.

ການຕັ້ງການຊັ້ນສັບ CSS ຄົງທີ່

ບໍ່ມີ.

ການສະໜັບສະໜູນບັນດາບັນລາ

ຈຳນວນຕົວເລກໃນຕາຕະລາງສະແດງວ່າບັນດາບັນດາບັນລາທີ່ສະໜັບສະໜູນປະເພດນັ້ນ.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5