ให้เรตสมาชิก: 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 (ควรใส่ทุกครั้ง)
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามเรื่อง การ link
โดย repee789 ส 01 ก.ย. 2007 8:46 pm บอร์ด Programming - PHP
1
1182
ส 01 ก.ย. 2007 10:13 pm โดย mindphp
มีปัญหาเรื่อง SESSION ครับ ใช้ที่หนึ่งได้ แต่อีกที่ไม่ได้
โดย kittija ส 01 ก.ย. 2007 1:45 am บอร์ด Programming - PHP
2
1380
ส 01 ก.ย. 2007 6:22 am โดย mindphp
Mysql+PHP ใช้เครื่อง Server Spec อะไรดีครับ
โดย kittija ศ 31 ส.ค. 2007 4:34 pm บอร์ด SQL - Database
9
4529
ส 01 ก.ย. 2007 6:14 am โดย mindphp
อยากทราบวิธีแก้ mysql ??? แต่ใช้ติดต่อฐานข้อมูลแบบ ADODB
โดย ty900 ศ 31 ส.ค. 2007 1:48 am บอร์ด Programming - PHP
12
2992
จ 03 ก.ย. 2007 12:48 am โดย ty900
สมมุติว่ามีข้อมูล 18 record ในDB จะแสดงเป็นสองคอมลันอย่างไร
โดย tonton พฤ 30 ส.ค. 2007 9:23 pm บอร์ด Programming - PHP
1
1187
ศ 31 ส.ค. 2007 6:15 pm โดย mindphp
ถามเรื่อง Database Server หน่อยคับ
โดย fujivara พฤ 30 ส.ค. 2007 9:13 pm บอร์ด SQL - Database
1
2121
ศ 31 ส.ค. 2007 6:17 pm โดย mindphp
phpbb หัวข้อกระทู้เป็นแบบนี้ แก้ไขยังไงครับ
โดย mr.busy พฤ 30 ส.ค. 2007 7:05 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
2004
พฤ 30 ส.ค. 2007 7:21 am โดย mindphp
อยากแสดงผลข้อมูลตามคอลัมที่ต้องการ
โดย tonton พฤ 30 ส.ค. 2007 5:27 am บอร์ด Programming - PHP
1
1229
พฤ 30 ส.ค. 2007 5:34 am โดย mindphp
ทำยังไงให้เวลาดึงข้อมูลจากdatabaseมาแสดงแล้วมันตัดบรรทัดให้
โดย fujivara พ 29 ส.ค. 2007 5:58 pm บอร์ด Programming - PHP
1
1671
พ 29 ส.ค. 2007 6:48 pm โดย mindphp
อยากกำหนด content type ใน body ของ e-mail ที่ส่งจาก php
โดย Ballz พ 29 ส.ค. 2007 8:51 am บอร์ด Programming - PHP
2
1712
พฤ 30 ส.ค. 2007 8:08 pm โดย Ballz
ถามเรื่องการทำให้มันขึ้นบรรทัดใหม่หน่อยคับ
โดย fujivara อ 28 ส.ค. 2007 8:21 pm บอร์ด Programming - PHP
1
1266
อ 28 ส.ค. 2007 9:00 pm โดย mindphp
อยากได้ข้อแนะนำเรื่อง ajax
โดย repee789 อ 28 ส.ค. 2007 5:52 pm บอร์ด Programming - PHP
1
1243
อ 28 ส.ค. 2007 6:40 pm โดย mindphp
อยากได้ โค้ด php ทำ อีคอมเมิร์ช อ่ะคับ
โดย hanibound_king จ 27 ส.ค. 2007 10:26 pm บอร์ด Programming - PHP
2
1564
อ 28 ส.ค. 2007 8:30 am โดย Kobsoft
อยากทราบ คำสั่ง php
โดย Sazami จ 27 ส.ค. 2007 7:24 pm บอร์ด Programming - PHP
2
1628
อ 28 ส.ค. 2007 8:27 am โดย Kobsoft
อยากได้แบบนี้ต้องทำไงครับ มีรูป
โดย sokissme อ 26 ส.ค. 2007 7:49 pm บอร์ด Programming - PHP
6
1657
จ 27 ส.ค. 2007 6:31 pm โดย sokissme
มือใหม่อยากรุ้
โดย signalll ส 25 ส.ค. 2007 4:57 pm บอร์ด Programming - PHP
1
1247
ส 25 ส.ค. 2007 8:10 pm โดย mindphp
ใช้ php เช็คสเป็คเครื่องได้มั๊ยครับ
โดย bankbonkbank ส 25 ส.ค. 2007 2:14 am บอร์ด Programming - PHP
5
1901
จ 27 ส.ค. 2007 7:20 am โดย mindphp
ถามเรื่อง คำสั่งปุ่ม back ครับ
โดย fujivara ศ 24 ส.ค. 2007 6:02 pm บอร์ด JavaScript & Jquery Ajax
1
5340
ส 25 ส.ค. 2007 8:14 pm โดย mindphp
ข้อมูลลงฐาน mySQL มี เครื่องหมาย ' และ \ จะแก้ไขอย่างไรดี
โดย chum พฤ 23 ส.ค. 2007 7:18 pm บอร์ด SQL - Database
1
2439
ศ 24 ส.ค. 2007 5:13 pm โดย mindphp
ถามหน่อยนะคะ เกี่ยวกับ list/menu
โดย ja_ooh พฤ 23 ส.ค. 2007 4:04 pm บอร์ด Programming - PHP
4
2025
อ 28 ส.ค. 2007 3:49 pm โดย ja_ooh