ແຈກຢາຍວິດີໂອໃຫ້ກັບໂທລະສັບມືຖືແລະອຸປະກອນມືຖື

ເນື້ອຫາ

• HTML5 ແມ່ນຫຍັງ?
• ວິດີໂອ HTML5 ແມ່ນຫຍັງ?
• ພາຊະນະ
• MPEG-4
• ໂອ່
• WebM
• Flash Video
• ຕົວແປງສັນຍານ: ວິດີໂອ
• H.264
• Theora
• VP8
• VP6
• ຕົວແປງສັນຍານ: ສຽງ
• AAC
• Vorbis
• MP3
• ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບບັນຈຸ / Codec
• ການປັບປຸງເຄື່ອງ ໝາຍ HTML5
• ບັນຫາທີ່ອາດເກີດຂື້ນ
• ການເຊື່ອມໂຍງ Flash Video
• ຕົກລົງກັບ Flash
• ກັບມາໃຊ້ HTML5
• ມີຫຍັງຕໍ່ໄປ?

ດ້ວຍການແນະ ນຳ HTML5, ນັກພັດທະນາໄດ້ຮັບເຄື່ອງມື ໃໝ່ ສຳ ລັບການຖ່າຍທອດວິດີໂອໃຫ້ກັບຜູ້ຊົມຂອງພວກເຂົາ. ຄຽງຄູ່ກັບເຄື່ອງຫຼີ້ນ juggernaut Flash Player - ຕິດຕັ້ງໃນຄອມພີວເຕີ້ສ່ວນບຸກຄົນທີ່ໃຊ້ອິນເຕີເນັດທີ່ໃຊ້ງານໄດ້ 99 ເປີເຊັນ - HTML5 ແມ່ນກຽມທີ່ຈະເປັນຜູ້ຫຼິ້ນໃຫຍ່ໃນໂລກວິດີໂອ.

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

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

HTML5 ແມ່ນຫຍັງ?

ສິ່ງ ທຳ ອິດທີ່ຕ້ອງເວົ້າແທ້ໆແມ່ນ HTML5 ບໍ່ແມ່ນມາດຕະຖານ. ມັນຍັງຢູ່ໃນສະພາບຄ່ອງແລະນັ້ນສາມາດມີຜົນກະທົບອັນໃຫຍ່ຫຼວງຕໍ່ຜູ້ທີ່ລ້ຽງດູກ່ອນໄວຮຽນ. ຮ່າງເອກະສານສະເພາະຂອງ HTML5 ໄດ້ເລີ່ມຕົ້ນໃນປີ 2004 ໂດຍ Web Hypertext Application Technology Working Group (WHATWG), ເຊິ່ງເປັນກຸ່ມເກັບ ກຳ ຂໍ້ມູນຂອງເຄື່ອງຫຼີ້ນອຸດສາຫະ ກຳ ທີ່ກໍ່ຕັ້ງໂດຍບຸກຄົນຂອງ Apple, Mozilla Foundation, ແລະ Opera Software. The Wide Web Consortium (W3C) ຫຼັງຈາກນັ້ນໄດ້ຮັບຮອງເອົາມັນເປັນຮ່າງຮ່າງການເຮັດວຽກໃນປີ 2007. The Last Call's Call (ຊອກຫາເພື່ອນທົບທວນແລະການທົບທວນຄືນສາທາລະນະກ່ຽວກັບຂໍ້ ກຳ ນົດດັ່ງກ່າວໃນຮູບແບບໃກ້ຈະເຖິງ) ໄດ້ອອກໃນເດືອນພຶດສະພາປີ 2011 ແຕ່ວ່າ, ເຖິງແມ່ນວ່າບໍ່ມີຄຸນລັກສະນະ ໃໝ່ ໃຫຍ່ໆໃດໆ. ຄາດວ່າ, ມັນບໍ່ແມ່ນແຕ່ຄຸນສົມບັດຄົບຖ້ວນ. ຜູ້ຊ່ຽວຊານບໍ່ໄດ້ຄາດຫວັງວ່າຂໍ້ ກຳ ນົດນີ້ຈະຖືກຮັບຮອງໂດຍ W3C ຈົນກວ່າທຸກບ່ອນໃນປີ 2014 ເຖິງປີ 2022, ຂື້ນກັບວ່າທ່ານຈະໄດ້ຮັບການຄາດເດົາວ່າທ່ານຈະຟັງຄືກັນແລະເມື່ອໃດ.

ຂໍ້ເທັດຈິງທີ່ມ່ວນ: ເຖິງວ່າປະຈຸບັນ W3C ຍັງໃຊ້ HTML5 ເປັນເຄື່ອງ ໝາຍ ຂອງ spec, ແຕ່ WHWG - ຖືວ່າຫຼາຍຄົນເປັນ ກຳ ລັງຫຼັກທີ່ຢູ່ເບື້ອງຫຼັງວິວັດທະນາການຂອງ HTML - ໄດ້ຫຼຸດລົງ ຈຳ ນວນຈາກຄວາມພະຍາຍາມໃນອະນາຄົດ. ມັນວາງແຜນທີ່ຈະຕິດກັບ“ HTML” ແລະຖືວ່າມັນເປັນ“ ມາດຕະຖານການ ດຳ ລົງຊີວິດ.”

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

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

ວິດີໂອ HTML5 ແມ່ນຫຍັງ?

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

video src = "vid.mp4" width = "320" height = "240" ຄວບຄຸມ> / ວິດີໂອ>

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

ໜຶ່ງ ໃນບັນດາສິ່ງທ້າທາຍທີ່ໃຫຍ່ທີ່ສຸດທີ່ນັກພັດທະນາ HTML5 ກຳ ລັງປະເຊີນຢູ່ແມ່ນວ່າການ ກຳ ນົດຮ່າງ HTML5 ໃນປະຈຸບັນບໍ່ໄດ້ແນະ ນຳ ຕົວທ່ອງເວັບຮູບແບບວິດີໂອໃດໆທີ່ຄວນສະ ໜັບ ສະ ໜູນ. ທີມງານທີ່ຢູ່ເບື້ອງຫຼັງຂອງໂປແກຼມ browser ແຕ່ລະຄົນແມ່ນປະໄວ້ເພື່ອ ກຳ ນົດຮູບແບບວິດີໂອໃດທີ່ ເໝາະ ສົມກັບ ໜ້າ ວຽກ. ນີ້ໄດ້ສົ່ງຜົນໃຫ້ການຈັດຕັ້ງປະຕິບັດຄຸນລັກສະນະວິດີໂອທີ່ແຕກຕ່າງກັນແລະກໍ່ໃຫ້ເກີດອຸປະສັກທີ່ ສຳ ຄັນທີ່ຜູ້ສ້າງເນື້ອຫາຕ້ອງເອົາຊະນະ. ໃນຄວາມເປັນຈິງ, ເພື່ອສະ ໜັບ ສະ ໜູນ ການຈັດສົ່ງວິດີໂອ HTML5 ໃນທຸກໆໂປແກຼມທ່ອງເວັບທີ່ໃຊ້ກັນຢ່າງກວ້າງຂວາງ, ນັກພັດທະນາກໍ່ຕ້ອງສ້າງສາມເອກະສານແຍກຕ່າງຫາກ ສຳ ລັບແຕ່ລະວິດີໂອ, ຫລືອີງໃສ່ໂຊລູຊັ່ນເຊີຟເວີທີ່ສົ່ງຕໍ່ (ປ່ຽນຈາກຮູບແບບ ໜຶ່ງ ຫາອີກຮູບ ໜຶ່ງ) ໃນການບິນ.

