ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การตั้งค่า เปิด - ปิด ส่วนการลงทะเบียนสมัครสมาชิก ใน เว็บบอร์ด phpbb
โดย Ittichai_chupol ส 19 ม.ค. 2019 11:22 am บอร์ด phpBB user Guide Knowledge
0
8
ส 19 ม.ค. 2019 11:22 am โดย Ittichai_chupol
รวบรวมวิธีการใช้งาน Google Sheet
โดย Chidchanok ส 19 ม.ค. 2019 11:11 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
4
ส 19 ม.ค. 2019 11:11 am โดย Chidchanok
สอบถามวิธีการดึง File ที่ลบใน Google doc กลับ
โดย ณัฐกฤตา บุญญะฤทธิ์ ส 19 ม.ค. 2019 10:19 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
15
ส 19 ม.ค. 2019 10:48 am โดย Ittichai_chupol
การจัดทำใบสั่งซื้อในโปรแกรม Open ERP
โดย Chidchanok ศ 18 ม.ค. 2019 6:21 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
13
ศ 18 ม.ค. 2019 6:21 pm โดย Chidchanok
Q- OpenERP เมนู MRP เมนูย่อย Product คีย์ข้อมูลแล้วกดบันทึกไม่ได้
โดย ณัฐกฤตา บุญญะฤทธิ์ ศ 18 ม.ค. 2019 5:32 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
16
ศ 18 ม.ค. 2019 5:32 pm โดย ณัฐกฤตา บุญญะฤทธิ์
การจัดทำใบเสนอราคาฝั่งซื้อในโปรแกรม OpenERP
โดย Chidchanok ศ 18 ม.ค. 2019 5:24 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
ศ 18 ม.ค. 2019 5:24 pm โดย Chidchanok
การส่งสินค้าในโปรแกรม Open ERP
โดย Chidchanok ศ 18 ม.ค. 2019 4:49 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
10
ศ 18 ม.ค. 2019 4:49 pm โดย Chidchanok
อยากทราบวิธีการแบ่งข้อมูล ออกเป็นชุดๆ ใน phpbb
โดย Ittichai_chupol ศ 18 ม.ค. 2019 3:40 pm บอร์ด Programming - PHP
0
10
ศ 18 ม.ค. 2019 3:40 pm โดย Ittichai_chupol
การเพิ่มข้อมูลผู้จำหน่ายใน โปรแกรม Open ERP
โดย Chidchanok ศ 18 ม.ค. 2019 3:33 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
15
ศ 18 ม.ค. 2019 3:33 pm โดย Chidchanok
Q-กดปรื้นส์ใบเสนอราคาแต่ไม่สามารถดูได้
โดย Chidchanok ศ 18 ม.ค. 2019 2:57 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
ศ 18 ม.ค. 2019 2:57 pm โดย Chidchanok
การจัดทำใบวางบิล ในโปรแกรม Open ERP
โดย Chidchanok ศ 18 ม.ค. 2019 2:48 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
10
ศ 18 ม.ค. 2019 2:48 pm โดย Chidchanok
สอบถามหน่อยค่ะพอดีตั้งค่าให้เมลแจ้งเตือนในหน้า Desktop แล้วและเปิดการแจ้งเตือนของเบราเซอร์แล้วแต่ยังไม่แจ้งเตือนค่ะ
โดย Parichat ศ 18 ม.ค. 2019 2:00 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
4
32
ศ 18 ม.ค. 2019 2:09 pm โดย Parichat
การจัดทำใบแจ้งหนี้ ใบโปรแกรม Open ERP
โดย Chidchanok ศ 18 ม.ค. 2019 1:55 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
7
ศ 18 ม.ค. 2019 1:55 pm โดย Chidchanok
คำสั่ง ปิดเครื่อง CentOS แบบต่างๆ ตั้งเวลาปิดเครื่อง
โดย mindphp ศ 18 ม.ค. 2019 12:24 pm บอร์ด Linux - Web Server
0
3
ศ 18 ม.ค. 2019 12:24 pm โดย mindphp
การจัดทำใบสั่งขาย ในโปรแกรม OpenERP
โดย Chidchanok ศ 18 ม.ค. 2019 11:55 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
15
ศ 18 ม.ค. 2019 11:55 am โดย Chidchanok
ชีวิตการทำงาน
โดย จันนุสรณ์ ดีแก่ ศ 18 ม.ค. 2019 11:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
23
ศ 18 ม.ค. 2019 11:25 am โดย จันนุสรณ์ ดีแก่
ขั้นตอนการสร้างเว็บบอร์ดย่อยภายใต้หมวดหมู่ สำหรับแอดมิน หรือผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ ศ 18 ม.ค. 2019 11:03 am บอร์ด phpBB user Guide Knowledge
0
40
ศ 18 ม.ค. 2019 11:03 am โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] FlatUI Smilies Extention ไอคอนแสดงอารมณ์เพิ่มสีสันแก่เว็บบอร์ด
โดย จันนุสรณ์ ดีแก่ ศ 18 ม.ค. 2019 10:23 am บอร์ด phpBB 3.1 Extension Review
0
33
ศ 18 ม.ค. 2019 10:23 am โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] SE Square Extension ไตล์โทนสีน้ำเงินอ่อนและฟ้าอ่อน
โดย จันนุสรณ์ ดีแก่ ศ 18 ม.ค. 2019 9:42 am บอร์ด phpBB 3.1 Extension Review
0
35
ศ 18 ม.ค. 2019 9:42 am โดย จันนุสรณ์ ดีแก่
สอบถามวิธีการเปิดสิทธ์ใช้งานใน google docs ค่ะ
โดย ณัฐกฤตา บุญญะฤทธิ์ ศ 18 ม.ค. 2019 9:34 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
46
ศ 18 ม.ค. 2019 10:17 am โดย ณัฐกฤตา บุญญะฤทธิ์