cw.in.th > คลังความรู้ > HTML5 & CSS3 Support
24-Sep-2015

HTML5 & CSS3 Support

ใน HTML รุ่นก่อนๆ ไล่มาจนถึง HTML4 เราไม่สามารถแทรกวิดีโอและไฟล์เสียงลงไปในเว็บเพจได้แบบ native คือเป็นส่วนหนึ่งของหน้าเว็บ เฉกเช่นเดียวกับการแทรกภาพด้วยแท็ก เพราะตัวเทคโนโลยีเว็บและเบราว์เซอร์เอง ไม่สามารถประมวลผลวิดีโอ/เสียงได้เพียงลำพังของตัวมันเอง

อย่างไรก็ตาม เราก็มีทางออกโดยใช้แท็ก หรือ

<br>
<video src="movie.webm">video><br>

โปรแกรมภายนอกนี้คือ "ปลั๊กอิน" ที่ผู้ใช้ต้องติดตั้งเสริมลงไปในระบบปฏิบัติการ เคียงคู่ไปกับเบราว์เซอร์ ซึ่งปลั๊กอินที่เรารู้จักกันดีคือ Flash Player แต่ก็ยังมีตัวอื่นๆ อีกมาก เช่น Shockwave, Java, QuickTime, Silverlight, Google Earth, Google Video Chat เป็นต้น

ส่วนตัวอย่างการใช้งานก็มีตั้งแต่การเล่นภาพเคลื่อนไหว, วิดีโอ, เกม, ไปจนถึงวัตถุ 3 มิติอย่างใน Google Earth

แต่เมื่อเว็บพัฒนาขึ้น งานบางอย่างที่ต้องใช้ปลั๊กอินช่วยกลับได้รับความนิยมอย่างมาก โดยเฉพาะการเล่นวิดีโอ-ไฟล์เสียง ทำให้กลุ่มผู้ร่างมาตรฐานเว็บมองว่าควรจะกำหนดให้เบราว์เซอร์มีความสามารถนี้มาในตัวเลย

นี่เป็นเหตุให้ HTML5 มีแท็กใหม่ด้านนี้อีก 2 ตัวคือและ

หน้าที่การใช้งานก็ตามชื่อครับ

ตัวอย่างการใช้งาน

การฝังวิดีโอลงในหน้าเว็บ ใช้รูปแบบที่ใกล้เคียงกับการใส่แท็ก img มาก โดยรูปแบบที่เรียบงายที่สุดคือ

 

1
2
<br>
<video src="movie.webm">video><br>


จะเห็นว่ารูปแบบการใช้แท็ก video จะเหมือนกับ img มาก คือเริ่มด้วยชื่อแท็กปกติ และตามด้วยคุณสมบัติ src เพื่อระบุตำแหน่งของไฟล์ที่จะแสดงผล (ส่วนวิธีใส่ path ก็เหมือนกันทุกประการ จะใส่ full path หรือ relative path ก็ตามชอบ)

 

สำหรับแท็ก audio ก็คล้ายๆ กัน ซึ่งคงจะไม่พูดถึงในที่นี้ครับ

แต่ในการใช้งานจริงๆ รูปแบบอาจจะซับซ้อนขึ้นมาสักนิด เพราะเราสามารถเลือกใส่ source ของไฟล์ได้หลายอันพร้อมกัน เพื่อให้เบราว์เซอร์เลือกใช้ไฟล์ที่เหมาะกับตัวเองมากที่สุด (ด้วยปัญหาเรื่อง codec ดังจะกล่าวถึงในหัวข้อต่อไป)

ตัวอย่างจากเว็บ HTML5 Rocks

 

1
2
3
4
5
<br>
<video><br>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /><br>
video><br>

 

นอกจากนี้เรายังสามารถใส่ข้อความเพื่อให้แสดงผลเมื่อเบราว์เซอร์ไม่รู้จักแท็กนี้ได้ด้วย วิธีการคือยัดข้อความลงไปตรงๆ

 

1
2
3
4
5
6
<br>
<video><br>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /><br>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br>
  Video tag not supported. Download the video <a href="movie.webm">herea>.<br>
video><br>

 

ในโลกยุคปัจจุบัน ยังมีเบราว์เซอร์อีกไม่น้อยที่ไม่รองรับ HTML5 Video (ตัวอย่าง IE7/8) ทำให้ในการใช้งานจริง เราควรจะใส่ Flash Object ไว้เป็นทางเลือก (ถ้ามี) ให้ด้วย วิธีการก็แบบเดียวกัน

 

1
2
3
4
5
6
<br>
<video><br>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /><br>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br>
  <object type="application/x-shockwave-flash"> ... object><br>
video><br>

 

ความสามารถอื่นๆ ของแท็ก video ที่อยู่ในรูป attribute

  • controls - สามารถกำหนดได้ว่าจะแสดง "ตัวควบคุมการเล่น" (control) ไว้ด้วยหรือไม่ (ซึ่งเป็นตัวคุมวิดีโอขั้นพื้นฐานที่มากับตัวเบราว์เซอร์)
  • poster - แสดงภาพ thumbnail ของวิดีโอสำหรับก่อนกด play ได้ด้วย อันนี้เราต้องเตรียมภาพมาเองเป็นไฟล์ภาพธรรมดา ปรับขนาดมาให้ตรง
  • autoplay - เล่นอัตโนมัติ
  • loop - เล่นวนซ้ำ


2120 View

ดูคลังความรู้ทั้งหมด





กรมพัฒนาธุรกิจการค้า Trustmarkthai  Thailand Web Stat
Scroll To Top