ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 6 HTML5 video
   การใส่วีดีโอในเว็บไซต์ที่สร้างจากภาษา HTML5 นั้น ไม่จำเป็นต้องพึ่ง Adobe Flash และ plugin ใดๆ เพราะใน HTML5 สามารถใช้แท็ก <video> ได้ และไม่ต้อง embed โค้ดยาว ๆ แค่ใส่แท็ก HTML5 สั้น ๆ ไปก็เรียบร้อย

   ตอนนี้ web browserจะใช้ได้กับวีดีโออยู่ video 3 format ดังข้อมูลในตารางด้านล่าง ซึ่งในแต่ละ web browser จะรองรับ Video Format ไม่เหมือนกัน

Browser MP4 WebM Ogg
Internet Explorer 9 สนับสนุน ไม่สนับสนุน ไม่สนับสนุน
Firefox 4.0 ไม่สนับสนุน สนับสนุน สนับสนุน
Google Chrome 6 สนับสนุน สนับสนุน สนับสนุน
Apple Safari 5 สนับสนุน ไม่สนับสนุน ไม่สนับสนุน
Opera 10.6 ไม่สนับสนุน สนับสนุน สนับสนุน


โครงสร้างแท็ก ในการใส่วีดีโอ

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

โดยแต่ละ Attribute จาก HTML ด้านบน มีความหมายดังนี้

1.control คือปุ่ม control การเล่นวิดีโอ เช่น ปุ่ม play, pause ฯลฯ
2.ข้อความ ?Your browser does not support the video tag.? จะแสดงผลในกรณีที่ Browser ของ user ไม่ support <video> (ตอนนี้ Browser หลายๆ Browser ยังไม่ support Element นี้) เพราะฉะนั้น ถ้า Browser ไหนไม่ support มันก็จะไม่เห็นเป็นไฟล์วิดีโอ แต่ขึ้นข้อความบอกให้ user รู้แทน ว่า browser ของคุณไม่ support นะ
3.จาก HTML ด้านบน จะเห็นว่ามีการเรียก Video format มาตั้ง 3 format เนื่องจากต้องการให้ครอบคลุมทุกๆ browser เพราะแต่ละบราวเซอร์จะ support video format ไม่เหมือนกัน (ดังข้อมูลในตาราง) ดังนั้น ถ้าอยากจะให้มัน support ทั้งหมด ก็ใส่มันเรียงเข้าไปเลย บราวเซอร์ไหน support อะไรก็จะทำการดึงขึ้นมาแสดงเอง

ตัวอย่าง

<html>
<body>

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

</body>
</html>

ผลลัพธ์คือ

   นอกจากนี้ ยังมี attribute อีกหลายๆตัว เพื่อเพิ่มลูกเล่น และความสะดวกสบายให้กับ Element นี้ด้วย ดังตาราง

