HTML5 วีดีโอ (Video) คืออะไร และใช้งานอย่างไร?

HTML5 วีดีโอ (Video)

ก่อนหน้านี้: HTML5 geopositioning

ถัดไป: HTML5 และเสียง (Audio)

เว็บไซต์หลายแห่งจะใช้ในการวิดีโอ. HTML5 ให้แสดงวิดีโอมาตรฐาน

ตรวจสอบเบราว์เซอร์ของคุณสนับสนุนวิดีโอ HTML5:

เว็บไซต์วิดีโอ

จนถึงขณะนี้ยังไม่ได้มีอยู่มีมาตรฐานที่มุ่งเป้าไปที่การแสดงผลวิดีโอบนหน้าเว็บ

วันนี้มากที่สุดวิดีโอผ่านทางปลั๊กอิน (เช่น Flash) ที่จะแสดง แต่ไม่ทุกคนมีเบราว์เซอร์ปลั๊กอินเดียวกัน

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

สนับสนุนเบราว์เซอร์

Internet Explorer 9 +, Firefox, Opera, Chrome, Safari และการสนับสนุนวิดีโอ <> องค์ประกอบ

หมายเหตุ: Internet Explorer 8 หรือรุ่นก่อนหน้า IE ไม่สนับสนุน <video> องค์ประกอบ

HTML5 (วิดีโอ) - วิธีการทำงาน

การแสดงวิดีโอใน HTML5 ทั้งหมดที่คุณต้องการคือ

ตัวอย่าง

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

ลอง»

<video> องค์ประกอบให้เล่นหยุดและปริมาณการควบคุมการควบคุมวิดีโอ

ในเวลาเดียวกัน <video> องค์ประกอบองค์ประกอบนอกจากนี้ยังมีคุณลักษณะสูงและความกว้างควบคุมขนาดของวิดีโอ. ถ้าคุณตั้งค่าความสูงและความกว้างของพื้นที่วิดีโอที่จำเป็นจะถูกเก็บรักษาไว้เมื่อโหลดหน้าเว็บ . หากคุณไม่ได้ตั้งค่าคุณสมบัติเหล่านี้เบราว์เซอร์ไม่ทราบขนาดของวิดีโอ, เบราว์เซอร์ที่คุณไม่สามารถจองพื้นที่เฉพาะเมื่อโหลดหน้าเว็บจะขึ้นอยู่กับการเปลี่ยนแปลงขนาดของภาพต้นฉบับ

<video> ระหว่าง </ วิดีโอ> แท็กและเนื้อหาแทรกไม่พร้อมที่จะสนับสนุนองค์ประกอบวิดีโอที่แสดงในเบราว์เซอร์

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

รูปแบบวิดีโอและการสนับสนุนเบราว์เซอร์

ปัจจุบัน <video> องค์ประกอบสนับสนุนสามรูปแบบวิดีโอ: MP4, WebM และ Ogg:

เบราว์เซอร์	MP4	WebM	Ogg
Internet Explorer	ใช่	NO	NO
โครเมียม	ใช่	ใช่	ใช่
Firefox	ใช่	ใช่	ใช่
การแข่งรถวิบาก	ใช่	NO	NO
อุปรากร	ใช่ (จากโอเปร่า 25 เป็นต้นไป)	ใช่	ใช่

MP4 = MPEG 4 ไฟล์ที่มีวิดีโอ H.264 และ AAC เข้ารหัสเสียง
ไฟล์ WebM = WebM กับวิดีโอ VP8 และ Vorbis เข้ารหัสการเข้ารหัสเสียง
OGG ไฟล์ = Ogg Theora กับวิดีโอและเสียงที่เข้ารหัส Vorbis เข้ารหัส

รูปแบบวิดีโอ

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 วิดีโอ <> - การควบคุมการใช้ DOM

HTML5 วิดีโอ <> และ <เสียง> องค์ประกอบนอกจากนี้ยังมีวิธีการคุณสมบัติและเหตุการณ์

วิธีการวิดีโอ <> และ <เสียง> องค์ประกอบคุณสมบัติและเหตุการณ์สามารถควบคุมการใช้งานจาวาสคริปต์

ซึ่งวิธีการที่ใช้ในการเล่นหยุดและโหลดและอื่น ๆ ประเด็นคุณสมบัติ (เช่นระยะเวลาการปรับระดับเสียง ฯลฯ ) สามารถอ่านหรือการตั้งค่า ประเด็นเหตุการณ์ DOM สามารถแจ้งให้ทราบว่าการพูด, <video> องค์ประกอบเริ่มเล่นหยุดชั่วคราวหยุดและอื่น ๆ

ตัวอย่างของวิธีการที่ง่ายเราแสดงให้เห็นถึงวิธีการใช้ <video> องค์ประกอบการอ่านและการตั้งค่าคุณสมบัติและวิธีการเรียกวิธี