แท็ก video
แท็ก video ช่วยให้เพิ่มวิดีโอบนหน้า HTML ได้
และยังสามารถควบคุมวิดีโอนี้ได้ด้วย
เส้นทางไปยังไฟล์วิดีโอถูกกำหนดผ่าน
แอตทริบิวต์ src หรือแท็กที่ซ้อนอยู่ภายใน source
หากคุณต้องการเห็นตัวเล่นสำหรับควบคุมการเล่น
วิดีโอ - ควรเพิ่มแอตทริบิวต์ controls
หากไม่มีคุณจะไม่เห็นอะไรเลย - ทั้งเสียงและภาพ
ก็จะไม่แสดงเช่นกัน
บางครั้งการวางวิดีโอไว้บนเว็บไซต์เองนั้น
ไม่สะดวกนัก (ตัวอย่างเช่น โฮสติ้งของคุณมี
ข้อจำกัดเกี่ยวกับขนาดของเว็บไซต์) ในกรณีนี้
สามารถอัพโหลดวิดีโอไปยัง YouTube และเชื่อมต่อ
โดยใช้แท็ก iframe
แอตทริบิวต์
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
src |
ระบุเส้นทางไปยังไฟล์วิดีโอ
แต่ควรใช้แท็ก source สำหรับสิ่งนี้จะดีกว่า
(ในกรณีนี้จะสามารถกำหนดวิดีโอในรูปแบบต่างๆ ได้)
|
preload |
ใช้สำหรับโหลดไฟล์วิดีโอพร้อมกันกับการโหลดหน้าเว็บไซต์
ค่าที่รับได้: none (ไม่โหลดไฟล์, ค่าเริ่มต้น),
metadata (โหลดเฉพาะข้อมูลบริการ: ระยะเวลาเสียง เป็นต้น),
auto (โหลดวิดีโอทั้งหมดเมื่อโหลดหน้า HTML)
|
autoplay |
เสียงจะเริ่มเล่นทันทีหลังจากโหลดหน้าเสร็จ
โดยการมีแอตทริบิวต์ preload จะถูกละเว้น
แอตทริบิวต์ที่ไม่มีค่า |
controls |
เพิ่มแผงควบคุมไปยังวิดีโอ
แอตทริบิวต์ที่ไม่มีค่า ค่าเริ่มต้น (หากไม่มีแอตทริบิวต์) จะไม่เพิ่มแผงควบคุม |
loop |
เล่นเสียงซ้ำใน "วง":
หลังจากจบจะเริ่มเล่นใหม่
แอตทริบิวต์ที่ไม่มีค่า ค่าเริ่มต้น (หากไม่มีแอตทริบิวต์) จะเล่นเพียง 1 ครั้ง
|
poster |
เส้นทางไปยังรูปภาพที่จะแสดง ขณะที่วิดีโอยังไม่พร้อมหรือไม่กำลังเล่น
หากไม่ได้ระบุแอตทริบิวต์ poster บราวเซอร์จะพยายามแสดงเฟรมแรกของวิดีโอ
|
height |
แอตทริบิวต์ height กำหนดความสูงของพื้นที่เล่นวิดีโอ (เป็นพิกเซล
หรือเปอร์เซ็นต์)
วิดีโอเองจะเปลี่ยนขนาดขึ้นหรือลง เพื่อปรับตามความสูงที่กำหนด
แต่สัดส่วนของมันจะไม่เปลี่ยนแปลง
ค่าเริ่มต้น: ความสูงมาจากพารามิเตอร์ของวิดีโอ หากค่าไม่พร้อมใช้งาน ค่าของแอตทริบิวต์ height
จะถูกกำหนดให้เท่ากับความสูงของรูปภาพจากแอตทริบิวต์ poster
หากไม่ได้กำหนด poster - ความสูง
จะถูกตั้งเป็น 150 พิกเซล
|
width |
แอตทริบิวต์ width กำหนดความกว้างของพื้นที่เล่นวิดีโอ (เป็นพิกเซล
หรือเปอร์เซ็นต์)
วิดีโอเองจะเปลี่ยนขนาดขึ้นหรือลง เพื่อปรับตามความกว้างที่กำหนด
แต่สัดส่วนของมันจะไม่เปลี่ยนแปลง
ค่าเริ่มต้น: ความกว้างมาจากพารามิเตอร์ของวิดีโอ หากค่าไม่พร้อมใช้งาน ค่าของแอตทริบิวต์ width
จะถูกกำหนดให้เท่ากับความกว้างของรูปภาพจากแอตทริบิวต์ poster
หากไม่ได้กำหนด poster - ความกว้าง
จะถูกตั้งเป็น 150 พิกเซล
|
ตัวอย่าง . ตัวเล่นบนหน้าเว็บไซต์
ลองเพิ่มตัวเล่นวิดีโอบนหน้าเว็บ
สำหรับเบราว์เซอร์ที่ไม่รองรับ
แท็ก video จะมีข้อความพิเศษ
เกี่ยวกับเรื่องนี้:
<video src="moovie.mp4" controls>
เบราว์เซอร์ของคุณไม่รองรับ video บน HTML5
</video>
ตัวอย่าง .
ลองเพิ่มแท็ก source
ให้กับแท็ก video:
<video>
<source src="moovie.mp4" controls>
เบราว์เซอร์ของคุณไม่รองรับ video บน HTML5
</video>
