ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การตรวจสอบบัญชี ด้วย Excel กับ โปรแกรมคอมพิวเตอร์ที่จำเป็น ในงานบัญชี
โดย EyePornnipa อ 18 มิ.ย. 2019 7:30 pm บอร์ด Share Knowledge
0
16
อ 18 มิ.ย. 2019 7:30 pm โดย EyePornnipa
อยากทราบวิธี ดึงข้อมูลจากฐานข้อมูลมาแสดงบนกราฟ High Chart
โดย Patipat อ 18 มิ.ย. 2019 7:06 pm บอร์ด Programming - PHP
3
17
อ 18 มิ.ย. 2019 9:28 pm โดย mindphp
ย่อขนาดรูป
โดย jamepiyawat อ 18 มิ.ย. 2019 6:34 pm บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
5
อ 18 มิ.ย. 2019 9:14 pm โดย mindphp
สรุปกลุ่มของเนื้อหาทั้งหมดของ Python
โดย chatee supasand อ 18 มิ.ย. 2019 6:29 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
2
อ 18 มิ.ย. 2019 6:29 pm โดย chatee supasand
วิธีการสร้างกราฟ High Chart 7.1.2 ใช้ภาษา PHP
โดย Patipat อ 18 มิ.ย. 2019 5:38 pm บอร์ด Jquery & Ajax Knowledge
0
13
อ 18 มิ.ย. 2019 5:38 pm โดย Patipat
ทำไม แคปภาพหน้าจอในโปรแกรม Excel ไม่ได้
โดย EyePornnipa อ 18 มิ.ย. 2019 5:29 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
17
อ 18 มิ.ย. 2019 6:34 pm โดย mindphp
จะติดตั้ง pycharm ครับ chmod แล้วทำอย่างไงต่อครับ
โดย jirawoot อ 18 มิ.ย. 2019 5:15 pm บอร์ด Programming - C/C++ & java & Python
1
9
อ 18 มิ.ย. 2019 5:28 pm โดย thatsawan
ทำไม chmod ในubuntu ไม่ได้ครับ
โดย jirawoot อ 18 มิ.ย. 2019 4:35 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
21
อ 18 มิ.ย. 2019 5:03 pm โดย tatiya
ถึงเวลาหนีไปนอน ของโปรแกรมเมอร์
โดย chatee supasand อ 18 มิ.ย. 2019 3:01 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
อ 18 มิ.ย. 2019 3:01 pm โดย chatee supasand
ภาษา C คืออะไร
โดย jirawoot อ 18 มิ.ย. 2019 2:58 pm บอร์ด Share Knowledge
0
15
อ 18 มิ.ย. 2019 2:58 pm โดย jirawoot
ใครคิดถึง Windows 95 เชิญทางนี้ กลับมาแล้วในรูปแบบแอปฯแล้ว
โดย chatee supasand อ 18 มิ.ย. 2019 2:44 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
40
อ 18 มิ.ย. 2019 2:44 pm โดย chatee supasand
การเรียนภาษาpython
โดย jirawoot อ 18 มิ.ย. 2019 1:18 pm บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
4
14
อ 18 มิ.ย. 2019 5:21 pm โดย jirawoot
phpBB เพิ่มรูปโปรไฟล์จากเครื่องแล้วไม่ขึ้น ทำไงดีครับ
โดย chatee supasand อ 18 มิ.ย. 2019 12:08 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
5
24
อ 18 มิ.ย. 2019 2:29 pm โดย mindphp
จะหา keyword จาก url ของ youtube มีวิธีหาอย่างไหนบ้าง ครับ
โดย jamepiyawat อ 18 มิ.ย. 2019 12:06 pm บอร์ด Programming - PHP
1
13
อ 18 มิ.ย. 2019 12:17 pm โดย mindphp
ลองให้ google travel แนะนำการเที่ยวของเราสิ
โดย jamepiyawat อ 18 มิ.ย. 2019 11:55 am บอร์ด Share Knowledge
0
9
อ 18 มิ.ย. 2019 11:55 am โดย jamepiyawat
สร้างไฟล์ Gif บนเว็บง่ายๆด้วย GIPHY
โดย chatee supasand อ 18 มิ.ย. 2019 11:52 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
อ 18 มิ.ย. 2019 11:52 am โดย chatee supasand
กราฟไม่แสดงบนหน้าเว็บเพจครับ
โดย Patipat อ 18 มิ.ย. 2019 11:22 am บอร์ด Programming - PHP
3
30
อ 18 มิ.ย. 2019 2:26 pm โดย Patipat
งานประจำวันที่ 18 มิถุนายน 2562
โดย jirawoot อ 18 มิ.ย. 2019 10:14 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
3
27
อ 18 มิ.ย. 2019 2:49 pm โดย Ittichai_chupol
งานประจำวันที่ 18 มิถุนายน 2562
โดย Patipat อ 18 มิ.ย. 2019 10:16 am บอร์ด M088 - ปฏิภัทร สารธรรม
4
24
อ 18 มิ.ย. 2019 6:56 pm โดย Patipat
มี code ที่ให้ผู้ใช้กรอก url ของ YouTube แล้วแสดง keywords ของคลิป นั้นบ้างไหมครับ
โดย jamepiyawat อ 18 มิ.ย. 2019 10:16 am บอร์ด Programming - PHP
9
73
อ 18 มิ.ย. 2019 4:47 pm โดย jamepiyawat