แท็ก HTML5 <Video> รองรับ 3 รูปแบบวิดีโอที่ใช้กันทั่วไป:
1. OGG = ไฟล์ OGG พร้อมการเข้ารหัสวิดีโอ Theora และการเข้ารหัสเสียง VORBIS;
2. MPEG4 = ไฟล์ MPEG 4 พร้อมการเข้ารหัสวิดีโอ H.264 และการเข้ารหัสเสียง AAC;
3. webm = ไฟล์ webm พร้อมการเข้ารหัสวิดีโอ VP8 และการเข้ารหัสเสียง Vorbis
ทุกวันนี้เบราว์เซอร์กระแสหลักมีการสนับสนุนรูปแบบวิดีโอที่แตกต่างกัน ฉันเชื่อว่าวัน HTML5 ได้รับการปล่อยตัวอย่างเป็นทางการจะสนับสนุนรูปแบบวิดีโอมากขึ้นนำผลประโยชน์มากมายให้กับนักพัฒนาและผู้ใช้
มาพูดคุยเกี่ยวกับการใช้วิดีโอแท็กวิดีโอ HTML5 หากคุณต้องการแสดงวิดีโอในเบราว์เซอร์สิ่งที่คุณต้องมีคือการคัดลอกรหัสต่อไปนี้:
<video src = movie.ogg width = 320 ความสูง = 240 controls = controls>
เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ
</video>
คุณสมบัติการควบคุมสำหรับการเพิ่มการเล่นการหยุดชั่วคราวและการควบคุมระดับเสียง นอกจากนี้ยังเป็นความคิดที่ดีที่จะรวมคุณสมบัติความกว้างและความสูง เนื้อหาที่แทรกระหว่าง <video> และ </video> จะแสดงโดยเบราว์เซอร์ที่ไม่รองรับองค์ประกอบวิดีโอ
รหัสด้านบนใช้ไฟล์ OGG ที่ใช้งานได้กับ Firefox, Opera และ Google Chrome เพื่อให้แน่ใจว่าเหมาะสำหรับเบราว์เซอร์ Safari ไฟล์วิดีโอจะต้องอยู่ในรูปแบบ MPEG4 IE8 ไม่รองรับแท็ก HTML5 <Video> และ IE9 รองรับแท็กนี้ แต่ต้องใช้รูปแบบ MPEG4 ด้วย
องค์ประกอบวิดีโออนุญาตให้มีองค์ประกอบหลายอย่าง องค์ประกอบต้นทางสามารถเชื่อมโยงไฟล์วิดีโอในรูปแบบที่แตกต่างกัน เบราว์เซอร์ตรวจจับและใช้รูปแบบที่เป็นที่รู้จักเป็นครั้งแรกรหัสมีดังนี้:
<ความกว้างวิดีโอ = 320 ความสูง = 240 ตัวควบคุม = การควบคุม>
<Source Src = movie.ogg type = video/ogg>
<Source SRC = Movie.mp4 type = video/mp4>
เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ
</video>
ต่อไปนี้เป็นคุณสมบัติทั่วไปของแท็ก <วิดีโอ>:
| คุณสมบัติ | ค่า | อธิบาย |
เล่นอัตโนมัติ | เล่นอัตโนมัติ | หากคุณสมบัตินี้ปรากฏขึ้นวิดีโอจะเล่นทันทีหลังจากพร้อม |
การควบคุม | การควบคุม | หากคุณสมบัตินี้ปรากฏขึ้นตัวควบคุมจะปรากฏขึ้นต่อผู้ใช้เช่นปุ่มเล่น |
ความสูง | พิกเซล | ตั้งค่าความสูงของเครื่องเล่นวิดีโอ |
วง | วง | หากคุณสมบัตินี้ปรากฏขึ้นการเล่นจะเริ่มขึ้นอีกครั้งเมื่อไฟล์สื่อเล่นเสร็จแล้ว |
โหลดล่วงหน้า | โหลดล่วงหน้า | หากคุณสมบัตินี้ปรากฏขึ้นวิดีโอจะถูกโหลดเมื่อโหลดหน้าเว็บและพร้อมที่จะเล่น หากใช้การเล่นอัตโนมัติคุณสมบัตินี้จะถูกละเว้น |
SRC | url | URL ของวิดีโอที่จะเล่น |
ความกว้าง | พิกเซล | ตั้งค่าความกว้างของเครื่องเล่นวิดีโอ |
การเกิดขึ้นของวิดีโอแท็กวิดีโอ HTML5 ได้ปรับปรุงประสบการณ์ของผู้ใช้บนเว็บอย่างมากและจะทำให้ผู้ใช้สามารถเรียกดูและใช้งานได้อย่างสะดวกยิ่งขึ้น