ສ້າງວິດີໂອທີ່ສາມາດເຂົ້າເຖິງໄດ້ດ້ວຍ HTML5

ກະວີ: Randy Alexander
ວັນທີຂອງການສ້າງ: 26 ເດືອນເມສາ 2021
ວັນທີປັບປຸງ: 14 ເດືອນພຶດສະພາ 2024
Anonim
ສ້າງວິດີໂອທີ່ສາມາດເຂົ້າເຖິງໄດ້ດ້ວຍ HTML5 - Creative
ສ້າງວິດີໂອທີ່ສາມາດເຂົ້າເຖິງໄດ້ດ້ວຍ HTML5 - Creative

ດ້ວຍ HTML5 ມັນສາມາດເພີ່ມເນື້ອຫາວິດີໂອເຂົ້າໃນ ໜ້າ ເວັບໂດຍບໍ່ຕ້ອງໃຊ້ເວລາດຽວກັນ. HTML5 ຍັງເຮັດໃຫ້ງ່າຍຕໍ່ການຈັດຫາຮູບແບບທາງເລືອກ ສຳ ລັບເນື້ອຫາຂອງທ່ານ.

ວິດີໂອ> ອົງປະກອບຝັງເນື້ອຫາມັນຕິມີເດຍເຂົ້າໃນ ໜ້າ. ມັນງ່າຍທີ່ສຸດ, ມັນໃຊ້ມັນ src ໃຫ້ເຫດຜົນຊີ້ເຖິງເອກະສານແຫຼ່ງວິດີໂອ.

video src = "movie.webm" ຄວບຄຸມ> / ວິດີໂອ>

ເມື່ອປະຈຸບັນ, ຄຸນລັກສະນະຄວບຄຸມຊີ້ໃຫ້ເຫັນວ່າຕົວທ່ອງເວັບຄວນສະແດງຊຸດຄວບຄຸມ UI ຂອງຕົວເອງ ສຳ ລັບ ໜ້າ ທີ່ເຊັ່ນ: ຫຼີ້ນ / ຢຸດ. ຖ້າທ່ານຂຽນຊຸດຄວບຄຸມ UI ຂອງທ່ານເອງ, ຄຸນລັກສະນະຈະສະ ໜອງ ຜົນຕອບແທນເມື່ອສະຄຣິບຖືກປິດໃນ browser. ນອກນັ້ນທ່ານຍັງສາມາດສະ ໜອງ ເນື້ອຫາໃນການຕອບແທນ ສຳ ລັບຕົວທ່ອງເວັບທີ່ມີມໍລະດົກ. ນີ້ອາດຈະແມ່ນຕົວ ໜັງ ສືສະຖິດ, ລິ້ງເພື່ອດາວໂຫລດເອກະສານວິດີໂອ, ຫຼື ຄຳ ແນະ ນຳ ກ່ຽວກັບວິທີການຍົກລະດັບໃຫ້ຕົວແທນຜູ້ໃຊ້ທີ່ຮູ້ HTML5.

ວິດີໂອ src = "movie.webm" ຄວບຄຸມ> ຖອຍຫຼັງເນື້ອຫາ ສຳ ລັບໂປແກຼມທ່ອງເວັບເກົ່າ ./video>

ໂປສເຕີ ຄຸນລັກສະນະສາມາດຖືກ ນຳ ໃຊ້ເພື່ອສະແດງຮູບພາບ ຕຳ ແໜ່ງ ທີ່ສະຖິດ. ຍັງມີການສົນທະນາບາງຢ່າງກ່ຽວກັບທາງ ໂປສເຕີ ມີການຈັດການພາຍໃນ HTML5, ແຕ່ ສຳ ລັບດຽວນີ້ມັນເປັນຄຸນລັກສະນະຂອງ ວິດີໂອ> ອົງປະກອບຕົວມັນເອງ.


ວິດີໂອ src = "movie.webm" ໂປດເຕີ = "image.webp" ຄວບຄຸມ> ຖອຍຫຼັງເນື້ອຫາ ສຳ ລັບໂປແກຼມທ່ອງເວັບເກົ່າ ./video>

ຕິດຕາມ> ອົງປະກອບແມ່ນລູກຂອງຄອບຄົວ ວິດີໂອ> ອົງປະກອບທີ່ໃຊ້ເພື່ອຊີ້ໄປທີ່ເອກະສານຂໍ້ຄວາມທີ່ ກຳ ນົດເວລາພາຍນອກໃຫ້ຂໍ້ມູນເພີ່ມເຕີມ ສຳ ລັບວິດີໂອ. ມັນໃຊ້ ປະເພດ ໃຫ້ເຫດຜົນວ່າຕ້ອງ ກຳ ນົດຂໍ້ມູນປະເພດໃດແດ່.

  • ຄຳ ບັນຍາຍຍ່ອຍ (ເລີ່ມຕົ້ນ): ໃຫ້ການແປບົດສົນທະນາສົນທະນາເມື່ອສຽງບໍ່ເຂົ້າໃຈ.
  • ຄຳ ບັນຍາຍ: ການບັນທຶກສຽງແບບເຕັມຮູບແບບເມື່ອສຽງບໍ່ມີຫຼືບໍ່ສາມາດຟັງໄດ້ໂດຍຜູ້ເບິ່ງ.
  • ຄຳ ອະທິບາຍ: ການຖ່າຍທອດເນື້ອຫາທີ່ເບິ່ງເຫັນ ສຳ ລັບການປ່ຽນເປັນການເວົ້າທາງສັງເຄາະ.
  • ບົດທີ: ສະ ໜອງ ກົນໄກການ ນຳ ທາງໃນການຊອກຫາເນື້ອຫາວິດີໂອໂດຍຜ່ານລາຍຊື່ແບບໂຕ້ຕອບໃນ UI.
  • Metadata: ການນໍາໃຊ້ເພື່ອສະຫນອງການເຂົ້າເຖິງການຕິດຕາມສໍາລັບການນໍາໃຊ້ກັບອັກສອນ.