ພາຊະນະ

ສຳ ລັບບົດຂຽນນີ້, ພວກເຮົາຈະ ກຳ ນົດການສົນທະນາຂອງພວກເຮົາໃຫ້ກັບ HTML5- ແລະພາຊະນະທີ່ເຂົ້າກັນໄດ້ກັບ Flash ແລະສ່ວນໃຫຍ່, ສ່ວນວີດີໂອແລະສ່ວນສຽງໃນນັ້ນ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ເຄື່ອງຫໍ່ເຫຼົ່ານີ້ຍັງສາມາດສະ ໜັບ ສະ ໜູນ ຄຸນລັກສະນະເພີ່ມເຕີມເຊັ່ນ: ຄຳ ບັນຍາຍ, ຂໍ້ມູນບົດ, ແລະຂໍ້ມູນເມຕາ, ພ້ອມທັງວິທີການປະເພດຂໍ້ມູນທັງ ໝົດ ນີ້ຖືກປະສານກັນ. ໃນບາງກໍລະນີ, ຕູ້ຄອນເທນເນີສະ ໜັບ ສະ ໜູນ ທາງເລືອກຕື່ມອີກເຊັ່ນ: ການຄຸ້ມຄອງສິດທິດິຈິຕອນ (DRM), ຕົວເລືອກການສະແດງຜົນແບບ 3D ແບບພື້ນຖານແລະການສະ ໜັບ ສະ ໜູນ ການສະແດງແບບຮາດແວ

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

MPEG-4

MPEG-4 (ທີ່ຖືກຕ້ອງກວ່າ MPEG-4, ພາກ 14) ແມ່ນບັນຈຸສິນຄ້າທີ່ເປັນເຈົ້າຂອງຄວບຄຸມໂດຍກຸ່ມຊ່ຽວຊານການເຄື່ອນຍ້າຍຮູບ. ການ ນຳ ໃຊ້ການຂະຫຍາຍເອກະສານທີ່ຄຸ້ນເຄີຍ ເອີຍ (ເຖິງແມ່ນວ່າ .m4v ບາງຄັ້ງກໍ່ໃຊ້ເຊັ່ນກັນ), ຕູ້ຄອນເທັນເນີ MPEG-4 ແມ່ນເປັນທີ່ຍອມຮັບທີ່ສຸດ. ມັນມີຮາກຂອງມັນຢູ່ໃນພາຊະນະ QuickTime ຂອງ Apple (ເຊິ່ງໃຊ້ເປັນປົກກະຕິແລ້ວ .mov ການຂະຫຍາຍ) ແລະປະຈຸບັນແມ່ນທາງເລືອກທົ່ວໄປທີ່ສຸດ ສຳ ລັບ desktop ແລະອຸປະກອນມືຖື ສຳ ລັບການຫຼິ້ນວິດີໂອ. ຍົກຕົວຢ່າງ, ຖັງທີ່ໃຊ້ໂດຍລະບົບເອເລັກໂຕຣນິກ iTunes Mac / Windows / iPhone / iPad / iTouch. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຍ້ອນບັນຫາສິດທິບັດແລະການອອກໃບອະນຸຍາດ, ນີ້ມີການປ່ຽນແປງຊ້າໆແລະການລິເລີ່ມ HTML5 ກຳ ລັງເລັ່ງການປ່ຽນແປງນັ້ນ. ໃນຖານະເປັນພາຊະນະ, MPEG-4 ແມ່ນຫນ້າສັງເກດເພາະວ່າມັນສະ ໜັບ ສະ ໜູນ ການຄຸ້ມຄອງສິດທິດິຈິຕອນ - ຄຸນລັກສະນະທີ່ ສຳ ຄັນ ສຳ ລັບຜູ້ສ້າງເນື້ອຫາບາງອັນ, ແລະຍັງເປັນທີ່ດຶງດູດໃຈເພາະວ່າ ການເລັ່ງຮາດແວ (ອີງໃສ່ຊິບ, ຫຼືການຊ່ວຍເຫຼືອ, ການເຂົ້າລະຫັດແລະ / ຫຼືການຖອດລະຫັດໃນເວລາແລ່ນ) ແມ່ນມີຢູ່ ສຳ ລັບຮູບແບບ. ນອກ ເໜືອ ຈາກການລວມເຂົ້າໃນ HTML5 spec, Flash Player ຍັງສະ ໜັບ ສະ ໜູນ MPEG-4 container.

ໂອ່

Ogg ແມ່ນຮູບແບບພາຊະນະທີ່ເປີດແລະບໍ່ເສຍຄ່າ, ຮັກສາໂດຍ Xiph.Org Foundation. ເຖິງແມ່ນວ່າມູນນິທິ Xiph.Org ແນະ ນຳ ໃຫ້ ນຳ ໃຊ້ .ogv ການຂະຫຍາຍເອກະສານ, ມັນເປັນເລື່ອງ ທຳ ມະດາທີ່ຈະເຫັນໄຟລ໌ວີດີໂອ Ogg ກັບ .ogg ການຂະຫຍາຍ. Ogg ແມ່ນມີຢູ່ໃນ Linux OS, ແລະໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ໃນລະບົບປະຕິບັດການ Mac ແລະ Windows ໂດຍອົງປະກອບ QuickTime. Windows OS ຍັງສາມາດໃຊ້ການຂະຫຍາຍ Windows Media Player ຫລືຕົວກອງ DirectShow ເພື່ອສະແດງເນື້ອຫາ Ogg.

WebM

ບໍ່ດົນມານີ້, Google ໄດ້ ນຳ ສະ ເໜີ ພາຊະນະ WebM ເປັນພາຫະນະໃຫ້ເນື້ອຫາທີ່ບໍ່ເສຍຄ່າ, ເປີດວິດີໂອແລະສຽງ. ມັນໃຊ້ .webm ການຂະຫຍາຍເອກະສານແລະອີງໃສ່ພາຊະນະ Matroska.

ການເລັ່ງຮາດແວສາມາດໃຊ້ໄດ້ ສຳ ລັບເອກະສານ WebM ແລະ Adobe ປະກາດວ່າ Flash Player ລຸ້ນຕໍ່ໄປຈະຮອງຮັບ WebM container.

Flash Video

