ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ลืมรหัส เบอร์เก่าเปลี่ยน ใช้งานhotmailไม่ได้
โดย Anonymous ส 14 ธ.ค. 2019 11:11 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
13
ส 14 ธ.ค. 2019 11:11 pm โดย บุคคลทั่วไป
วิธีการดึงข้อมูลปลั็กอินจาก field ที่ผู้ใช้กรอกในไฟล์ xml มาในไฟล์ php
โดย jamepiyawat ส 14 ธ.ค. 2019 5:56 pm บอร์ด Joomla Developing Knowledge
0
11
ส 14 ธ.ค. 2019 5:56 pm โดย jamepiyawat
VDO - MDfiles Version 1.3.46
โดย numtan5839 ส 14 ธ.ค. 2019 5:46 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
12
ส 14 ธ.ค. 2019 6:37 pm โดย numtan5839
สอบถามการเปลี่ยน templete บนเว็บ minndphp หน่อยค่ะ
โดย nnamfon.26 ส 14 ธ.ค. 2019 1:39 pm บอร์ด MindPHP News & Feedback
2
25
ส 14 ธ.ค. 2019 1:48 pm โดย nnamfon.26
VDO - Calculation program after including VAT
โดย numtan5839 ส 14 ธ.ค. 2019 10:27 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
9
ส 14 ธ.ค. 2019 11:09 am โดย thatsawan
งานประจำวันที่ 14 ธันวาคม 2562
โดย numtan5839 ส 14 ธ.ค. 2019 10:13 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
7
ส 14 ธ.ค. 2019 7:01 pm โดย numtan5839
วิธีการกำหนด css ให้กับ คลาสแบบ !important โดยใช้งาน JQuery
โดย Ittichai_chupol ศ 13 ธ.ค. 2019 5:53 pm บอร์ด Jquery & Ajax Knowledge
0
17
ศ 13 ธ.ค. 2019 5:53 pm โดย Ittichai_chupol
โปรแกรมคำนวณภาษีมูลค่าเพิ่มหลังรวม VAT
โดย prmindphp ศ 13 ธ.ค. 2019 5:31 pm บอร์ด MindPHP News & Feedback
0
16
ศ 13 ธ.ค. 2019 5:31 pm โดย prmindphp
กาลครั้งหนึ่ง ของโปรแกรมเมอร์ฝึกหัด ???
โดย chatee supasand ศ 13 ธ.ค. 2019 4:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
ศ 13 ธ.ค. 2019 4:03 pm โดย chatee supasand
โปรแกรมเมอร์ คนแรกของโลก คือใคร?
โดย noppadonsk ศ 13 ธ.ค. 2019 3:18 pm บอร์ด Share Knowledge
0
21
ศ 13 ธ.ค. 2019 3:18 pm โดย noppadonsk
RGB กับ CMYK ให้สีแตกต่างกันอย่างไร
โดย noppadonsk ศ 13 ธ.ค. 2019 3:01 pm บอร์ด Share Knowledge
0
9
ศ 13 ธ.ค. 2019 3:01 pm โดย noppadonsk
SECUMAIL เทคโนโลยีป้องกันการ Hack อีเมล
โดย noppadonsk ศ 13 ธ.ค. 2019 2:32 pm บอร์ด Share Knowledge
0
20
ศ 13 ธ.ค. 2019 2:32 pm โดย noppadonsk
VDO - Introducing to Plugin Content MChangelog
โดย numtan5839 ศ 13 ธ.ค. 2019 1:33 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
23
ส 14 ธ.ค. 2019 2:55 pm โดย mindphp
Teamviewer 15 ใช้งาน TeamViewer Pilot ได้แล้วบน PC
โดย chatee supasand ศ 13 ธ.ค. 2019 12:09 pm บอร์ด Microsoft Office Knowledge & line & Etc
1
21
ศ 13 ธ.ค. 2019 1:38 pm โดย rihankhan
VDO โปรแกรมคำนวณภาษีมูลค่าเพิ่มหลังรวม VAT
โดย numtan5839 ศ 13 ธ.ค. 2019 10:05 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
22
ส 14 ธ.ค. 2019 5:42 pm โดย mindphp
icon ธงภาษาไม่แสดง
โดย numtan5839 ศ 13 ธ.ค. 2019 9:48 am บอร์ด MindPHP News & Feedback
0
28
ศ 13 ธ.ค. 2019 9:48 am โดย numtan5839
งานประจำวันที่ 13 ธันวาคม 2562
โดย numtan5839 ศ 13 ธ.ค. 2019 9:27 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
26
ศ 13 ธ.ค. 2019 7:33 pm โดย numtan5839
งานประจำวันที่ 13 ธันวาคม 2562
โดย noppadonsk ศ 13 ธ.ค. 2019 9:03 am บอร์ด MT36 - นายนพดล สุชญากูล
14
49
ส 14 ธ.ค. 2019 11:57 am โดย jamepiyawat
Plugin Content MChangeLog ใน Joomla เป็นตัวช่วยให้ เพิ่มเนื้อหาที่มีการเปลี่ยนแปลงแบบ เพิ่มเนื้อหา อัพเดด fix ปัญหา
โดย prmindphp พฤ 12 ธ.ค. 2019 6:46 pm บอร์ด MindPHP News & Feedback
0
39
พฤ 12 ธ.ค. 2019 6:46 pm โดย prmindphp
วิธีการเขียน SQL สำหรับเปลี่ยน Collation เพื่อปรับเปลี่ยนการรองรับภาษา ใน ตารางฐานข้อมูล
โดย Ittichai_chupol พฤ 12 ธ.ค. 2019 4:17 pm บอร์ด SQL Knowledge
0
22
พฤ 12 ธ.ค. 2019 4:17 pm โดย Ittichai_chupol