Attribute ค่าที่สามารถเรียกใช้งานได้ คำอธิบาย
autoplay autoplay สั่งให้มันเล่นเลยรึเปล่า เมื่อโหลดเพจเสร็จ ถ้าสั่งเป็น autoplay ก็คือ หลังจากโหลดหน้าเว็บขึ้นมาเสร็จแล้ว มันก็จะเล่นไฟล์วิดีโอเองเลย แต่ถ้าไม่สั่ง user ต้องคลิกปุ่ม ?Play? ถึงจะเล่น
controls controls ถ้าสั่ง attribute นี้ จะมีแผงปุ่มต่างๆเพื่อควบคุมการเล่นไฟล์วิดีโอขึ้นมาให้กด
height pixels กำหนดความสูงของวิดีโอ (ควรใส่ทุกครั้ง)
loop loop กำหนดให้ไฟล์วิดีโอเล่นอีกครั้ง หลังมันเล่นจบ แล้วจะวนไปเรื่อยๆ
poster url ใส่รูป เหมือนเป็น video preview ก่อนที่มันจะเล่นไฟล์วิดีโอ
src url URL ของไฟล์วิดีโอ
width pixels กำหนดความกว้างให้ video (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 20 กันยายน 2561
โดย tatiya พฤ 20 ก.ย. 2018 9:23 am บอร์ด M065 - ตติยะ นาชัย
0
3
พฤ 20 ก.ย. 2018 9:23 am โดย tatiya
checkbox พร้อมกรองจำนวน
โดย Ittichai_chupol พ 19 ก.ย. 2018 5:49 pm บอร์ด Programming - PHP
0
17
พ 19 ก.ย. 2018 5:49 pm โดย Ittichai_chupol
การทำแผ่นรองเมาส์สำหรับวัยทำงานแบบง่าย
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:53 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
พ 19 ก.ย. 2018 4:53 pm โดย Ittichai_chupol
การทำข้าวขย้ำกล้วย ให้เด็ก อายุ 3 - 6 เดือน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:51 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 19 ก.ย. 2018 4:51 pm โดย Ittichai_chupol
สถานที่ท่องเทียวน่าสนใจ อุทยานแห่งชาติน้ำตกพลิ้ว จังหวัดจันทบุรี
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
พ 19 ก.ย. 2018 4:48 pm โดย Ittichai_chupol
R - mod_jshopping_shipping_method โมดูลการจัดส่งสินค้า
โดย pprn พ 19 ก.ย. 2018 4:42 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
พ 19 ก.ย. 2018 4:42 pm โดย pprn
การจัดเตรียมแปลงเพาะผักไร้ดิน แบบแปลงน้ำไม่ไหลเวียน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 19 ก.ย. 2018 4:25 pm โดย Ittichai_chupol
การเพาะปลูกผักสลัดแบบไร้ดิน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
พ 19 ก.ย. 2018 4:19 pm โดย Ittichai_chupol
Q- ไม่สามารถพิมพ์ข้อความลงบน Google chrom ได้
โดย tatiya พ 19 ก.ย. 2018 12:36 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
32
พ 19 ก.ย. 2018 1:02 pm โดย tatiya
VDO - การทำงานของโปรแกรมเมอร์และการอัพเดทงานในเเต่ละวัน
โดย prakon พ 19 ก.ย. 2018 11:56 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
4
พ 19 ก.ย. 2018 11:56 am โดย prakon
การเดินทางจากเพชรบุรี มา กรุงเทพฯ
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:39 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
พ 19 ก.ย. 2018 11:39 am โดย Ittichai_chupol
งานประจำวันที่ 19 กันยายน 2561
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:03 am บอร์ด M070 - อิทธิชัย ชูผล
3
22
พ 19 ก.ย. 2018 7:08 pm โดย Ittichai_chupol
Work's on Hand อิทธิชัย ชูผล M070
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:01 am บอร์ด M070 - อิทธิชัย ชูผล
0
5
พ 19 ก.ย. 2018 11:01 am โดย Ittichai_chupol
งานประจำวันที่ 19 กันยายน 2561
โดย muneela พ 19 ก.ย. 2018 10:57 am บอร์ด M068 - มุนีลา หมัดบาซา
1
11
พ 19 ก.ย. 2018 7:08 pm โดย muneela
งานประจำวันที่ 19 กันยายน 2561
โดย pprn พ 19 ก.ย. 2018 10:21 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
13
พ 19 ก.ย. 2018 7:15 pm โดย pprn
งานประจำวันที่ 19 กันยายน 2561
โดย tai14 พ 19 ก.ย. 2018 10:00 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
3
พ 19 ก.ย. 2018 7:02 pm โดย tai14
งานประจำวันที่ 19 กันยายน 2561
โดย prakon พ 19 ก.ย. 2018 9:53 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
10
พ 19 ก.ย. 2018 10:01 am โดย prakon
งานประจำวันที่ 19 กันยายน 2561
โดย tatiya พ 19 ก.ย. 2018 9:26 am บอร์ด M065 - ตติยะ นาชัย
1
9
พ 19 ก.ย. 2018 8:29 pm โดย tatiya
B - ระบบแสดงยอดสต็อค On Hand ของ product set ไม่ถูกต้อง
โดย rinrada พ 19 ก.ย. 2018 8:36 am บอร์ด Hachanna - Testter
0
9
พ 19 ก.ย. 2018 8:36 am โดย rinrada
งานประจำวันที่ 18 กันยายน 2561
โดย muneela อ 18 ก.ย. 2018 10:22 am บอร์ด M068 - มุนีลา หมัดบาซา
1
8
อ 18 ก.ย. 2018 7:08 pm โดย muneela