ເຄື່ອງບັນຈຸ Flash Video ເຮັດໃຫ້ໃຊ້ສອງຕູ້ເກັບມ້ຽນ. FLV ແມ່ນຮູບແບບເກົ່າແລະເປັນເຈົ້າຂອງເຊິ່ງສະ ໜັບ ສະ ໜູນ Flash Player ລຸ້ນທີ່ຈະກັບສູ່ລຸ້ນ 7, ນຳ ສະ ເໜີ ໃນປີ 2003. Flash Player ຮຸ່ນ 9 update 3 ແນະ ນຳ ການສະ ໜັບ ສະ ໜູນ ຮູບແບບ F4V, ເຊິ່ງອີງໃສ່ MPEG-4. (ທີ່ກ່າວມາກ່ອນ ໜ້າ ນີ້, ຕູ້ຄອນເທັນເນີ MPEG-4 ທີ່ຖືກຕ້ອງແມ່ນໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຈາກ Flash Player, ເມື່ອ ນຳ ໃຊ້ການປັບປຸງລຸ້ນ 9 ແລະ 3 ຕໍ່ມາ.)

Flash Player ບໍ່ໄດ້ອີງໃສ່ການຂະຫຍາຍເອກະສານເພື່ອຫລິ້ນໄຟລ໌ວິດີໂອທີ່ເຂົ້າກັນໄດ້, ແຕ່ສ່ວນຂະຫຍາຍທີ່ໃຊ້ທົ່ວໄປ ສຳ ລັບແຕ່ລະຕູ້ຄອນເທນເນີແມ່ນ .flv ແລະ .f4v, ຕາມ ລຳ ດັບ. (ຮູບແບບ F4V ຍັງປະກອບມີ .f4p ການຂະຫຍາຍ ສຳ ລັບວິດີໂອປ້ອງກັນ.) Flash Player 10.2 ແລະຕໍ່ມາຮອງຮັບການເລັ່ງ ສຳ ລັບຮາດແວ ສຳ ລັບ Flash Video.

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

ຕົວແປງສັນຍານ: ວິດີໂອ

ຕົວແປງສັນຍານແມ່ນສູດການຄິດໄລ່ທີ່ໃຊ້ ສຳ ລັບການເຂົ້າລະຫັດຊັບສິນໃນເວລາຂຽນແລະການຖອດລະຫັດມັນ ສຳ ລັບການຫຼີ້ນຄືນໃນເວລາແລ່ນ. (ຄຳ ສັບລະຫັດແມ່ນ portmanteau ທີ່ມາຈາກ“ coder” /“ decoder.”) ຜູ້ຜະລິດຊອບແວແລະອຸປະກອນຮາດແວ (ເຊັ່ນວ່າບໍລິສັດທີ່ຢູ່ເບື້ອງຫລັງ browser ແລະອຸປະກອນມືຖື) ຕ້ອງຕັດສິນໃຈວ່າຕູ້ຄອນເທນເນີແລະລະຫັດໃດທີ່ຮອງຮັບກັບເຕັກໂນໂລຢີເຊັ່ນ HTML5 ແລະ Flash Video. ປັດໃຈຕ່າງໆເຊັ່ນ: ຄຸນນະພາບ, ຂະ ໜາດ ໄຟລ໌, ແບນວິດແລະບັນຫາທີ່ຄ້າຍຄືກັນລ້ວນແຕ່ເປັນສ່ວນ ໜຶ່ງ ໃນການຕັດສິນໃຈນີ້.

ໜຶ່ງ ໃນປັດໃຈດັ່ງກ່າວທີ່ໃຫຍ່ທີ່ສຸດແມ່ນຜົນກະທົບຂອງສິດທິບັດແລະຄ່າໃຊ້ຈ່າຍໃນການອອກໃບອະນຸຍາດ, ແລະການຊຸກຍູ້ໃຫ້ມີການເປີດລະຫັດຟຣີແລະເປີດກວ້າງແມ່ນເຫດຜົນຫຼາຍຢ່າງ ສຳ ລັບການແບ່ງປັນຮູບແບບວິດີໂອທີ່ປະຈຸບັນ ກຳ ລັງປະເຊີນໂດຍນັກພັດທະນາວິດີໂອ. ມີຕົວແປງສັນຍານຫຼາຍຢ່າງແຕ່ ສຳ ລັບການສົນທະນານີ້, ພວກເຮົາຈະສຸມໃສ່ 4 ຕົວລະຫັດຫລັກ ສຳ ລັບການສົ່ງ HTML5 ແລະ Flash. ອັນດັບ ທຳ ອິດແມ່ນຕົວແປງສັນຍານວິດີໂອ: H.264, Theora, VP8, ແລະ VP6. H.264 ແລະ VP6 ແມ່ນສິດທິບັດທີ່ ຈຳ ກັດແລະເກັບຄ່າ ທຳ ນຽມໃນການອອກໃບອະນຸຍາດ, ໃນຂະນະທີ່ Theora ແລະ VP8 ແມ່ນບໍ່ເສຍຄ່າແລະບໍ່ໄດ້ຮັບການອະນຸຍາດຈາກສິດທິບັດຫຼືຖືກຮັກສາໄວ້ພາຍໃຕ້ສິດທີ່ບໍ່ບັງຄັບໃຊ້ສິດທິບັດເຫຼົ່ານີ້.

H.264

ອ້າງອີງເຖິງເຊັ່ນກັນ MPEG-4 ພາກທີ 10 ຫຼືລະຫັດວິດີໂອແບບພິເສດ (AVC), H.264 ຖືກພັດທະນາໂດຍ MPEG ແລະກາຍເປັນມາດຕະຖານໃນປີ 2003. ມັນເປັນລະຫັດທີ່ມີຄຸນນະພາບສູງທີ່ຖືກປັບໃຫ້ ເໝາະ ສົມ ສຳ ລັບລະດັບຕໍ່າ ແລະ ອຸປະກອນແບນວິດສູງ / CPU, ຕັ້ງແຕ່ໂທລະສັບຈົນເຖິງເຄື່ອງຫຼີ້ນ Blu-ray. ຂໍ້ມູນສະເພາະຂອງມັນປະກອບມີ "ໂປຼໄຟລ໌," ຕັ້ງແຕ່ ພື້ນຖານ ເຖິງ ສູງ, ນັ້ນ ກຳ ນົດຄຸນລັກສະນະທີ່ມີຄຸນນະພາບແລະຄຸນນະສົມບັດທີ່ແຕກຕ່າງກັນ. ມັນຍັງປະກອບດ້ວຍໂປຼໄຟລ໌ທີ່ສາມາດປັບຂະ ໜາດ ໄດ້ເຊິ່ງຊ່ວຍໃຫ້ເອກະສານດຽວສາມາດປັບຄຸນນະພາບໄດ້ໂດຍອີງໃສ່ຄວາມສາມາດໃນການຫຼີ້ນ. ມັນໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຜ່ານທັງການເລັ່ງຊອບແວແລະຮາດແວແລະຖືກ ນຳ ໃຊ້ຢ່າງກວ້າງຂວາງໃນທຸກສິ່ງທຸກຢ່າງຕັ້ງແຕ່ອຸປະກອນມືຖືຈົນເຖິງວິດີໂອນິຍາມສູງໃນການອອກອາກາດ, ດີວີດີແລະສະພາບແວດລ້ອມທີ່ຄ້າຍຄືກັນ. H.264 ແມ່ນສ່ວນ ໜຶ່ງ ຂອງພາຊະນະ MPEG-4, ແລະຍັງຖືກ ນຳ ໃຊ້ຢ່າງກວ້າງຂວາງໃນ Flash Video, ທັງທາງກົງຫຼືສ່ວນ ໜຶ່ງ ຂອງພາຊະນະ F4V.

