现在如果要在页面中使用วิดีโอ标签， 需要考虑三种情况， 支持支持 Ogg theora 或者 VP8 （如果这玩意儿没出事的话） 的（ 的（ Opera、 Mozilla、 chrome）， 支持 h.264 的（ Safari、 IE 9、、、、 Chrome) ไม่รองรับ (เช่น 6, 7, 8) ลองเข้าใจวิดีโอ HTML 5 จากระดับเทคนิครวมถึงการใช้แท็กวิดีโอคุณลักษณะของสื่อและวิธีการที่วัตถุวิดีโอสามารถใช้และกิจกรรมของสื่อได้
การใช้ฉลากวิดีโอแท็กวิดีโอประกอบด้วย SRC, โปสเตอร์, preload, การเล่นอัตโนมัติ, ลูป, การควบคุม, ความกว้าง, ความสูงและแอตทริบิวต์อื่น ๆ รวมถึงฉลาก <Source> ที่ใช้ภายใน นอกเหนือจากฉลาก <source> แท็กวิดีโอยังสามารถรวมเนื้อหาที่ส่งคืนเมื่อวิดีโอที่ระบุไม่สามารถเล่นได้
(1) แอตทริบิวต์ SRC และแอตทริบิวต์ Poserคุณนึกภาพได้ไหมว่าแอตทริบิวต์ SRC ใช้ทำอะไร เช่นเดียวกับฉลาก <IMG> แอตทริบิวต์นี้ใช้เพื่อระบุที่อยู่ของวิดีโอ แอตทริบิวต์โปสเตอร์ใช้เพื่อระบุรูปภาพการแสดง (ไดอะแกรมตัวอย่าง) เมื่อข้อมูลวิดีโอปัจจุบันไม่ถูกต้อง ข้อมูลวิดีโอที่ไม่ถูกต้องอาจเป็นไปได้ว่าวิดีโอกำลังถูกโหลดซึ่งอาจเป็นข้อผิดพลาดของที่อยู่วิดีโอ
<video width = 658 ความสูง = 444 src = http: //www.youname.com/images/first.mp4 โปสเตอร์ = http: //www.youname.com/images/first.png toplay> </video>(2) แอตทริบิวต์ล่วงหน้า
แอตทริบิวต์นี้สามารถเข้าใจได้ผ่านชื่อ มีสามค่าที่เป็นตัวเลือก: ไม่มีข้อมูลเมตา, อัตโนมัติ หากไม่ได้ใช้แอตทริบิวต์นี้ค่าเริ่มต้นคืออัตโนมัติ
<video width = 658 ความสูง = 444 src = http: //www.youname.com/images/first.mp4 โปสเตอร์ = http: //www.youname.com/images/first.png toplay preload = ไม่มี> </video >
ไม่มี: ไม่มีการโหลดล่วงหน้า การใช้ค่าแอตทริบิวต์นี้อาจเป็นว่าผู้ผลิตหน้าเชื่อว่าผู้ใช้ไม่คาดหวังวิดีโอนี้หรือลดคำขอ HTTP
ข้อมูลเมตา: โหลดก่อนบางส่วน การใช้ค่าแอตทริบิวต์นี้ผู้ผลิตหน้าเชื่อว่าผู้ใช้ไม่ได้คาดหวังวิดีโอนี้ แต่ให้ข้อมูลเมตาบางอย่างแก่ผู้ใช้ (รวมถึงขนาดเฟรมแรกรายการติดตามระยะเวลา ฯลฯ )
อัตโนมัติ: โหลดล่วงหน้าทั้งหมด
(3) แอตทริบิวต์การเล่นอัตโนมัติคุณลักษณะอื่นที่ขึ้นอยู่กับชื่อรู้วัตถุประสงค์ แอตทริบิวต์ Autoplay ใช้เพื่อตั้งค่าวิดีโอว่าวิดีโอนั้นเล่นโดยอัตโนมัติหรือไม่ซึ่งเป็นแอตทริบิวต์บูลีน เมื่อปรากฏขึ้นก็หมายความว่าการเล่นโดยอัตโนมัติซึ่งหมายความว่ามันไม่ได้เล่น
<video width = 658 ความสูง = 444 src = http: //www.youname.com/images/first.mp4 โปสเตอร์ = http: //www.youname.com/images/first.png toplay preload = ไม่มี> </video >
โปรดทราบว่าค่าของแอตทริบิวต์บูลีนใน HTML นั้นไม่เป็นความจริงและเป็นเท็จ การใช้งานที่ถูกต้องคือการใช้แอตทริบิวต์นี้ในฉลากระบุว่าในเวลานี้แอตทริบิวต์นั้นไร้ค่าหรือค่าเท่ากับชื่อของเขา )); หากแอตทริบิวต์นี้ไม่ได้ใช้ในฉลากมันหมายถึงเท็จ (การเล่นอัตโนมัติคือ <วิดีโอ />)
(4) แอตทริบิวต์ลูป<ความกว้างวิดีโอ = 658 ความสูง = 444 src = http: //www.youname.com/images/first.mp4 โปสเตอร์ = http: //www.youname.com/images/first.png toplay loop = loop> </video >
เป็นที่ชัดเจนอย่างรวดเร็วว่าแอตทริบิวต์ลูปยังใช้เพื่อระบุว่าวิดีโอนั้นหมุนเวียนหรือไม่ซึ่งเป็นแอตทริบิวต์บูลีน
(5) แอตทริบิวต์ควบคุม<video width = 658 ความสูง = 444 src = http: //www.youname.com/images/first.mp4 โปสเตอร์ = http: //www.youname.com/images/first.png toplay preload = ไม่มีการควบคุม = การควบคุม> </video>
แอตทริบิวต์การควบคุมใช้เพื่อระบุเบราว์เซอร์เพื่อระบุว่าผู้ผลิตหน้าไม่ได้ใช้สคริปต์เพื่อสร้างคอนโทรลเลอร์การเล่นและเบราว์เซอร์จำเป็นต้องใช้แถบควบคุมการเล่น
แถบควบคุมจะต้องรวมถึงการควบคุมการเล่นชั่วคราวการควบคุมความคืบหน้าการควบคุมระดับเสียงและอื่น ๆ
แถบควบคุมการเล่นเริ่มต้นของแต่ละเบราว์เซอร์นั้นแตกต่างกันในอินเทอร์เฟซ เนื่องจากปัญหาแปลก ๆ ของเบราว์เซอร์ของฉันฉลากวิดีโอของ Firefox และ Safari จึงไม่ปกติดังนั้นทั้งสองจึงสามารถค้นหาภาพหน้าจอออนไลน์ได้เท่านั้น
(6) แอตทริบิวต์ความกว้างและแอตทริบิวต์ความสูงแอตทริบิวต์สากลเป็นของฉลากดังนั้นจึงไม่จำเป็นต้องพูดเรื่องนี้
(7) แท็กต้นทาง<video width = 658 ความสูง = 444 โปสเตอร์ = http://www.youname.com/images/firs/png autoplay = autoplay preload = ไม่มีการควบคุม> <แหล่งที่มา s> <แหล่งที่มา s rc = http: //www.youname com/images/firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </video>
ฉลากแหล่งที่มาใช้เพื่อระบุตัวเลือกหลายตัว (เนื่องจากแท็กเสียงสามารถรวมฉลากนี้ได้ดังนั้นให้ใช้สื่อแทนวิดีโอ) (เบราว์เซอร์สามารถเลือกได้ในตอนท้ายเท่านั้น) ใช้เมื่อใช้แอตทริบิวต์ SRC
เบราว์เซอร์สามารถตรวจจับได้ว่าวิดีโอที่ระบุโดยฉลากแหล่งที่มาสามารถเล่นได้หรือไม่ (บางทีรูปแบบวิดีโอไม่รองรับวิดีโอไม่ได้มีอยู่ ฯลฯ ) วิธีนี้ส่วนใหญ่ใช้สำหรับเบราว์เซอร์ที่แตกต่างกัน แท็กต้นทางไม่ได้หมายถึงความหมายใด ๆ และไม่สามารถปรากฏตัวเพียงอย่างเดียว
ฉลากนี้มีสามแอตทริบิวต์: SRC, ประเภทและสื่อ
แอตทริบิวต์ SRC: ใช้เพื่อระบุที่อยู่ของสื่อเช่นเดียวกับฉลากวิดีโอ
ประเภทแอตทริบิวต์: มันถูกใช้เพื่ออธิบายประเภทของแอตทริบิวต์ SRC ที่ระบุไว้ช่วยให้เบราว์เซอร์สามารถตรวจสอบได้ว่าจะสนับสนุนรูปแบบสื่อดังกล่าวก่อนที่จะได้รับสื่อหรือไม่
คุณลักษณะของสื่อ: มันถูกใช้เพื่ออธิบายว่าสื่อที่ใช้ในสื่อและค่าเริ่มต้นคือทั้งหมดเมื่อไม่ได้ตั้งค่าซึ่งหมายถึงการสนับสนุนสื่อทั้งหมด คุณนึกถึงแอตทริบิวต์สื่อของฉลาก <style> หรือไม่? เหมือนกัน
(8) ตัวอย่างที่สมบูรณ์<video width = 658 ความสูง = 444 โปสเตอร์ = http://www.youname.com/images/firs/png autoplay = autoplay preload = ไม่มีการควบคุม> <แหล่งที่มา s> <แหล่งที่มา s rc = http: //www.youname com/images/firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </video>
รหัสนี้กำหนดวิดีโอในหน้า พิกเซลความสูง 240 พิกเซล
เลือกที่อยู่วิดีโอครั้งแรกของค่ายเพลงแรกคือค่าแอตทริบิวต์ SRC หมวดหมู่วิดีโอคือ Ogg Video ตัวถอดรหัสการเข้ารหัสวิดีโอคือ Theora ตัวถอดรหัสการเข้ารหัสเสียงคือ Vorbis สื่อการเล่นคือจอแสดงผล ที่อยู่ไม่ใช่ที่อยู่วิดีโอจะไม่เหนื่อยอีกต่อไปอีกต่อไป หากคุณต้องเข้ากันได้กับ IE คุณสามารถเพิ่มชุดฉลากของเครื่องเล่นแฟลชหลังจากฉลากแหล่งที่มาสุดท้ายหรือใช้รหัส JavaScript เล็กน้อย
สรุปข้างต้นเป็นบทสรุปของวิธีการแทรกวิดีโอในเว็บเพจ HTML ที่ Xiaobian แนะนำ ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!