ให้เรตสมาชิก: 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
อยากได้วิธี get attribute ของ Dropdrow
โดย thatsawan อ 30 เม.ย. 2017 4:17 pm บอร์ด JavaScript & Jquery Ajax
2
6
อ 30 เม.ย. 2017 4:17 pm โดย thatsawan
ลับซ่อมpcโน๊ตบุคลงวินโด้ล่าค่า300ทุกอาหาร
โดย รับซ่อมคอมฯ ทุกอาการ อ 30 เม.ย. 2017 11:55 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
4
อ 30 เม.ย. 2017 11:55 am โดย รับซ่อมคอมฯ ทุกอาการ
[phpBB Debug] PHP Notice: in file [ROOT]/vendor/lusitanian/oauth/src/OAuth/OAuth2/Service/Facebook.php on line 147: Unde
โดย mindphp อ 30 เม.ย. 2017 1:02 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
7
อ 30 เม.ย. 2017 1:02 am โดย thatsawan
ช่วยดูโค๊ดนี้จาก error Unknown column '....' in 'where clause'
โดย Tanapat Sangtong ส 29 เม.ย. 2017 2:35 pm บอร์ด Programming - PHP
1
30
ส 29 เม.ย. 2017 2:35 pm โดย Tanapat Sangtong
server ไม่รองรับไฟล์รูปภาพที่เป็นภาษาไทย แก้ยังไงครับ
โดย tsukasaz ศ 28 เม.ย. 2017 6:18 pm บอร์ด Programming - PHP
0
10
ศ 28 เม.ย. 2017 6:18 pm โดย tsukasaz
ต้องการดึงจาก SQL มาแสดง Droplist แต่มันไม่แสดงครับ
โดย bondham ศ 28 เม.ย. 2017 5:04 pm บอร์ด Programming - PHP
2
24
ศ 28 เม.ย. 2017 5:04 pm โดย bondham
อยากทราบวิธี เช็ควัน หมดอายุ ของ SSL ได้ยังไงครับ ?
โดย M029 ศ 28 เม.ย. 2017 3:31 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
16
ศ 28 เม.ย. 2017 3:31 pm โดย M029
สอบถามคะ ติตั้ง joomla 1.5 ขึ้นแจ้งว่า Cookies do not appear to be enabled on your client. เป็นเพราะอะไรคะ
โดย moomai ศ 28 เม.ย. 2017 2:32 pm บอร์ด Joomla Development
1
21
ศ 28 เม.ย. 2017 2:32 pm โดย tsukasaz
สอบถามคะ ติดตั้ง Template ไม่ได้ขึ้น Error เป็นเพราะอะไรคะ
โดย moomai พฤ 27 เม.ย. 2017 7:52 pm บอร์ด Joomla Development
2
21
ศ 28 เม.ย. 2017 1:20 pm โดย tsukasaz
ถ้าจะออกแบบ db แบบระบบคล้ายๆmlm โครงสร้างทีไรบ้าง
โดย bondham อ 23 เม.ย. 2017 1:26 am บอร์ด SQL - Database
5
49
พฤ 27 เม.ย. 2017 7:26 pm โดย mindphp
สอบถามค่ะ ในโปรแกรมที่เราสร้างมี errpr ขึ้นหมายความว่ายังไงคะ
โดย moomai พฤ 27 เม.ย. 2017 2:09 pm บอร์ด Programming - PHP
3
30
พฤ 27 เม.ย. 2017 2:09 pm โดย tsukasaz
ติดตั้งโปรแกรม xampp ที่เป็นไฟล์ .zip ต้องทำยังไงบ้างคะ
โดย moomai พฤ 27 เม.ย. 2017 1:56 am บอร์ด Joomla Development
2
19
พฤ 27 เม.ย. 2017 1:56 am โดย moomai
ติดตั้งโปรแกรม xampp ที่เป็นไฟล์ .zip ต้องทำยังไงบ้างคะ
โดย moomai พฤ 27 เม.ย. 2017 1:55 am บอร์ด Joomla Development
0
6
พฤ 27 เม.ย. 2017 1:55 am โดย moomai
จะจัดตั้งบริษัทใหม่ มีค่าใช้จ่ายประมาณเท่าไหร่ครับ
โดย M029 พ 26 เม.ย. 2017 6:42 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
31
พ 26 เม.ย. 2017 6:42 pm โดย M029
ไปเรื่อง เรือดำน้ำ
โดย jataz2 พ 26 เม.ย. 2017 5:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
พ 26 เม.ย. 2017 5:04 pm โดย jataz2
ทำการติดตั้ง Joomla 1.5 แล้ว Error ต้องแก้ไขยังไงคะ
โดย moomai พ 26 เม.ย. 2017 4:51 pm บอร์ด Joomla Development
8
33
พ 26 เม.ย. 2017 4:51 pm โดย moomai
กำลังศึกษาภาษา Python สงสัยว่าพอเราเขียนชุดคำสั่งเสร็จแล้วจะนำไปใช้งานยังไงครับ
โดย amorn_au พ 26 เม.ย. 2017 11:25 am บอร์ด Programming - C/C++ & java & Python
0
23
พ 26 เม.ย. 2017 11:25 am โดย amorn_au
browser cache คืออะไรค่ะ
โดย thatsawan พ 26 เม.ย. 2017 10:56 am บอร์ด Programming - PHP
0
26
พ 26 เม.ย. 2017 10:56 am โดย thatsawan
มาแล้ว Joomla 3.7 มาตามสัญญา
โดย mindphp อ 25 เม.ย. 2017 11:44 pm บอร์ด PHP News
1
98
อ 25 เม.ย. 2017 11:44 pm โดย mindphp
R - mdsoft_claim_goods (ระบบเคลมสินค้า)
โดย dawthana อ 25 เม.ย. 2017 9:50 pm บอร์ด อาร์ซีพี โกลบอล จำกัด
1
21
อ 25 เม.ย. 2017 9:50 pm โดย dawthana