Theora

Theora ແມ່ນຕົວໂຄ້ດວິດີໂອແບບເປີດແລະບໍ່ເສຍຄ່າ. ໃນຂະນະທີ່ບັນຈຸອື່ນໆສາມາດ ນຳ ໃຊ້ Theora ເປັນຕົວແປງສັນຍານວິດີໂອ, ມັນມັກຈະກ່ຽວຂ້ອງກັບຮູບແບບ Ogg. On2 Technologies ໃນເບື້ອງຕົ້ນໄດ້ພັດທະນາສິ່ງທີ່ຈະກາຍເປັນ Theora, ຄື VP3. Theora ໄດ້ມາຈາກ VP3 ຫຼັງຈາກ On2 ປ່ອຍ VP3 ເຂົ້າໃນສາທາລະນະ. ມູນນິທິ Xiph.Org ດຽວນີ້ຮັກສາລະຫັດ. ມັນຮຽກຮ້ອງໃຫ້ມີຂໍ້ຕົກລົງກ່ຽວກັບການອອກໃບອະນຸຍາດແລະຖືກຍົກເວັ້ນໂດຍສິດທິບັດທີ່ຮູ້ຈັກນອກ ເໜືອ ຈາກສິດທິບັດຕົ້ນສະບັບ VP3, ເຊິ່ງໄດ້ຮັບການອະນຸຍາດໂດຍບໍ່ມີສິດຕາມກົດ ໝາຍ. Theora ແມ່ນມີຢູ່ໃນ Linux, ແລະໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ໃນລະບົບປະຕິບັດການ Mac ແລະ Windows ຜ່ານລະບົບເຂົ້າລະຫັດ / ຖອດລະຫັດແຫຼ່ງເປີດ.

VP8

ພັດທະນາໂດຍ On2 Technologies, VP8 ແມ່ນເປັນທີ່ຮູ້ຈັກ ສຳ ລັບຄຸນນະພາບຄ້າຍຄືກັບໂປຣແກຣມ H.264 ສູງ, ແຕ່ມີຄວາມສັບສົນໃນການຖອດລະຫັດຕ່ ຳ ຄ້າຍຄືກັບໂປຣແກຣມ H.264 Baseline. ກູໂກໄດ້ຊື້ VP8 ຈາກ On2 ກາຍເປັນ codec ວິດີໂອຂອງບັນຈຸ WebM ຂອງມັນ. ກູໂກໄດ້ໃຫ້ ຄຳ ສັນຍາທີ່ບໍ່ສາມາດແກ້ໄຂໄດ້ວ່າຈະບໍ່ບັງຄັບໃຊ້ສິດທິບັດທີ່ກ່ຽວຂ້ອງ, ເຮັດໃຫ້ VP8 ບໍ່ມີຄວາມ ຈຳ ເປັນ, ເຮັດໃຫ້ມັນເປັນທາງເລືອກທີ່ ໜ້າ ສົນໃຈຂອງ H.264. ໂດຍປົກກະຕິແລ້ວມັນໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຈາກການເຂົ້າລະຫັດແລະການຖອດລະຫັດຊອບແວ, ແຕ່ການເລັ່ງຮາດແວແມ່ນ ກຳ ລັງໃຊ້ແລະເຕີບໃຫຍ່ຢູ່.

VP6

VP6 ແມ່ນຕົວແປງສັນຍານທີ່ໃຊ້ຫຼາຍທີ່ສຸດໃນຮູບແບບວິດີໂອ FLV Flash. ມັນເປັນລະຫັດທີ່ມີຄຸນນະພາບສູງທີ່ສົມເຫດສົມຜົນເຊິ່ງປະກອບມີຄຸນລັກສະນະທີ່ ໜ້າ ສົນໃຈເຊັ່ນວ່າຊ່ອງທາງການສະ ໜັບ ສະ ໜູນ alpha.

ປະກອບສ່ວນໃຫ້ກັບຫົວຂໍ້ແລ່ນທີ່ ໜ້າ ປະທັບໃຈໃນບົດຂຽນນີ້, On2 Technologies ກໍ່ໄດ້ພັດທະນາ VP6. ອະນຸຍາດໃຫ້ໃຊ້ກັບ Macromedia (ແລະຫຼັງຈາກນັ້ນ Adobe), VP6 ແມ່ນຖືກ ຈຳ ກັດໂດຍບັນຫາສິດທິບັດແລະໃບອະນຸຍາດ. ນີ້, ແລະຄວາມຈິງທີ່ວ່າ Flash Player ແມ່ນ ຈຳ ເປັນ ສຳ ລັບການຫລີ້ນ, ເຮັດໃຫ້ຮູບແບບວິດີໂອຟິລິບ FLV ເປັນການແກ້ໄຂໄລຍະຍາວທີ່ ໜ້າ ສົນໃຈ ສຳ ລັບນັກພັດທະນາຫຼາຍຄົນ, ແຕ່ຍັງໃຊ້ບໍລິການຕາມຄວາມຕ້ອງການຂອງກໍລະນີ - ໂດຍສະເພາະເມື່ອເວົ້າເຖິງການໃຊ້ alpha ຊ່ອງທາງ.

ຕົວແປງສັນຍານ: ສຽງ

ເຊັ່ນດຽວກັນກັບວິດີໂອ, ມີຕົວແປງສັນຍານສຽງຫຼາຍ, ແຕ່ໃນທີ່ນີ້ພວກເຮົາຈະສຸມໃສ່ AAC, Vorbis, ແລະ MP3, ຍ້ອນວ່າມັນຖືກ ນຳ ໃຊ້ຫຼາຍທີ່ສຸດກັບຊັບສິນວິດີໂອ HTML5 ແລະ Flash

AAC

Advanced Audio Coding (AAC) ໄດ້ຮັບການອອກແບບເປັນຜູ້ສືບທອດຄວາມເປັນໄປໄດ້ຂອງຮູບແບບ MP3. ມັນເປັນທີ່ຮູ້ກັນວ່າມີຄຸນນະພາບດີກ່ວາ MP3 ແຕ່ວ່າໃນອັດຕາດຽວກັນ. ມັນຍັງເປັນໄປໄດ້ທີ່ຈະເຂົ້າລະຫັດເອກະສານ AAC ໂດຍໃຊ້ອັດຕາສ່ວນໃດໆ, ໃນຂະນະທີ່ການເຂົ້າລະຫັດ MP3 ຮຽກຮ້ອງໃຫ້ ໜຶ່ງ ໃນອັດຕາບິດທີ່ຖືກ ກຳ ນົດໄວ້ຫຼາຍໆຄັ້ງ. AAC ແມ່ນຕົວລະຫັດ ໜຶ່ງ ທີ່ໃຊ້ໃນພາຊະນະ MPEG-4, ແລະຕົວແປງສັນຍານສຽງທີ່ໃຊ້ຫຼາຍທີ່ສຸດ ສຳ ລັບພາຊະນະນີ້ເພື່ອຄວາມເຂົ້າກັນໄດ້ຂອງ HTML5. ຮູບແບບດັ່ງກ່າວສະ ໜັບ ສະ ໜູນ ການຄຸ້ມຄອງສິດທິດິຈິຕອລ, ແຕ່ມີການຈົດບັນຫາກ່ຽວກັບສິດທິບັດແລະໃບອະນຸຍາດ. ໂດຍປົກກະຕິແລ້ວມັນຖືກຖອດລະຫັດກັບຊອບແວ, ແຕ່ວ່າມີການປະຕິບັດການຖອດລະຫັດຮາດແວ.

