ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Work's on Hand ปาริชาติ รัตโณภาส MT21
โดย Parichat จ 08 ม.ค. 2018 12:11 pm บอร์ด MT21 - ปาริชาติ รัตโณภาส
2
43
พ 17 ม.ค. 2018 10:51 am โดย Parichat
งานประจำวันที่ 17 มกราคม 2561
โดย Parichat พ 17 ม.ค. 2018 9:47 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
2
15
พ 17 ม.ค. 2018 10:51 am โดย AePongsak
ไอเดียในการออกแบบ iphone8
โดย Before Dong พ 17 ม.ค. 2018 10:29 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 17 ม.ค. 2018 10:29 am โดย Before Dong
งานประจำวันที่ 17 มกราคม 2561
โดย Jom07 พ 17 ม.ค. 2018 9:57 am บอร์ด MT23 - สุพรรษา พูลตา
1
8
พ 17 ม.ค. 2018 10:44 am โดย Jom07
งานประจำวันที่ 17 มกราคม 2561
โดย Four พ 17 ม.ค. 2018 9:56 am บอร์ด MT22 - อิษยา งามสอาด
1
6
พ 17 ม.ค. 2018 10:36 am โดย AePongsak
เจอปัญหานี้บ่อย สำหรับ app ที่อยู่บน pgsql เยอะๆ psql: FATAL: too many connections for role "user_name".
โดย mindphp พ 17 ม.ค. 2018 4:50 am บอร์ด PostgreSQL
1
7
พ 17 ม.ค. 2018 4:51 am โดย mindphp
Thin Client คืออะไร
โดย Jom07 อ 16 ม.ค. 2018 2:38 pm บอร์ด Software testing
0
14
อ 16 ม.ค. 2018 2:38 pm โดย Jom07
วิธีนอน 8 ชั่วโมง ใน 4 ชั่วโมง
โดย Before Dong อ 16 ม.ค. 2018 10:21 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
37
อ 16 ม.ค. 2018 10:21 am โดย Before Dong
งานประจำวันที่ 16 มกราคม 2561
โดย Four อ 16 ม.ค. 2018 9:46 am บอร์ด MT22 - อิษยา งามสอาด
2
38
อ 16 ม.ค. 2018 3:39 pm โดย Four
งานประจำวันที่ 16 มกราคม 2561
โดย Jom07 อ 16 ม.ค. 2018 9:44 am บอร์ด MT23 - สุพรรษา พูลตา
2
33
อ 16 ม.ค. 2018 2:21 pm โดย Jom07
งานประจำวันที่ 16 มกราคม 2561
โดย Parichat อ 16 ม.ค. 2018 9:40 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
2
19
อ 16 ม.ค. 2018 7:12 pm โดย Parichat
เบอร์โทร ศูนย์บริการ ASUS ศูนย์บริการลูกค้าสัมพันธ์ (Call Center) ถามอะไหล่ ค่าบริการงานซ่อมได้
โดย mindphp อ 16 ม.ค. 2018 6:53 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
14
อ 16 ม.ค. 2018 6:53 am โดย mindphp
ตามหา พัดลมโน๊ตบุ๊ค ASUS รุ่น Pro36S ของ dc brushless
โดย mindphp อ 16 ม.ค. 2018 6:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
7
อ 16 ม.ค. 2018 6:29 am โดย mindphp
จะโหลด Android Studio กับ javaJDK ได้ที่ไหนค่ะ
โดย Anonymous จ 15 ม.ค. 2018 8:29 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
1
22
จ 15 ม.ค. 2018 9:25 pm โดย thatsawan
การใช้งานคำสั่ง inner join ใน SQL(เอสคิวเเอล)
โดย Parichat จ 15 ม.ค. 2018 5:50 pm บอร์ด SQL Knowledge
0
18
จ 15 ม.ค. 2018 5:50 pm โดย Parichat
ประเภทของ Firewall (ไฟร์วอลล์)
โดย Jom07 จ 15 ม.ค. 2018 5:42 pm บอร์ด Software testing
0
18
จ 15 ม.ค. 2018 5:42 pm โดย Jom07
เทคนิคการโอนย้ายข้อมูล 2 คอมพิวเตอร์
โดย Jom07 จ 15 ม.ค. 2018 5:41 pm บอร์ด Software testing
0
19
จ 15 ม.ค. 2018 5:41 pm โดย Jom07
Android Studio ไม่อนุญาตให้กรอกข้อมูลใน EditText
โดย Four จ 15 ม.ค. 2018 4:53 pm บอร์ด Mobile Application Developing- Android, iOS
0
12
จ 15 ม.ค. 2018 4:53 pm โดย Four
Android Studio การกำหนดขนาดข้อความใน TextView
โดย Four จ 15 ม.ค. 2018 2:50 pm บอร์ด Mobile Application Developing- Android, iOS
0
13
จ 15 ม.ค. 2018 2:50 pm โดย Four
สวิตซ์ (Switch) คืออะไร
โดย Jom07 จ 15 ม.ค. 2018 1:35 pm บอร์ด IOT - Internet of things
0
22
จ 15 ม.ค. 2018 1:35 pm โดย Jom07