ให้เรตสมาชิก: 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 - com_MJUpgrade ไม่สามารถติดตั้งได้ใน Joomla เวอร์ชัน 3.x
โดย Parichat ส 23 มิ.ย. 2018 5:27 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 23 มิ.ย. 2018 5:27 pm โดย Parichat
B - ไม่สามารถ Copy สินค้าได้ [2018-05][030]
โดย Rujikon ส 23 มิ.ย. 2018 4:52 pm บอร์ด Hachanna - Testter
0
3
ส 23 มิ.ย. 2018 4:52 pm โดย Rujikon
การดูคำสั่ง sql ใน joomla
โดย Parichat ส 23 มิ.ย. 2018 3:31 pm บอร์ด Joomla Developing Knowledge
0
11
ส 23 มิ.ย. 2018 3:31 pm โดย Parichat
ปัญหา key ข้อมูลแล้ว error
โดย wilawan ส 23 มิ.ย. 2018 1:35 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
7
ส 23 มิ.ย. 2018 1:58 pm โดย mindphp
Alloy - Product ที่ยังไม่มีในระบบ
โดย wilawan ส 23 มิ.ย. 2018 12:18 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
0
4
ส 23 มิ.ย. 2018 12:18 pm โดย wilawan
ตรวจสอบ BPMN Zenith Workflow
โดย wilawan ส 23 มิ.ย. 2018 11:52 am บอร์ด Mindphp Task (ทดลองงาน)
0
2
ส 23 มิ.ย. 2018 11:52 am โดย wilawan
Google sheet ถ้าอยู่ที่ไฟล์ แล้วจะย้อนกลับมาหน้าแสดงรายละเอียดใน folder อย่างไร
โดย blackskulla ส 23 มิ.ย. 2018 11:10 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
24
ส 23 มิ.ย. 2018 11:14 am โดย thatsawan
ฺB - ไม่สามารถคืนสินค้าเข้าคลังของเสียหายได้ [2018-06][011]
โดย Rujikon ส 23 มิ.ย. 2018 11:10 am บอร์ด Hachanna - Testter
0
1
ส 23 มิ.ย. 2018 11:10 am โดย Rujikon
Q - ถ้ามีการให้ลูกค้ายืมสินค้าจะต้องดำเนินการอย่างไร [2018-06][012]
โดย Rujikon ส 23 มิ.ย. 2018 10:53 am บอร์ด Hachanna - Testter
0
4
ส 23 มิ.ย. 2018 10:53 am โดย Rujikon
B - เข้าดูข้อมูลการนัดคนเข้ามาสัมภาษณ์งานใน Application ไม่ได้
โดย watcharin ส 23 มิ.ย. 2018 10:25 am บอร์ด M.D.Soft Co.,Ltd. - Tester
1
1
ส 23 มิ.ย. 2018 10:29 am โดย watcharin
งานประจำวันที่ 23 มิถุนายน 2561
โดย Rujikon ส 23 มิ.ย. 2018 9:52 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
16
ส 23 มิ.ย. 2018 7:23 pm โดย Rujikon
งานประจำวันที่ 23 มิถุนายน 2561
โดย wilawan ส 23 มิ.ย. 2018 9:46 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
2
9
ส 23 มิ.ย. 2018 7:22 pm โดย thatsawan
งานประจำวันที่ 23 มิถุนายน 2561
โดย Parichat ส 23 มิ.ย. 2018 9:34 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
3
ส 23 มิ.ย. 2018 7:06 pm โดย Parichat
B - com_M2OpenERP Migration ติดตั้งได้แต่ไม่สามารถตั้งค่าได้ใน Joomla 3.x
โดย Parichat ศ 22 มิ.ย. 2018 5:55 pm บอร์ด M2OpenERP
0
3
ศ 22 มิ.ย. 2018 5:55 pm โดย Parichat
Q - หน้ารายละเอียดสินค้าให้แสดงราคาเป็น USD ด้วยและTHB ด้วย
โดย Parichat ศ 22 มิ.ย. 2018 2:20 pm บอร์ด Joomla Dev
5
13
ศ 22 มิ.ย. 2018 6:04 pm โดย tsukasaz
B - หน้าข้อมูลสินค้า แสดงพิ้นหลังยาวกว่าเว็บต้นฉบับ
โดย tsukasaz ศ 22 มิ.ย. 2018 1:20 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
2
12
ศ 22 มิ.ย. 2018 6:12 pm โดย tsukasaz
B - หน้าข้อมูลสินค้า ต้องแสดงราคาเป็น USD ด้วย ตามเว็บต้นฉบับ
โดย tsukasaz ศ 22 มิ.ย. 2018 1:17 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
9
ศ 22 มิ.ย. 2018 6:02 pm โดย tsukasaz
B - หน้าข้อมูลสินค้า เมื่อเลือกสีสินค้า รูปแบบของราคาจากตัวหนาเปลี่ยนเป็นตัวปกติ
โดย tsukasaz ศ 22 มิ.ย. 2018 1:09 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
5
ศ 22 มิ.ย. 2018 1:46 pm โดย Parichat
B - หน้า How to Buy ข้อความเกินขอบพื้นหลัง
โดย tsukasaz ศ 22 มิ.ย. 2018 12:07 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
4
ศ 22 มิ.ย. 2018 1:28 pm โดย Parichat
B - หน้าดาวน์โหลดแสดงผลไม่เหมือนของเดิม ข้อความเกินขอบพื้นหลัง
โดย tsukasaz ศ 22 มิ.ย. 2018 12:04 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
4
ศ 22 มิ.ย. 2018 12:10 pm โดย Parichat