Vorbis

Vorbis ສ່ວນຫຼາຍແມ່ນກ່ຽວຂ້ອງກັບພາຊະນະ Ogg, ແຕ່ສາມາດໃຊ້ເປັນ MP4, WebM, ແລະຮູບແບບອື່ນໆ. ມັນເປັນລະຫັດເປີດທີ່ບໍ່ເສຍຄ່າພຽງແຕ່ ໜຶ່ງ ດຽວໃນບັນດາເຄື່ອງທີ່ຖືກ ນຳ ໃຊ້ຢ່າງກວ້າງຂວາງໃນ Flash ແລະ HTML5, ແລະຖືກຈົດທະບຽນໂດຍສິດທິບັດ. ໃນຄວາມເປັນຈິງ, ການພັດທະນາກ່ຽວກັບ Vorbis ໄດ້ຖືກເລີ່ມຕົ້ນເມື່ອຄ່າໃບອະນຸຍາດຖືກປະກາດ ສຳ ລັບຮູບແບບ MP3. ມັນເປັນທີ່ຮູ້ກັນດີວ່າມີຄຸນນະພາບສຽງທີ່ທຽບເທົ່າຫລືດີກວ່າ MP3 ຫຼື AAC ແຕ່ມີຂະ ໜາດ ເອກະສານນ້ອຍກວ່າແລະເປັນທີ່ນິຍົມໃນອຸດສາຫະ ກຳ ເກມ. ຮູບແບບແມ່ນມີຢູ່ໃນ Linux ແລະ Android, ແລະໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ໃນລະບົບປະຕິບັດການ Mac ແລະ Windows ຜ່ານລະບົບປະຕິບັດການ QuickTime ແລະຕົວກອງ DirectShow, ພ້ອມທັງເຄື່ອງຫຼີ້ນຊອບແວທີ່ອຸທິດຕົນ.

MP3

ທ່ານຮູ້ບໍ່ວ່າ MP3 ແມ່ນຫຍັງ? ມັນໄດ້ມາດຕະຖານຫຼາຍ ສຳ ລັບອຸປະກອນສຽງດິຈິຕອນແບບພະກະພາແລະຍັງຖືກ ນຳ ໃຊ້ໂດຍຮູບແບບຟາຍວິດີໂອ Flash Flash. ມັນຖືກຈົດສິດທິບັດ, ຮຽກຮ້ອງຄ່າ ທຳ ນຽມການອອກໃບອະນຸຍາດ, ແລະຕ້ອງຖືກລະຫັດໃນ ໜຶ່ງ ໃນ ຈຳ ນວນຫລາຍບິດທີ່ ກຳ ນົດໄວ້ກ່ອນ.

ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບບັນຈຸ / Codec

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

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

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

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

ແລະສຸດທ້າຍ, ບໍ່ມີຮູບແບບໃດໆທີ່ຖືກຮອງຮັບໂດຍໂປແກຼມທ່ອງເວັບທັງ ໝົດ. ເມື່ອພົວພັນກັບໂປແກຼມທ່ອງເວັບທີ່ທັນສະ ໄໝ, ສາມາດເຂົ້າເຖິງຜູ້ໃຊ້ HTML5 ທັງ ໝົດ ດ້ວຍການລວມຕົວຂອງ MPEG-4 ແລະຊັບສິນ WebM. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຖ້າ (ເປັນຕົວຢ່າງ ໜຶ່ງ) ຜູ້ໃຊ້ມີ Firefox ເວີຊັ່ນ 3.6, ມີພຽງແຕ່ວິດີໂອ Ogg ເທົ່ານັ້ນທີ່ຈະພໍດີກັບໃບບິນ.

ຍິ່ງໄປກວ່ານັ້ນ, ຖ້າຜູ້ໃຊ້ບໍ່ໄດ້ອັບເກດເປັນ HTML5 ທີ່ ເໝາະ ສົມກັບໂປແກຼມທ່ອງເວັບທີ່ຕົນມັກ, ການໃຊ້ Flash Player ສຳ ລັບການຫຼີ້ນວີດີໂອແມ່ນອາດຈະເປັນທາງອອກທີ່ດີທີ່ສຸດ ສຳ ລັບຜູ້ໃຊ້ນັ້ນ. ດ້ວຍເຫດນັ້ນ, ພວກເຮົາຈົບລົງດ້ວຍສາມຫລືຫຼາຍກວ່ານັ້ນຂອງແຕ່ລະວິດີໂອເພື່ອບັນລຸຜູ້ຊົມທີ່ກວ້າງທີ່ສຸດ.

ແຕ່ຄວາມມ່ວນບໍ່ໄດ້ຢຸດຢູ່ທີ່ນັ້ນ. ນອກ ເໜືອ ຈາກການຕັດສິນໃຈດ້ານນະໂຍບາຍ, ເຊັ່ນວ່າ Google ຫຼຸດລົງການສະ ໜັບ ສະ ໜູນ H.264, ຂໍ້ບົກພ່ອງ, idiosyncrasies ແລະການຂາດຄວາມເປັນເອກະພາບໃນທົ່ວທຸກແພລະຕະຟອມ ໝາຍ ຄວາມວ່າເຖິງແມ່ນວ່າໂປຣແກຣມທ່ອງເວັບດຽວຫຼືລະບົບປະຕິບັດການກໍ່ບໍ່ເຄີຍຈັດການວິດີໂອແບບດຽວກັນຢູ່ສະ ເໝີ. ບາງບັນຫາເຫຼົ່ານີ້ຈະໄດ້ຮັບການປຶກສາຫາລືໃນພາຍຫລັງໃນບົດຄວາມນີ້, ແຕ່ໃນແງ່ມຸມ, ການສົ່ງວິດີໂອໃຫ້ຫລາຍໆເວທີຢ່າງປະສົບຜົນ ສຳ ເລັດຕ້ອງໃຊ້ເວລາໃນການວາງແຜນແລະວິທີແກ້ໄຂ. ເຊິ່ງ ນຳ ພາພວກເຮົາໄປເບິ່ງການປັບປຸງ HTML5 markup ທີ່ຖືກ ນຳ ສະ ເໜີ ໂດຍຫຍໍ້ກ່ອນ ໜ້າ ນີ້ໃນບົດຂຽນນີ້. ໂດຍການແນະ ນຳ ແຫລ່ງວີດີໂອ HTML5> ໂຄດເຂົ້າໃນການຜະສົມຜະສານ, ແລະຕິດຕາມເບິ່ງບັນຫາທີ່ອາດຈະເກີດຂື້ນ, ຄົນເຮົາສາມາດຈັດການກັບສ່ວນໃຫຍ່.

