ความคิดเห็น: วิดีโอ HTML เหมาะสำหรับ HTML 5+ ใช้เพื่อกำหนดสื่อการสตรีมวิดีโอออนไลน์ นี่คือการแนะนำสั้น ๆ ซึ่งสะดวกสำหรับเพื่อนที่ต้องการ
HTML <video> เหมาะสำหรับ HTML 5+ ซึ่งกำหนดวิดีโอสตรีมมิ่งสำหรับการดูออนไลน์
<video src = "http://www.vevb.com/movie.ogg" controls = "controls">
นี่คือข้อความแสดงความคิดเห็นหากไม่สามารถรองรับ HTML 5 เบราว์เซอร์จะแสดงข้อความที่นี่ หากได้รับการสนับสนุนวิดีโอจะปรากฏขึ้นโดยตรงและข้อความจะถูกละเว้น
</video>
ใน HTML 4 และก่อนหน้านี้หากคุณต้องการฝังวิดีโอออนไลน์ในหน้าเว็บคุณจำเป็นต้องใช้สตรีมวิดีโอแฟลช ด้วยการใช้แท็ก <jobick> และ <embed> คุณสามารถเล่น SWF, FLV และไฟล์วิดีโอรูปแบบอื่น ๆ ผ่านเบราว์เซอร์ แต่หลักฐานคือเบราว์เซอร์ต้องติดตั้งปลั๊กอินของบุคคลที่สาม: Adobe Flash Player สมาร์ทโฟนและไอแพดที่ทันสมัยโดยทั่วไปไม่สามารถรองรับแฟลชได้ดังนั้นพวกเขาจึงไม่สามารถเรียกดูวิดีโอบนเว็บได้ และ HTML 5 ได้เปลี่ยนข้อเท็จจริงนี้นักพัฒนาเว็บสามารถโหลดไฟล์วิดีโอได้อย่างง่ายดายโดยใช้แท็ก <video> โดยไม่ต้องใช้ปลั๊กอินของบุคคลที่สาม
คำอธิบายค่าคุณสมบัติ
Autoplayautoplay หากคุณสมบัตินี้ปรากฏขึ้นวิดีโอจะเล่นทันทีหลังจากพร้อม
ControlScontrols หากคุณสมบัตินี้ปรากฏขึ้นการควบคุมจะปรากฏขึ้นต่อผู้ใช้เช่นปุ่มเล่น
ค่าพิกเซลความสูงตั้งค่าความสูงของเครื่องเล่นวิดีโอ
หาก Looploop การเล่นจะเริ่มขึ้นอีกครั้งเมื่อไฟล์สื่อเล่นเสร็จแล้ว
preloadauto/meta/none ระบุว่าจะโหลดวิดีโอล่วงหน้าค่าที่เป็นไปได้:
อัตโนมัติ - โหลดวิดีโอทั้งหมดหลังจากโหลดหน้าเว็บ
Meta - เมตาดาต้าเท่านั้นที่โหลดหลังจากโหลดหน้าเว็บ
ไม่มี - วิดีโอไม่ได้โหลดหลังจากโหลดหน้าเว็บ
* URL ของวิดีโอที่จะเล่นโดยที่อยู่วิดีโอ SRC ขอแนะนำให้ใช้ที่อยู่สัมบูรณ์
ค่าพิกเซลความกว้างตั้งค่าความกว้างของเครื่องเล่นวิดีโอ
วิธีการเขียนแท็กวิดีโอที่เข้ากันได้?
เนื่องจากเบราว์เซอร์เก่าและ Internet Explorer ไม่รองรับองค์ประกอบ <วิดีโอ> เราต้องหาวิธีแก้ปัญหาสำหรับเบราว์เซอร์เหล่านี้ที่รองรับไฟล์แฟลช น่าเสียดายเช่น HTML 5 Audio รูปแบบไฟล์ที่เกี่ยวข้องในวิดีโอไม่ได้รับการสนับสนุนใน Firefox และ Safari/Chrome ดังนั้นหากคุณต้องการใช้วิดีโอ HTML 5 ในเวลานี้คุณต้องสร้างวิดีโอสามเวอร์ชัน Ogg, MP4, FLV/SWF
<การควบคุมวิดีโอ>
<!-ตาม Firefox->>
<ต้นทาง src = "http://www.vevb.com/ movie.ogg" type = "video/ogg"/>
<!-เข้ากันได้กับ Safari/Chrome->
<ต้นทาง src = "http://www.vevb.com/ movie.mp4" type = "video/mp4"/>
<!-หากเบราว์เซอร์ไม่รองรับแท็กวิดีโอให้ใช้แฟลช->
<ฝัง src = "http://www.vevb.com/ movie.swf" type = "แอปพลิเคชัน/x-shockwave-flash"
Width = "320" อนุญาตให้ใช้งาน accriptAccess = "เสมอ" lewalfullscreen = "true"> </embed>
</video>