ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากทราบวิธีการที่ที่จะส่งค่าเมนู tools ไปเเสดงบน part way ของ phpbb
โดย Ittichai_chupol อ 05 พ.ย. 2019 10:35 am บอร์ด Programming - PHP
1
23
อ 05 พ.ย. 2019 10:38 am โดย thatsawan
งานประจำวันที่ 5 พฤศจิกายน 2562
โดย numtan5839 อ 05 พ.ย. 2019 10:13 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
12
อ 05 พ.ย. 2019 6:04 pm โดย numtan5839
สอบถามการตั้งค่าใบปริ้นปะหน้าซองในระบบERP ให้มีเลขที่สาขาย่อย ต้องทำยังไงคะ
โดย nnamfon.26 อ 05 พ.ย. 2019 10:03 am บอร์ด OpenERP - MD-ERP (Main)
3
11
พฤ 07 พ.ย. 2019 6:35 pm โดย mindphp
เครื่องวัดอุณหภูมิร่างกายสำหรับวัดไข้
โดย LEG อ 05 พ.ย. 2019 9:58 am บอร์ด Share Knowledge
0
14
อ 05 พ.ย. 2019 9:58 am โดย LEG
insert ข้อมูล แบบ array ลงฐานข้อมูล
โดย bankjittapol จ 04 พ.ย. 2019 11:27 pm บอร์ด PHP Knowledge
0
41
จ 04 พ.ย. 2019 11:27 pm โดย bankjittapol
การสร้าง foreign key ใน MySQL ด้วย phpmyadmin สำหรับ ตารางที่เป็น innodb
โดย bankjittapol จ 04 พ.ย. 2019 10:57 pm บอร์ด SQL Knowledge
1
500
อ 05 พ.ย. 2019 3:19 am โดย mindphp
4 กลยุทธ์ที่จะช่วยให้ธุรกิจประสบผลสำเร็จ (4PS)
โดย numtan5839 จ 04 พ.ย. 2019 5:54 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
55
พ 06 พ.ย. 2019 2:33 pm โดย numtan5839
ทำให้ช่องทั้งสองขึ้นเป็นปีให้เลือกได้ทั้
โดย mstsksmstsks จ 04 พ.ย. 2019 5:16 pm บอร์ด HTML CSS
1
57
จ 04 พ.ย. 2019 5:17 pm โดย mstsksmstsks
6 จุดเช็กอินในเชียงใหม่ หน้าหนาวนี้ ต้องไปเยือน
โดย Meygrand จ 04 พ.ย. 2019 4:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
จ 04 พ.ย. 2019 4:46 pm โดย Meygrand
ทดสอบ
โดย mindphp จ 04 พ.ย. 2019 4:40 pm บอร์ด Programming - PHP
0
70
จ 04 พ.ย. 2019 4:40 pm โดย mindphp
แหล่งท่องเที่ยวในจังหวัดสุพรรณบุรี
โดย numtan5839 จ 04 พ.ย. 2019 4:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
66
พ 06 พ.ย. 2019 2:36 pm โดย numtan5839
การสร้างปีภาษีสำหรับการบัญทึกบัญชี
โดย nnamfon.26 จ 04 พ.ย. 2019 3:36 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
24
จ 04 พ.ย. 2019 3:36 pm โดย nnamfon.26
รวมรายการลดหย่อนภาษี ปี 62 แค่วางแผนให้ดี ก็มีเงินเหลือแน่นอน!
โดย promotion จ 04 พ.ย. 2019 3:35 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
31
จ 04 พ.ย. 2019 3:35 pm โดย promotion
อยากทราบวิธีการส่งค่าเมนู ไปแสดงที่ part way ของ phpbb
โดย Ittichai_chupol จ 04 พ.ย. 2019 3:02 pm บอร์ด Programming - PHP
1
27
จ 04 พ.ย. 2019 3:09 pm โดย thatsawan
วิธีการใช้ textwarp เพื่อทำการนำข้อความที่ยาวเกินไปมาขึ้นบรรทัดใหม่
โดย jirawoot จ 04 พ.ย. 2019 2:57 pm บอร์ด Python Knowledge
0
45
จ 04 พ.ย. 2019 2:57 pm โดย jirawoot
ต้องการ เลือก ข้อมูลใน select tag แล้ว block เปลี่ยนตำแหน่งไปตามนั้น
โดย bankjittapol จ 04 พ.ย. 2019 11:51 am บอร์ด JavaScript & Jquery Ajax
1
53
จ 04 พ.ย. 2019 12:02 pm โดย tsukasaz
note
โดย numtan5839 จ 04 พ.ย. 2019 11:21 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
5
47
อ 12 พ.ย. 2019 7:49 pm โดย numtan5839
list ความรู้ที่มี ว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย numtan5839 จ 04 พ.ย. 2019 11:15 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
42
จ 04 พ.ย. 2019 7:41 pm โดย numtan5839
Work's on Hand ตรีเนตร บูรณโพธิ์ทอง M097
โดย numtan5839 จ 04 พ.ย. 2019 11:09 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
16
จ 11 พ.ย. 2019 12:32 pm โดย numtan5839
เปลี่ยนภาษา webboard mindphp
โดย numtan5839 จ 04 พ.ย. 2019 10:58 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
111
จ 04 พ.ย. 2019 11:23 am โดย numtan5839