ການປັບປຸງເຄື່ອງ ໝາຍ HTML5

ເຄື່ອງ ໝາຍ ວິດີໂອ HTML5 ລຸ້ນ ທຳ ອິດທີ່ສົນທະນາກັນເບິ່ງຄືວ່າ:

video src = "vid.mp4" width = "320" height = "240" ຄວບຄຸມ> / ວິດີໂອ>

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

ເຖິງຢ່າງໃດກໍ່ຕາມ, ຖ້າທ່ານລຶບຄຸນລັກສະນະ src ແລະແທນທີ່ຈະເພີ່ມ HTML5 source> tags ດັ່ງທີ່ເຫັນຢູ່ຂ້າງລຸ່ມ, browser ຈະເລີ່ມຕົ້ນດ້ວຍແຫຼ່ງ ທຳ ອິດແລະຖ້າບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ, ຍ້າຍໄປທີ່ແຫຼ່ງຕໍ່ໄປ, ແລະອື່ນໆ.

ຄວາມກວ້າງຂອງວິດີໂອ = "320" ຄວາມສູງ = "240" ໂປດເຕີ = "vid.png" ຄວບຄຸມ> ແຫຼ່ງ src = "vid.webm" ປະເພດ = 'ວິດີໂອ / webm; codecs = "vp8, vorbis" '> ແຫລ່ງ src = "vid.mp4" type =' video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '> ແຫລ່ງ src = "vid.ogv" type =' video / ogg; codecs = "theora, vorbis" "> / ວິດີໂອ>

ເຄື່ອງ ໝາຍ ສະບັບລຸ້ນທີ່ສອງນີ້ແມ່ນງ່າຍດາຍຫຼາຍ. ມັນເລີ່ມຕົ້ນໂດຍການ ກຳ ນົດອົງປະກອບວິດີໂອ HTML5 ທີ່ມີຂະ ໜາດ 320 x 240 ພິກເຊວ, ເພີ່ມຄຸນລັກສະນະຂອງໂປສເຕີເພື່ອສະແດງຮູບພາບທີ່ຍັງຄົງຢູ່ຈົນກ່ວາວິດີໂອຫລິ້ນ (ຫຼື, ໃນບາງຕົວທ່ອງເວັບ, ຈົນກວ່າວິດີໂອຈະໂຫລດ), ແລະສະແດງການຄວບຄຸມການຫຼີ້ນພື້ນເມືອງທີ່ສະ ໜອງ ໂດຍ ຕົວທ່ອງເວັບ. ຖ້າຄຸນລັກສະນະສຸດທ້າຍຖືກຍົກເລີກ, ບໍ່ມີການຄວບຄຸມໃດໆສະແດງໃຫ້ຜູ້ພັດທະນາສາມາດສ້າງການຄວບຄຸມແບບພິເສດຂອງຕົນເອງໂດຍໃຊ້ JavaScript. ພວກເຮົາຈະພິຈາລະນາເບິ່ງຂະບວນການນັ້ນໃນຊຸດຕໍ່ໄປຂອງຊຸດນີ້.

ຄຸນລັກສະນະເພີ່ມເຕີມ ສຳ ລັບອົງປະກອບຂອງວິດີໂອປະກອບມີ:

• ໂຫລດ: ແນະ ນຳ ວ່າຊັບສິນວິດີໂອຄວນຈະຖືກໂຫລດລ່ວງ ໜ້າ ເທົ່າໃດ. ທາງເລືອກປະກອບມີ ບໍ່ມີ, metadata (ສຳ ລັບການດຶງເອົາສິ່ງຕ່າງໆເຊັ່ນ: ຂະ ໜາດ, ໄລຍະເວລາ, ກອບ ທຳ ອິດ, ແລະອື່ນໆ), ແລະ ລົດໃຫຍ່ (ເພື່ອອະນຸຍາດໃຫ້ໂປແກຼມທ່ອງເວັບໂຫຼດຊັບສິນຫຼາຍເທົ່າທີ່ໃຊ້ໄດ້ຈິງ)
• ຫຼິ້ນ​ອັດ​ຕະ​ໂນ​ມັດ: Boolean ທີ່ ກຳ ນົດວ່າວີດີໂອຫລິ້ນທັນທີເມື່ອໂຫລດ
• ສຽງ: ກຳ ນົດສະຖານະສຽງເບື້ອງຕົ້ນ (ປະຈຸບັນ, ເທົ່ານັ້ນ ປິດສຽງ ສະ ໜັບ ສະ ໜູນ)
• loop: a Boolean ທີ່ ກຳ ນົດວ່າວິດີໂອຈະກັບຄືນມາເລີ່ມຕົ້ນການຫລິ້ນອີກຄັ້ງຫຼັງຈາກຫຼີ້ນໄລຍະເວລາເຕັມທີ່ຂອງມັນ

ແທັກແຫຼ່ງ ທຳ ອິດໃນເຄື່ອງ ໝາຍ ຕົວຢ່າງລະບຸເອກະສານວິດີໂອ WebM. ຖ້າບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ, ເອກະສານ MPEG-4 ຈະຖືກ ນຳ ໃຊ້. ແລະ, ຖ້າ MPEG-4 ບໍ່ເຂົ້າກັນ, ໄຟລ໌ວິດີໂອ Ogg ຈະຖືກ ນຳ ໃຊ້. ໃນທຸກໆກໍລະນີ, ຄຸນລັກສະນະປະເພດລະບຸປະເພດພາຊະນະແລະລະຫັດທີ່ ຈຳ ເປັນ ສຳ ລັບການຫລີ້ນຄືນ.

ບັນຫາທີ່ອາດເກີດຂື້ນ

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

• ຫນ້າທໍາອິດແລະສໍາຄັນທີ່ສຸດ, ໃຫ້ແນ່ໃຈວ່າເຄື່ອງແມ່ຂ່າຍຂອງທ່ານສະຫນັບສະຫນູນປະເພດ mime ທີ່ຈໍາເປັນໃນການຫລິ້ນແຕ່ລະຮູບແບບວິດີໂອທີ່ທ່ານໃຊ້. ວິທີງ່າຍໆ ໜຶ່ງ ທີ່ຈະບັນລຸສິ່ງນີ້ແມ່ນການສ້າງ .htaccess ໄຟລ໌ໃນລະບົບດຽວກັບເອກະສານ HTML ຂອງທ່ານແລະໃຊ້ ຄຳ ສັ່ງ AddType ເພື່ອເພີ່ມປະເພດ mime ທີ່ ຈຳ ເປັນ:

ວິດີໂອ AddType / ogg .ogv AddType video / mp4 .mp4 AddType video / webm .webm

