ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - Period Payment หน้าทำใบเสนอราคาต้องอยู่ ที่ tab แรก และเป็นราคาหลังรวม vat แล้ว
โดย mindphp จ 20 ส.ค. 2018 3:42 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
จ 20 ส.ค. 2018 3:42 am โดย mindphp
Q-สอบถามครับตอนนี้ผมติดปัญหา EnvironmentError: [Errno 13] Permission denied:
โดย tatiya อ 19 ส.ค. 2018 10:41 pm บอร์ด Programming - C/C++ & java & Python
1
9
อ 19 ส.ค. 2018 10:44 pm โดย thatsawan
วิธีแก้ปัญหา 'pip' is not recognized as an internal or external command, operable program or batch file
โดย tatiya อ 19 ส.ค. 2018 9:56 pm บอร์ด Python Knowledge
0
4
อ 19 ส.ค. 2018 9:56 pm โดย tatiya
สอบถามวิธีติดตั้งตัว module pythainlp ครับ
โดย tatiya อ 19 ส.ค. 2018 5:41 pm บอร์ด Programming - C/C++ & java & Python
3
17
อ 19 ส.ค. 2018 8:10 pm โดย mindphp
สอบถามวิธีการใส่ค่าที่ต้องการใน type="number" เป็นตัวเลขได้ทั้งบวก ลบ และทศนิยมที่มีค่าเป็นบวกและลบ แต่ไม่เอา 0 ค่ะ
โดย pprn ส 18 ส.ค. 2018 8:14 pm บอร์ด HTML CSS
1
18
อ 19 ส.ค. 2018 5:15 pm โดย mindphp
B - หน้า Contact ของลูกค้ามีปุ่มติ๊กเกินมา
โดย thatsawan ส 18 ส.ค. 2018 6:59 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
ส 18 ส.ค. 2018 6:59 pm โดย thatsawan
อบรมระบบ ERP Odoo 11 ครั้งที่ 30 วันที่ 18 สิงหาคม 2561
โดย Lamduan ส 18 ส.ค. 2018 6:58 pm บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
4
ส 18 ส.ค. 2018 6:58 pm โดย Lamduan
สอบถามวิธีการคำนวณหา Rate ค่ะ
โดย pprn ส 18 ส.ค. 2018 6:51 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
8
ส 18 ส.ค. 2018 6:51 pm โดย pprn
B - ฐานจริง User M017 สร้าง inv จากหน้า sale ไม่ได้
โดย thatsawan ส 18 ส.ค. 2018 4:57 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
ส 18 ส.ค. 2018 4:57 pm โดย thatsawan
B - ยกเลิกจ่ายชำระ เเต่ หัก ณ ที่จ่ายไม่ยกเลิก ทำให้ออกรายงา หัก ณ ที่จ่ายผิด
โดย thatsawan ส 18 ส.ค. 2018 4:44 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
ส 18 ส.ค. 2018 4:44 pm โดย thatsawan
Q - อัพเกรด Joomla 2.5 เป็น Joomla 3.8 แล้ว ขึ้น Error
โดย Parichat ส 18 ส.ค. 2018 3:57 pm บอร์ด Joomla Development
2
17
ส 18 ส.ค. 2018 7:02 pm โดย Parichat
Q - สอบถามวิธีใช้งาน split ครับ
โดย tatiya ส 18 ส.ค. 2018 2:52 pm บอร์ด Programming - C/C++ & java & Python
4
25
ส 18 ส.ค. 2018 3:40 pm โดย tatiya
งานประจำวันที่ 18 สิงหาคม 2561
โดย Lamduan ส 18 ส.ค. 2018 10:33 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
1
9
ส 18 ส.ค. 2018 6:56 pm โดย Lamduan
งานประจำวันที่ 18 สิงหาคม 2561
โดย tatiya ส 18 ส.ค. 2018 10:02 am บอร์ด M065 - ตติยะ นาชัย
1
4
ส 18 ส.ค. 2018 7:26 pm โดย tatiya
เปลี่ยน data type จาก numeric เป็น character varying อย่างไร pg AdminIII
โดย kkeinezung ศ 17 ส.ค. 2018 9:43 pm บอร์ด Programming - PHP
0
37
ศ 17 ส.ค. 2018 9:43 pm โดย kkeinezung
จัดการที่อยู่ อำเภอ ตำบล จังหวัด โดยไม่ต้องพิมพ์เองยังไงคะ
โดย mook2LRC1 ศ 17 ส.ค. 2018 8:08 pm บอร์ด Joomla Development
2
30
ส 18 ส.ค. 2018 9:48 am โดย mook2LRC1
B - ใบกำกับภาษี วันที่ตกบรรทัด
โดย taemmynatchapon ศ 17 ส.ค. 2018 6:35 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
2
8
ส 18 ส.ค. 2018 11:26 am โดย taemmynatchapon
คำสั่งตัดสินใจการทำงาน PHP แบบ if และ switch
โดย tai14 ศ 17 ส.ค. 2018 5:53 pm บอร์ด PHP Knowledge
0
18
ศ 17 ส.ค. 2018 5:53 pm โดย tai14
สอบถามวิธีแก้เมื่อกด Start Mysqlไม่ได้ โปรแกรม Xampp
โดย tai14 ศ 17 ส.ค. 2018 5:09 pm บอร์ด Programming - PHP
1
54
ศ 17 ส.ค. 2018 6:53 pm โดย tsukasaz
แนะนำ module nltk ตัดคำที่ไม่จำเป็น
โดย tatiya ศ 17 ส.ค. 2018 4:55 pm บอร์ด Python Knowledge
0
9
ศ 17 ส.ค. 2018 4:55 pm โดย tatiya