ให้เรตสมาชิก: 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
เชื่อมต่อ Server ใน pgadmin ไม่ได้ค่ะ
โดย Panchalee พ 22 พ.ย. 2017 2:59 pm บอร์ด PostgreSQL
1
7
พ 22 พ.ย. 2017 2:59 pm โดย mindphp
context diagram ระบบบริหารบัญชีครัวเรือน
โดย Maprang Kannika พ 22 พ.ย. 2017 11:24 am บอร์ด SQL - Database
1
11
พ 22 พ.ย. 2017 11:24 am โดย jataz2
เมื่อค้น Google ว่า How to fixed Error 500 ?
โดย Before Dong พ 22 พ.ย. 2017 10:27 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
พ 22 พ.ย. 2017 10:27 am โดย Before Dong
ปัญหา ออกแบบพัฒนา
โดย บุคคลทั่วไป อ 21 พ.ย. 2017 8:15 pm บอร์ด Programming - PHP
0
15
อ 21 พ.ย. 2017 8:15 pm โดย บุคคลทั่วไป
รันโค้ดแล้ว Error ค่ะ
โดย Wallapa อ 21 พ.ย. 2017 5:24 pm บอร์ด Programming - C/C++ & java & Python
4
35
อ 21 พ.ย. 2017 5:24 pm โดย Wallapa
รันโค้ดแล้ว Error ค่ะ
โดย Wallapa อ 21 พ.ย. 2017 4:58 pm บอร์ด Programming - C/C++ & java & Python
1
23
อ 21 พ.ย. 2017 4:58 pm โดย mindphp
PostgreSQL คืออะไร MySQL คืออะไร
โดย Panchalee อ 21 พ.ย. 2017 1:40 pm บอร์ด PostgreSQL
1
18
อ 21 พ.ย. 2017 1:40 pm โดย jataz2
PostgreSQL กับ MySQL ต่างกันยังไงค่ะ?
โดย Wallapa อ 21 พ.ย. 2017 1:40 pm บอร์ด PostgreSQL
0
11
อ 21 พ.ย. 2017 1:40 pm โดย Wallapa
แจกฟรี!! ปฏิทิน CMS 2018
โดย Before Dong อ 21 พ.ย. 2017 11:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
อ 21 พ.ย. 2017 11:23 am โดย Before Dong
ขอทราบวิธีติดตั้ง แพ็กเกจ FFmpeg บน Windows หน่อยค่ะ
โดย Panchalee อ 21 พ.ย. 2017 10:32 am บอร์ด Python Knowledge
2
18
อ 21 พ.ย. 2017 10:32 am โดย nuattawoot
เมื่อเอาคำว่า What is Error 500 ไปแปลภาษา
โดย Before Dong อ 21 พ.ย. 2017 9:37 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
อ 21 พ.ย. 2017 9:37 am โดย Before Dong
ถ้าเราต้องการเริ่มต้นการหัดเขียน php ประกอบเข้าใน html เราควรเริ่มต้นยังไงคะ ไปทางไหนก่อนดี
โดย shadowzega จ 20 พ.ย. 2017 6:56 pm บอร์ด Programming - PHP
0
22
จ 20 พ.ย. 2017 6:56 pm โดย shadowzega
โปรแกรมเมอร์ต่างประเทศกับโปรแกรมเมอร์ไทย
โดย Before Dong จ 20 พ.ย. 2017 10:35 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
945
จ 20 พ.ย. 2017 10:35 am โดย Before Dong
รับสร้างแอพปาวครับ
โดย นุ พาลั่น จ 20 พ.ย. 2017 10:11 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
จ 20 พ.ย. 2017 10:11 am โดย นุ พาลั่น
ถาม- โน๊ดบุคของผมช้าผิดปกติ เกิดจากอะไร ควรแก้ไขยังไงครับ
โดย nuattawoot ศ 17 พ.ย. 2017 7:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
35
ศ 17 พ.ย. 2017 7:08 pm โดย konseo
วันหยุด 2561 วันหยุดราชการ 2561 / 2018
โดย Before Dong ศ 17 พ.ย. 2017 5:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
32
ศ 17 พ.ย. 2017 5:19 pm โดย konseo
แจกฟรี!! ปฏิทิน 2018 ประจำปีนักษัตรปีจอ
โดย Before Dong ศ 17 พ.ย. 2017 1:22 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
81
ศ 17 พ.ย. 2017 1:22 pm โดย Before Dong
สภาพหลังจากแก้ bug ของโปรแกรมเมอร์
โดย Before Dong ศ 17 พ.ย. 2017 10:06 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
4
116
ศ 17 พ.ย. 2017 10:06 am โดย Before Dong
ไฟฟ้าสถิต หรือ พรหมลิขิต
โดย Before Dong พฤ 16 พ.ย. 2017 10:15 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
87
พฤ 16 พ.ย. 2017 10:15 am โดย konseo
โปรแกรมไว้ สำหรับเชค ว่าไฟล์ ไหน บน Linux Ubuntu กำลังอ่านเขียนอยู่
โดย mindphp พ 15 พ.ย. 2017 2:56 pm บอร์ด Linux - Web Server
1
37
พ 15 พ.ย. 2017 3:57 pm โดย mindphp