• iOS 3.x ບໍ່ມັກຄຸນລັກສະນະຂອງໂປສເຕີ. ຍົກເລີກມັນຈາກວິດີໂອ> ແທັກ
• ໃນ iPad iOS 3.x, ວິດີໂອຈະບໍ່ຫລິ້ນເວັ້ນເສຍແຕ່ວ່າແຫຼ່ງ mp4> ຖືກລະບຸໄວ້ກ່ອນ
• Android 2.3 ບໍ່ມັກຄຸນລັກສະນະຂອງປະເພດນີ້. ຍົກເລີກມັນຈາກແທັກແຫຼ່ງ MP4 (ສະຖານທີ່ດຽວທີ່ Android ຮອງຮັບໃນປະຈຸບັນ)

ສະນັ້ນ, ເພື່ອຫລີກລ້ຽງບັນຫາທີ່ຮູ້ຈັກກັບການຈັດສົ່ງ HTML5, ແລະເຂົ້າເຖິງ iOS ແລະ Android ລຸ້ນເກົ່າ, ໃຫ້ໃຊ້ເຄື່ອງ ໝາຍ HTML5 ລຸ້ນ 4 ນີ້ທີ່ພວກເຮົາໄດ້ພັດທະນາ. ໃຫ້ສັງເກດວ່າຄຸນລັກສະນະໂປສເຕີຂອງອົງປະກອບວິດີໂອໄດ້ຖືກໂຍກຍ້າຍອອກ, ແຫຼ່ງ MP4 ໄດ້ຖືກລະບຸໄວ້ກ່ອນ, ແລະຄຸນລັກສະນະປະເພດຂອງຄົນສຸດທ້າຍກໍ່ຖືກລຶບອອກ.

ຄວາມກວ້າງຂອງວິດີໂອ = "320" ຄວາມສູງ = "240" ຄວບຄຸມ> ແຫລ່ງ src = "vid.mp4"> ແຫລ່ງ src = "vid.webm" ປະເພດ = 'ວິດີໂອ / webm; codecs = "vp8, vorbis" '> ແຫລ່ງ src = "vid.ogv" type =' video / ogg; codecs = "theora, vorbis" "> / ວິດີໂອ>

ພວກເຮົາໄດ້ ສຳ ເລັດວຽກທີ່ ຈຳ ເປັນເພື່ອໃຫ້ຜູ້ຊົມ HMTL5 ກວ້າງຂວາງທີ່ສຸດເທົ່າທີ່ເປັນໄປໄດ້, ແຕ່ພວກເຮົາຄວນເຮັດຫຍັງກ່ຽວກັບໂປຣແກຣມທ່ອງເວັບທີ່ບໍ່ເຂົ້າກັນກັບ HTML5?

ການເຊື່ອມໂຍງ Flash Video

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

ເບິ່ງຢ່າງໄວວາ NetMarketShareສະຖິຕິຂອງໂປແກຼມທ່ອງເວັບຂອງ desktop ສະແດງວ່າໃກ້ເຂົ້າມາແລ້ວ 50 ເປີເຊັນຂອງໂປຣແກຣມທ່ອງເວັບທີ່ໃຊ້ໃນປະຈຸບັນບໍ່ແມ່ນ HMTL5 ທີ່ເຂົ້າກັນໄດ້. ສິ່ງນີ້ຈະສືບຕໍ່ປ່ຽນແປງຍ້ອນວ່າຜູ້ໃຊ້ຫຼາຍຄົນໄດ້ຍົກລະດັບໂປຣແກຣມທ່ອງເວັບຂອງພວກເຂົາ, ແລະຕະຫຼາດມືຖືຈະສືບຕໍ່ເຮັດໃຫ້ການສົ່ງວີດີໂອ HTML5 ມີຄວາມ ຈຳ ເປັນຫຼາຍຂື້ນ. ເຖິງຢ່າງໃດກໍ່ຕາມໃນມື້ນີ້, ການບໍ່ສົນໃຈ Flash Player ຢ່າງຫລີກລ້ຽງບໍ່ໄດ້ ໝາຍ ຄວາມວ່າຜູ້ຊົມນ້ອຍກວ່າ ສຳ ລັບເນື້ອຫາຂອງທ່ານ.

ໂຊກດີ, ທ່ານສາມາດລະຫັດ ໜ້າ ເວັບຂອງທ່ານເພື່ອຈັດສົ່ງເນື້ອຫາ Flash ເມື່ອຕ້ອງການ - ບໍ່ວ່າຈະເປັນການຖອຍຫຼັງຈາກ HTML5, ຫຼືເປັນທາງເລືອກ ທຳ ອິດ, ປ່ຽນເປັນ HTML5 ເມື່ອ ຈຳ ເປັນ.

ຕົກລົງກັບ Flash

ວິທີທີ່ງ່າຍທີ່ສຸດໃນການຈັດສົ່ງວິດີໂອໂດຍໃຊ້ທັງ HTML5 ແລະ Flash Player ແມ່ນເພື່ອໃຊ້ປະໂຫຍດຈາກວິທີການຂອງຕົວທ່ອງເວັບແຍກ HTML. ທ່ານອາດຈະຈື່ໄດ້ວ່າ, ເມື່ອ ນຳ ໃຊ້ວີດີໂອ> ແລະແຫລ່ງທີ່ມາ> tags, ຕົວທ່ອງເວັບທີ່ເຂົ້າກັນໄດ້ກັບ HTML5 ຈະຍ່າງຜ່ານແຫຼ່ງທີ່ສະ ໜອງ ຈົນກວ່າມັນຈະພົບເຫັນຮູບແບບວິດີໂອທີ່ເຂົ້າກັນໄດ້. ຂະບວນການນີ້ສາມາດຄິດໄດ້ວ່າຈະສືບຕໍ່ໄປ, ເພາະວ່າຖ້າ browser ບໍ່ຮອງຮັບ HTML5 video> element, ແທັກເຫຼົ່ານີ້ຈະຖືກລະເລີຍ.

ສະນັ້ນ, ການວາງຈຸດປະສົງຂອງເຄື່ອງຫຼີ້ນວີດີໂອ Flash ໃນຕອນທ້າຍຂອງບັນຊີລາຍຊື່ແຫຼ່ງ HTML5 ທີ່ສົມບູນແບບ ໝາຍ ຄວາມວ່າຕົວທ່ອງເວັບທີ່ເຂົ້າກັນໄດ້ກັບ HTML5 ໃນທີ່ສຸດກໍ່ຈະຊອກຫາຊັບສິນທີ່ ຈຳ ເປັນໃນການຫລິ້ນວິດີໂອແລະຕົວທ່ອງເວັບອື່ນໆຈະຫລິ້ນວິດີໂອໂດຍໃຊ້ Flash Player. (ແນ່ນອນວ່າສົມມຸດວ່າ Flash Player ຖືກຕິດຕັ້ງແລ້ວ, ແຕ່ພວກເຮົາຈະປຶກສາຫາລືກັນໃນເວລານີ້.) ວິທີການນີ້ໄດ້ຮັບຄວາມນິຍົມຈາກວິດີໂອຂອງ Kroc Camen ສຳ ລັບເຕັກນິກທຸກໆຄົນແລະເປັນທີ່ດຶງດູດເພາະວ່າມັນບໍ່ ຈຳ ເປັນຕ້ອງມີລະຫັດ JavaScript ຫລືສັບສົນ.

