ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 18 มีนาคม 2562
โดย สริญญา สมสา จ 18 มี.ค. 2019 9:35 am บอร์ด MT32 - นางสาวสริญญา สมสา
0
2
จ 18 มี.ค. 2019 9:35 am โดย สริญญา สมสา
หากไม่ได้ไปใช้สิทธิเลือกตั้งสมาชิกสภาผู้แทนราษฎร จะมีผลอย่างไร และควรทำอย่างไร
โดย saibennn9 อ 17 มี.ค. 2019 10:05 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
อ 17 มี.ค. 2019 10:05 am โดย saibennn9
⭐⭐⭐⭐⭐ ฟิลเลอร์คาง กับ ผ่าตัดเสริมคาง อย่างไหนเสี่ยงกว่ากัน ⭐⭐⭐⭐⭐
โดย mstr99 ส 16 มี.ค. 2019 1:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
ส 16 มี.ค. 2019 1:00 pm โดย mstr99
งานประจำวันที่ 16 มีนาคม 2562
โดย Four ส 16 มี.ค. 2019 10:28 am บอร์ด M077 - อิษยา งามสอาด
1
6
ส 16 มี.ค. 2019 10:31 am โดย Four
ขอสอบถามและขอคำแนะนำครับ
โดย toonytoony2004 ส 16 มี.ค. 2019 9:43 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
8
ส 16 มี.ค. 2019 9:43 am โดย toonytoony2004
ต้นไม้มงคล
โดย สริญญา สมสา ศ 15 มี.ค. 2019 5:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
ศ 15 มี.ค. 2019 5:41 pm โดย สริญญา สมสา
อัพเดดความคืบหน้า / Progress - Diageo
โดย mindphp พฤ 07 ก.พ. 2019 11:51 pm บอร์ด Diageo - Web Ordering
6
37
ศ 15 มี.ค. 2019 6:56 pm โดย tsukasaz
เลือกซื้อบ้านอย่างไร ที่ถูกวิธี
โดย สริญญา สมสา ศ 15 มี.ค. 2019 4:16 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
ศ 15 มี.ค. 2019 4:16 pm โดย สริญญา สมสา
การเตรียมความพร้อมในการสัมภาษณ์งาน
โดย สริญญา สมสา ศ 15 มี.ค. 2019 3:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
ศ 15 มี.ค. 2019 3:52 pm โดย สริญญา สมสา
รวมร้านชาบู-สุกี้ 5 อันดับ
โดย สริญญา สมสา ศ 15 มี.ค. 2019 3:27 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 15 มี.ค. 2019 3:27 pm โดย สริญญา สมสา
เลือกซื้อเครื่องปริ้นที่เหมาะกับการใช้งาน
โดย สริญญา สมสา ศ 15 มี.ค. 2019 2:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 15 มี.ค. 2019 2:50 pm โดย สริญญา สมสา
ร้านของหวานในย่านวังหิน เเละ โชคชัย 4
โดย สริญญา สมสา ศ 15 มี.ค. 2019 2:22 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 15 มี.ค. 2019 2:22 pm โดย สริญญา สมสา
ร้านของหวานในย่านวังหิน เเละ โชคชัย 4
โดย Anonymous ศ 15 มี.ค. 2019 12:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
ศ 15 มี.ค. 2019 12:50 pm โดย บุคคลทั่วไป
R - อยากได้ยอดรวมเป็นจำนวน ลัง และ ยอดรวม บาทของทั้งคำสั่งซื้อ
โดย Parichat ศ 15 มี.ค. 2019 10:20 am บอร์ด Diageo - Web Ordering
0
2
ศ 15 มี.ค. 2019 10:20 am โดย Parichat
R - ไม่มี Order UOM ที่ SKU เวลาสั่งซื้อ เพื่อเลือก ลัง หรือ ขวด
โดย Parichat ศ 15 มี.ค. 2019 10:18 am บอร์ด Diageo - Web Ordering
0
2
ศ 15 มี.ค. 2019 10:18 am โดย Parichat
R - ปุ่มเปลี่ยนภาษาหายหลังจากใช้
โดย Parichat ศ 15 มี.ค. 2019 10:16 am บอร์ด Diageo - Web Ordering
1
3
ศ 15 มี.ค. 2019 1:54 pm โดย Parichat
งานประจำวันที่ 15 มีนาคม 2562
โดย Four ศ 15 มี.ค. 2019 8:56 am บอร์ด M077 - อิษยา งามสอาด
1
14
ส 16 มี.ค. 2019 10:29 am โดย Four
งานประจำวันที่ 15 มีนาคม 2562
โดย สริญญา สมสา ศ 15 มี.ค. 2019 8:48 am บอร์ด MT32 - นางสาวสริญญา สมสา
1
13
ศ 15 มี.ค. 2019 9:33 am โดย สริญญา สมสา
ความรู้การใช้งาน ทางความพิวเตอร์
โดย ธวัชชัย แสนหาญ พฤ 14 มี.ค. 2019 7:32 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
26
พฤ 14 มี.ค. 2019 7:32 pm โดย ธวัชชัย แสนหาญ
เงินเดือน
โดย จันนุสรณ์ ดีแก่ พฤ 14 มี.ค. 2019 7:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
20
พฤ 14 มี.ค. 2019 7:03 pm โดย จันนุสรณ์ ดีแก่