video src = "movie.webm" ໂປດເຕີ = "image.webp" ຄວບຄຸມ> ຕິດຕາມປະເພດ = "ຫົວຂໍ້" src = "captions.vtt"> ຖອຍຫຼັງເນື້ອຫາ ສຳ ລັບໂປແກຼມທ່ອງເວັບເກົ່າ ./video>

ຕົວຢ່າງນີ້ໃຊ້ຮູບແບບ Web Video Tracks (Web VTT) ເພື່ອສະ ໜອງ ຮູບແບບ ຄຳ ບັນຍາຍ ແຟ້ມ. ເວບໄຊທ໌ VTT ຊ່ວຍໃຫ້ທ່ານສາມາດວາງແຜນເວລາໃນການຂຽນເນື້ອໃນຂອງຂໍ້ຄວາມ (ຂຽນຈາກການສົນທະນາແບບສຽງເດີມ). Tom Leadbetter ສຳ ຫຼວດ Web VTT ໃນລາຍລະອຽດເພີ່ມເຕີມໃນເວບໄຊທ໌ HTML5 Doctor.

ວິດີໂອ> ອົງປະກອບແມ່ນສະຫນັບສະຫນູນໃນທຸກໆຕົວທ່ອງເວັບປັດຈຸບັນ. ໜ້າ ເສົ້າ, ສະ ໜັບ ສະ ໜູນ ສຳ ລັບຄອບຄົວ ຕິດຕາມ> ອົງປະກອບແລະ Web VTT ຊ້າກ່ວາຫລັງ. ຜູ້ຂາຍຕົວທ່ອງເວັບ ກຳ ລັງເຮັດວຽກຢູ່ທັງສອງ, ສະນັ້ນມັນຈະບໍ່ດົນຈົນກວ່າພວກເຮົາຈະເຂົ້າໃກ້ວິດີໂອ HTML5 ທີ່ລວມເຂົ້າກັນແທ້ໆ.


ພວກເຮົາແນະນໍາໃຫ້ທ່ານ
ຕົວອັກສອນໂຕເນີ້ງທີ່ດີທີ່ສຸດໃນປີ 2020
ຍິ່ງໄປກວ່ານັ້ນ

ຕົວອັກສອນໂຕເນີ້ງທີ່ດີທີ່ສຸດໃນປີ 2020

ຖ້າທ່ານຕ້ອງການເນັ້ນ ໜັກ ໃສ່ ຄຳ ສັບຂອງທ່ານ, ຕົວອັກສອນທີ່ຂຽນໂຕເນີ້ງທີ່ດີທີ່ສຸດແມ່ນທາງອອກທີ່ສົມບູນແບບ. ການເອົາຊື່ຂອງພວກເຂົາມາຈາກຮູບແບບຕົວອັກສອນ calligraphic ຂອງອິຕາລີ, ຕົວອັກສອນທີ່ມີລັກສະນະເປັນແບບບູຮານແມ...
ສ້າງຮູບແບບແລະການຈັດວາງ CSS ແບບສະເພາະ
ຍິ່ງໄປກວ່ານັ້ນ

ສ້າງຮູບແບບແລະການຈັດວາງ CSS ແບບສະເພາະ

ໃນບົດແນະ ນຳ ນີ້ພວກເຮົາຈະພິຈາລະນາວິທີການຕ່າງໆໃນການປ່ຽນຮູບແບບ C ຂອງອົງປະກອບ, ພ້ອມທັງເບິ່ງຄືວ່າຈະແຕ່ງແບບພໍ່ແມ່ຂອງພວກເຂົາ, ຂື້ນກັບ ຈຳ ນວນຂອງອົງປະກອບ. ພວກເຮົາຍັງຈະໄດ້ເຫັນວິທີການປ່ຽນຮູບແບບຂອງອົງປະກອບໂດຍອີງໃ...
ຊື່ການອອກແບບ ຕຳ ແໜ່ງ ວຽກ ໝາຍ ຄວາມວ່າແນວໃດແທ້
ຍິ່ງໄປກວ່ານັ້ນ

ຊື່ການອອກແບບ ຕຳ ແໜ່ງ ວຽກ ໝາຍ ຄວາມວ່າແນວໃດແທ້

ຕຳ ແໜ່ງ ວຽກສາມາດເປັນວິທີທີ່ສັບສົນໃນການ ນຳ ທາງດ້ານການຈ້າງງານ. ຕົວຢ່າງ, ສິ່ງທີ່ນາຍຈ້າງບາງຄົນອາດ ໝາຍ ເຖິງຜູ້ພັດທະນາດ້ານ ໜ້າ, ຄົນອື່ນຈະເອີ້ນນັກອອກແບບເວັບ.ແຕ່ໃນຂະນະທີ່ບໍ່ມີກົດລະບຽບທີ່ຍາກແລະໄວກ່ຽວກັບສິ່ງທີ່...