ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
ทำความรู้จักไวรัส Trojan และวิธีป้องกัน
โดย บัวบุญ จันทะโคตร จ 26 มิ.ย. 2017 3:45 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
1
จ 26 มิ.ย. 2017 3:45 pm โดย บัวบุญ จันทะโคตร
งานประจำวันที่ 26 มิถุนายน 2560
โดย Ik Kat จ 26 มิ.ย. 2017 2:46 pm บอร์ด MT19 - ปวีณา จันดี
1
5
จ 26 มิ.ย. 2017 2:46 pm โดย Ik Kat
การตัดต่อ VIdeo python ใช้ module ตัวไหนกันมั้งคับ
โดย nuattawoot จ 26 มิ.ย. 2017 2:31 pm บอร์ด Programming - C/C++ & java & Python
3
13
จ 26 มิ.ย. 2017 2:31 pm โดย nuattawoot
เข้าเฟสเก่าไม่ได้
โดย อั่งเปา จ 26 มิ.ย. 2017 12:56 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
จ 26 มิ.ย. 2017 12:56 pm โดย อั่งเปา
รวมงานประจำปี 2560
โดย bellzeed จ 26 มิ.ย. 2017 11:37 am บอร์ด M047 - วิศรุต เรืองอุไร
0
1
จ 26 มิ.ย. 2017 11:37 am โดย bellzeed
note
โดย บัวบุญ จันทะโคตร จ 26 มิ.ย. 2017 11:36 am บอร์ด M048 - บัวบัญ จันทะโครต
0
5
จ 26 มิ.ย. 2017 11:36 am โดย บัวบุญ จันทะโคตร
รวมงานประจำปี 2560
โดย Before Dong จ 26 มิ.ย. 2017 11:36 am บอร์ด M046 - อนวัช พริบไหว
0
2
จ 26 มิ.ย. 2017 11:36 am โดย Before Dong
รวมบทความ ปี 2560
โดย Before Dong จ 26 มิ.ย. 2017 11:36 am บอร์ด M046 - อนวัช พริบไหว
0
2
จ 26 มิ.ย. 2017 11:36 am โดย Before Dong
Work's on Hand วิศรุต เรืองอุไร M047
โดย bellzeed จ 26 มิ.ย. 2017 11:35 am บอร์ด M047 - วิศรุต เรืองอุไร
0
4
จ 26 มิ.ย. 2017 11:35 am โดย bellzeed
Note
โดย Before Dong จ 26 มิ.ย. 2017 11:35 am บอร์ด M046 - อนวัช พริบไหว
0
1
จ 26 มิ.ย. 2017 11:35 am โดย Before Dong
Work's on Hand บัวบุญ จันทะโคตร M048
โดย บัวบุญ จันทะโคตร จ 26 มิ.ย. 2017 11:35 am บอร์ด M048 - บัวบัญ จันทะโครต
0
4
จ 26 มิ.ย. 2017 11:35 am โดย บัวบุญ จันทะโคตร
Work's on Hand อนวัช พริบไหว md046
โดย Before Dong จ 26 มิ.ย. 2017 11:28 am บอร์ด M046 - อนวัช พริบไหว
0
4
จ 26 มิ.ย. 2017 11:28 am โดย Before Dong
งานประจำวันที่ 26 June 17
โดย bellzeed จ 26 มิ.ย. 2017 11:27 am บอร์ด M047 - วิศรุต เรืองอุไร
1
10
จ 26 มิ.ย. 2017 11:27 am โดย bellzeed
งานประจำวันที่ 26 มิถุนายน 2560
โดย บัวบุญ จันทะโคตร จ 26 มิ.ย. 2017 11:27 am บอร์ด M048 - บัวบัญ จันทะโครต
1
11
จ 26 มิ.ย. 2017 11:27 am โดย บัวบุญ จันทะโคตร
งานประจำวันที่ 26 มิถุนายน 2560
โดย Before Dong จ 26 มิ.ย. 2017 11:26 am บอร์ด M046 - อนวัช พริบไหว
1
12
จ 26 มิ.ย. 2017 11:26 am โดย Before Dong
สอบถาม code เครื่องคิดเลขที่เป็นปุ่มหน่อยคับ
โดย เอกพล ชื่นแย้ม จ 26 มิ.ย. 2017 9:06 am บอร์ด Programming - PHP
0
9
จ 26 มิ.ย. 2017 9:06 am โดย เอกพล ชื่นแย้ม
จะสร้างไฟล์ .csv จากฟรีโปรแกรมอะไรได้บ้างค่ะ (ไม่มี excel)
โดย thatsawan อ 25 มิ.ย. 2017 7:30 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
16
อ 25 มิ.ย. 2017 7:30 pm โดย thatsawan
มีคลิปทำ Xoops ไหมครับ
โดย Thanakorn Lummuangrong อ 25 มิ.ย. 2017 11:20 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
11
อ 25 มิ.ย. 2017 11:20 am โดย mindphp
ขอบคุณ
โดย มามี๊ น้องขอบคุณ ส 24 มิ.ย. 2017 9:32 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
ส 24 มิ.ย. 2017 9:32 pm โดย มามี๊ น้องขอบคุณ
Code ของผังบัญชี ความหมายของแต่ละหลักคืออะไร
โดย araxvaan ส 24 มิ.ย. 2017 6:46 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
36
ส 24 มิ.ย. 2017 6:46 pm โดย araxvaan