วิธีการแสดงวิดีโอใน HTML5? การสาธิตการเล่นวิดีโอ HTML5

ความคิดเห็น: วิดีโอส่วนใหญ่จะแสดงผ่านปลั๊กอิน (เช่นแฟลช) อย่างไรก็ตามเบราว์เซอร์บางอย่างไม่ได้มีปลั๊กอินเดียวกัน HTML5 ระบุวิธีมาตรฐานในการรวมวิดีโอผ่านองค์ประกอบวิดีโอซึ่งสามารถใช้ในการเล่นวิดีโอให้เสร็จสมบูรณ์

HTML5 ระบุวิธีมาตรฐานในการรวมวิดีโอผ่านองค์ประกอบวิดีโอ

ใน HTML5 องค์ประกอบวิดีโอปัจจุบันรองรับไฟล์วิดีโอสามรูปแบบ

1.OGG = ไฟล์ OGG พร้อมการเข้ารหัสวิดีโอ TheORA และการเข้ารหัสเสียง VORBIS

2.MPEG4 = ไฟล์ MPEG 4 พร้อมการเข้ารหัสวิดีโอ H.264 และการเข้ารหัสเสียง AAC

3.webm = ไฟล์ webm พร้อมการเข้ารหัสวิดีโอ VP8 และการเข้ารหัสเสียง Vorbis

ดังนั้นจะแสดงวิดีโอใน HTML5 ได้อย่างไร? ตัวอย่างมีดังนี้:

<video src = "demo.mp4" controls = "ตัวควบคุม"> เบราว์เซอร์ของคุณไม่รองรับรูปแบบวิดีโอนี้ </video>

โอเคเรามาอธิบายความหมายของแต่ละแอตทริบิวต์ในองค์ประกอบวิดีโอ ในหมู่พวกเขาจะไม่อธิบายความกว้างและความสูง เราพูดถึงการควบคุมเป็นหลัก ตามชื่อที่แนะนำการควบคุมคือการควบคุมฮ่าฮ่าพวกเขาเป็นตัวควบคุมเช่นการเล่นวิดีโอการหยุดระดับเสียง ฯลฯ อักขระจีนที่แทรกอยู่ตรงกลางขององค์ประกอบวิดีโอคุณต้องรู้ว่าพวกเขาฉลาดและพวกเขาแจ้งให้ผู้ใช้ทราบว่าเบราว์เซอร์ไม่สนับสนุนการใช้รูปแบบวิดีโอ

ควรสังเกตว่าเพื่อให้แน่ใจว่าเหมาะสำหรับเบราว์เซอร์ Safari ไฟล์วิดีโอจะต้องเป็นประเภท MP4 วิดีโอรูปแบบ OGG เหมาะสำหรับเบราว์เซอร์ Firefox, Opera และ Chrome Internet Explorer 8 ไม่รองรับองค์ประกอบวิดีโอ ใน IE 9 มีการสนับสนุนองค์ประกอบวิดีโอที่ใช้ MPEG4

แน่นอนถ้าเราไม่แน่ใจว่ารูปแบบของวิดีโอเบราว์เซอร์ของเรารองรับเราสามารถตรวจสอบได้ก่อน วิธีการตรวจจับมีอยู่ในโพสต์บล็อกอื่น หากคุณสนใจคุณสามารถตรวจสอบได้ หากคุณไม่ต้องการลำบากคุณควรทำอย่างไร เราสามารถทำได้:

<video controls = "controls">

<Source Src = "Movie.ogg" type = "video/ogg">

<Source Src = "Movie.mp4" type = "video/mp4">

เบราว์เซอร์ของคุณไม่รองรับรูปแบบวิดีโอนี้

</video>

องค์ประกอบวิดีโออนุญาตให้มีองค์ประกอบหลายอย่าง องค์ประกอบต้นทางสามารถเชื่อมโยงไฟล์วิดีโอที่แตกต่างกัน เบราว์เซอร์จะใช้รูปแบบที่เป็นที่รู้จักเป็นครั้งแรกดังนั้นเราเพียงแค่ต้องเตรียมวิดีโออีกสองสามรายการในรูปแบบที่แตกต่างกัน

ต่อไปเราจะแนะนำคุณสมบัติของแท็กวิดีโอหลายรายการ

1.Autoplay: คุณสมบัตินี้ปรากฏว่าวิดีโอจะเล่นโดยอัตโนมัติเมื่อพร้อม การใช้งาน: autoplay = autoplay

2. การควบคุม: คุณสมบัตินี้ปรากฏขึ้นหมายความว่าผู้ใช้จะแสดงพร้อมตัวควบคุมเช่นปุ่มเล่น ฯลฯ การใช้งาน: ตัวควบคุม = การควบคุม

3.Height: ตั้งค่าความสูง

4. ความกว้าง: ตั้งค่าความกว้าง

5.loop: การเล่นซ้ำอัตโนมัติการใช้งาน: loop = loop

6. การโหลด: วิดีโอถูกโหลดและพร้อมที่จะเล่นเมื่อโหลดหน้าเว็บ การใช้งาน: preload = auto

อัตโนมัติ - โหลดวิดีโอทั้งหมดหลังจากโหลดหน้าเว็บ

Meta - เมตาดาต้าเท่านั้นที่โหลดหลังจากโหลดหน้าเว็บ

ไม่มี - วิดีโอไม่ได้โหลดหลังจากโหลดหน้าเว็บ

หมายเหตุ: หากใช้การเล่นอัตโนมัติให้เพิกเฉยต่อการโหลดล่วงหน้า

7.SRC: URL ในการเล่นวิดีโอ