แบบทดสอบก่อนเรียน
แบบทดสอบก่อนเรียน
การแทรกวีดีโอในเว็บเพจ
การเล่นไฟล์วิดีโอบนเว็บเพจ สามารถทำได้ง่าย ๆด้วยการำหนดแท็ก <video> โดยหลักการสำคัญคือ ต้องระบุว่าไฟล์ถูกเก็บไว้ที่ไหนเท่านั้้น ซึ่งรูปแบบการใช้แท็ก <video> ใน HTML5 มีรูปแบบพื้นฐานดังนี้
Tag
| ชื่อแท็ก | video |
| ตำแหน่งแท็ก | อยู่ภายในแท็ก <body>...</body> |
| รูปแบบการใช้แท็ก | <video src="url"></video> |
| แอตทริบิวต์ | src |
| ค่า value | url ตำแหน่งของรูปภาพ - ตำแหน่งที่อยู่ภายในเว็บไซต์ (src="vido.mp4") - ตำแหน่งรูปภาพที่อยู่เว็บไซต์อื่น (src="http://www.example.com/video.mp4") |
ตัวอย่างการใช้งาน
<body>
<video src="video.mp4"></video>
</body>
การแสดงผล
จากการแทรกวีดีโอลงในเว็บเพจจะเห็นภาพตัวอย่าง แต่วีดีโอไม่สามรถเล่นได้ จะต้องกำหนดรูปแบบการความคุมของวีดีโอก่อนถึงจะสามารถทำให้วีดีโอเล่นได้
วีดีโอ
การแทรกวีดีโอให้รองรับทุกเบราว์เซอร์
สิ่งสำคัญที่เราต้องคำนึงถึง เบราว์เซอร์แต่ละตัวรองรับไฟล์วีดีโอที่แตกต่างกันออกไปเราควเตรียมไฟล์วีดีโอให้ครบทุกฟอร์แมต เพื่อให้สามารถเล่นกับเบราว์เซอร์ได้ทุกตัว
Tag
| ชื่อแท็ก | source |
| ตำแหน่งแท็ก | อยู่ภายในแท็ก <video>...</video> |
| รูปแบบการใช้แท็ก | <video > <source src="url" type="video/mp4"> </video> |
| แอตทริบิวต์ | src |
| ค่า value | url ตำแหน่งของวีดีโอ - ตำแหน่งที่อยู่ภายในเว็บไซต์ (src="vido.mp4") - ตำแหน่งรูปภาพที่อยู่เว็บไซต์อื่น (src="http://www.example.com/video.mp4") type ชนิดวีดีโอ - video/mp4 - video/webm - video/ogg |
ตัวอย่างการใช้งาน
<body>
<video >
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
</body> <source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
การแสดงผล
จะเห็นได้ว่าเราสามารถแทรกวีดีโอพร้อมกันได้หลายรูปแบบพร้อมกัน ซึ่งเวลาเบราว์เซอร์ตรวจสอบเพื่อเล่นวีดีโอ จะตรวจสอบเริ่มจากบรรทัดแรกหรือ <source> ตัวแรก ถ้าหากไม่รองรับกับเบราว์เซอร์ ก็จะตรวจบรรทัดต่อไป
วีดีโอ
