วิดีโอ HTML5

HTML ตัวอย่างวิดีโอ มารยาทของ บิ๊กบั๊กบันนี่

วิดีโอ HTML5 คืออะไร?

ข้อกำหนด HTML5 แนะนำองค์ประกอบวิดีโอเพื่อวัตถุประสงค์ในการเล่นวิดีโอบางส่วนเปลี่ยนองค์ประกอบวัตถุ

วิดีโอ HTML5 มีไว้โดยผู้สร้างที่จะกลายเป็นวิธีมาตรฐานใหม่ที่จะแสดงวิดีโอบนเว็บแทนก่อนหน้านี้พฤตินัยมาตรฐานของการใช้ปลั๊กอิน Adobe Flash กรรมสิทธิ์ แต่ยอมรับต้นถูกขัดขวางโดยขาดของข้อตกลงเป็นที่เข้ารหัสวิดีโอรูปแบบ และรูปแบบการเข้ารหัสเสียงควรได้รับการสนับสนุนในเว็บเบราเซอร์

การเล่นวิดีโอในรูปแบบ HTML

ก่อน HTML5 มีมาตรฐานสำหรับการแสดงวิดีโอบนหน้าเว็บไม่มี

ก่อน HTML5 วิดีโอสามารถเล่นเฉพาะกับ plug-in (like flash)

HTML5 <video> องค์ประกอบระบุวิธีมาตรฐานในการฝังวิดีโอในหน้าเว็บ

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

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ <video> องค์ประกอบ

ธาตุ
<video>	4.0	9.0	3.5	4.0	10.5

ใช้ HTML <video> ธาตุ

ในการแสดงวิดีโอในรูปแบบ HTML ให้ใช้ <video> องค์ประกอบ:

ตัวอย่าง

<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

ลองตัวเอง»

มันทำงานอย่างไร

controls แอตทริบิวต์เพิ่มการควบคุมวิดีโอเช่นเล่นหยุดและปริมาณ

มันเป็นความคิดที่ดีที่จะเสมอรวม width และ height แอตทริบิวต์

ถ้าความสูงและความกว้างไม่ได้ตั้งค่าเบราว์เซอร์ไม่ทราบขนาดของวิดีโอ ผลจะเป็นไปได้ว่าหน้าจะเปลี่ยน (or flicker) ในขณะที่โหลดวิดีโอ

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

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

HTML <video> แบบอัตโนมัติ

ในการเริ่มต้นวิดีโอโดยอัตโนมัติใช้ autoplay แอตทริบิวต์:

ตัวอย่าง

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

ลองตัวเอง»

autoplay แอตทริบิวต์ไม่ทำงานในอุปกรณ์มือถือเช่น iPad และ iPhone

HTML วิดีโอ - การสนับสนุนเบราว์เซอร์

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

เบราว์เซอร์	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

HTML วิดีโอ - ประเภทสื่อ

รูปแบบไฟล์	ประเภทสื่อ
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML Video - วิธีคุณสมบัติและกิจกรรม

HTML5 กำหนดวิธีการ DOM, คุณสมบัติและเหตุการณ์สำหรับ <video> องค์ประกอบ

นี้ช่วยให้คุณโหลดเล่นและหยุดวิดีโอเช่นเดียวกับการตั้งค่าระยะเวลาและปริมาณ

นอกจากนี้ยังมีเหตุการณ์ DOM ที่สามารถแจ้งให้ทราบเมื่อวิดีโอเริ่มเล่นถูกหยุดชั่วคราว ฯลฯ

ตัวอย่าง: การใช้งานจาวาสคริปต์

มารยาทวิดีโอของ บิ๊กบั๊กบันนี่

ลองตัวเอง»

สำหรับการอ้างอิง DOM เต็มไปของเรา HTML5 เสียง / วิดีโอ DOM อ้างอิง