ນີ້ແມ່ນຕົວຢ່າງສຸດທ້າຍຂອງເຄື່ອງ ໝາຍ HTML5 ທີ່ຖືກ ນຳ ໃຊ້ໃນທຸກໆບົດຄວາມນີ້. ຕົວຢ່າງທີ່ງ່າຍທີ່ສຸດນີ້ໃຊ້ເຄື່ອງຫຼີ້ນ Open Source Media Framework Strobe ທີ່ພັດທະນາໂດຍ Adobe ເພື່ອເປັນເຄື່ອງຫຼີ້ນວີດີໂອ Flash.

ຄວາມກວ້າງຂອງວິດີໂອ = "320" ຄວາມສູງ = "240" ຄວບຄຸມ> ແຫລ່ງ src = "vid.mp4"> ແຫລ່ງ src = "vid.webm" ປະເພດ = 'ວິດີໂອ / webm; codecs = "vp8, vorbis" '> ແຫລ່ງ src = "vid.ogv" type =' video / ogg; codecs = "theora, vorbis" '> width width = "320" height = "240"> ຊື່ param = "ຮູບເງົາ" ມູນຄ່າ = "StrobeMediaPlayback.swf"> ຊື່ param = "flashvars" ມູນຄ່າ = "src = http: // yourdomain.com/vid.mp4 "> ຊື່ param =" allowFullScreen "ມູນຄ່າ =" ຄວາມຈິງ "> / ວັດຖຸ> / ວິດີໂອ>

ນັ້ນແມ່ນສິ່ງທີ່ກ່ຽວຂ້ອງກັບມັນ. ດັ່ງທີ່ທ່ານສາມາດເຫັນໄດ້, ບັນຊີ HTML5 markup ສຳ ລັບບັນຊີລາຍຊື່ງ່າຍໆຂອງບັນຫາທີ່ຮູ້ຈັກສົນທະນາຢູ່ນີ້, ແລະກັບໄປໃຊ້ Flash Player ເມື່ອ HTML5 Video ບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ.

ກັບມາໃຊ້ HTML5

ຖ້າທ່ານຕ້ອງການເລີ່ມຕົ້ນດ້ວຍວິດີໂອທີ່ Flash ຈັດໂດຍ Flash Player ແລະກັບມາໃຊ້ HTML5 - ບາງທີອາດເປັນເພາະວ່າທ່ານຕ້ອງການສະ ເໜີ ຄຸນລັກສະນະສະເພາະ, ຫຼືຕ້ອງການຄວບຄຸມເຄື່ອງຫຼີ້ນທີ່ມີຄວາມສອດຄ່ອງຫຼາຍຂື້ນເມື່ອເປັນໄປໄດ້ - ທ່ານສາມາດໃຊ້ JavaScript ເພື່ອເຮັດວຽກນີ້.

ຕົວຢ່າງງ່າຍໆນີ້ໃຊ້ຫ້ອງສະ ໝຸດ JavaScript SWFObject ເພື່ອເຮັດສິ່ງທີ່ຍາກ. ມັນຈະບໍ່ພຽງແຕ່ກວດພົບວ່າ Flash Flash ມີຢູ່ເທົ່ານັ້ນ, ມັນຍັງສາມາດກວດພົບໄດ້ອີກວ່າຖ້າ ຈຳ ເປັນຕ້ອງມີເວີຊັນຂັ້ນຕ່ ຳ ສຸດກໍ່ຄືໃນການ ນຳ ໃຊ້. ຖ້າພົບ Flash Flash ລຸ້ນທີ່ເຂົ້າກັນໄດ້, SWFObject ຈະປ່ຽນເນື້ອໃນຂອງ div ທີ່ ກຳ ນົດໄວ້> ກັບ HTML ທີ່ ຈຳ ເປັນເພື່ອຝັງ Flash Player. ຖ້າບໍ່, ຈະບໍ່ມີການກະ ທຳ ຫຍັງແລະລະຫັດ HTML5 ໃນ div> ຈະຖືກປະໄວ້ເພື່ອເຮັດວຽກຂອງມັນ.

ປະເພດ script = "text / javascript" src = "swfobject.js"> / script> ຕົວອັກສອນປະເພດ = "text / javascript"> var flashvars = {}; var params = {}; var attributes = {}; flashvars.src = "http://yourdomain.com/vid.mp4"; swfobject.embedSWF ("StrobeMediaPlayback.swf", "flashcontent", "320", "240", "10.0.0", ທີ່ບໍ່ຖືກຕ້ອງ, ກະພິບ, ຄຸນລັກສະນະ, ຄຸນລັກສະນະ); / script> body> div id = "ກະແສໄຟຟ້າ"> ຄວາມກວ້າງຂອງວິດີໂອ = "320" ຄວາມສູງ = "240" ຄວບຄຸມ> ແຫຼ່ງທີ່ມາ src = "vid.mp4"> ແຫຼ່ງ src = "vid.webm" ປະເພດ = 'ວີດີໂອ / webm; codecs = "vp8, vorbis" '> ແຫລ່ງ src = "vid.ogv" type =' video / ogg; codecs = "theora, vorbis" '> / video> / div> / ຮ່າງກາຍ>

ບາງທີປະໂຫຍດທີ່ດີທີ່ສຸດຂອງວິທີການນີ້ແມ່ນທ່ານສາມາດໃຊ້ເນື້ອໃນຂອງ div> ເພື່ອແນະ ນຳ ຢ່າງສະຫງ່າງາມວ່າຜູ້ໃຊ້ຈະໄດ້ Flash Flash ຖ້າມັນດີກວ່າ ສຳ ລັບວຽກງານສະເພາະໃດ ໜຶ່ງ. ໃນຄວາມເປັນຈິງ, SWFObject ສະ ໜັບ ສະ ໜູນ ຕົວເລືອກ Flash Player's Express Install ເພື່ອອັດຕະໂນມັດຂະບວນການນີ້ ສຳ ລັບທ່ານ, ຖ້າຕ້ອງການ.

ມີຫຍັງຕໍ່ໄປ?

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

• ເລືອກຊຸດຊອບແວທີ່ເຂົ້າລະຫັດ ສຳ ລັບການສ້າງເອກະສານວິດີໂອ.
• ຕົວຢ່າງຂອງເວລາ Flash Player ແມ່ນເຄື່ອງມືທີ່ດີທີ່ສຸດ ສຳ ລັບວຽກແລະເມື່ອ HTML5 ອາດຈະມັກ.
• ລະຫັດ JavaScript ຕົວຢ່າງ ສຳ ລັບສະຖານະການທີ່ຮຽກຮ້ອງໃຫ້ມີການແກ້ໄຂບັນຫາຂອງຜູ້ຫຼິ້ນແບບ ກຳ ນົດເອງ.
• ແລະພາບລວມຂອງບາງຫ້ອງສະ ໝຸດ JavaScript ທີ່ດີທີ່ສຸດເພື່ອຈັດການກັບວຽກທັງ ໝົດ ນີ້ ສຳ ລັບທ່ານ.

ແລ້ວ​ພົບ​ກັນ!