คำอธิบายโดยละเอียดของ HTML5 Medium -TV Audio ใช้งาน

รูปแบบวิดีโอทั่วไป

• ส่วนประกอบของวิดีโอ: หน้าจอ, เสียง, รูปแบบการเข้ารหัส
• การเข้ารหัสวิดีโอ: H.264, Theora, VP8 (Google Open Source)

HTML5 รองรับรูปแบบวิดีโอ:

1. Ogg

ไฟล์ ogg พร้อมการเข้ารหัสวิดีโอ Theora+การเข้ารหัสเสียง Vorbis

เบราว์เซอร์ที่รองรับ: F, C, O

2. mepg4

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

เบราว์เซอร์ที่รองรับ: S, C

3, webm

รูปแบบ webm พร้อมการเข้ารหัสวิดีโอ VP8+การเข้ารหัสเสียง Vorbis

เบราว์เซอร์ที่รองรับ: I, F, C, O

ข้อเสีย: วิดีโอไม่กี่รายการแทบจะไม่มี transcoders ไม่ดีสำหรับการแปลงรหัส

หากคุณต้องการวิดีโอคุณสามารถเติมเต็มขนาดของ Div Slow Father โดยอัตโนมัติเพียงเพิ่มสไตล์ = ความกว้าง = 100%สำหรับแท็กวิดีโอ

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

 <video id = media src = examp.mp4 width = 500 โปสเตอร์ = examp1.jpg> เบราว์เซอร์ของคุณไม่รองรับวิดีโอ </video>

ได้รับรูปแบบวิดีโอที่หลากหลายซึ่งเบราว์เซอร์ประเภทใดเลือกเล่นตามระดับของตัวเอง

 <video controls = controls> <source src = 1.mp4 type = video/mp4/> // src คุณสมบัติการเขียนในแท็กต้นทางเพื่อระบุประเภทของวิดีโอตัวอย่างเช่น mp4 คือ type = video/mp4 <แหล่งที่มา src = 2.gg type = video/ogg/> // format ogg <source src = 3. webm type = video/webm/> // webm format </video>

แอตทริบิวต์ API

• ระยะเวลา: ส่งคืนความยาวของเสียง/วิดีโอปัจจุบัน (เป็นวินาที)
• หยุดชั่วคราว: ตั้งค่าหรือส่งคืนเสียง/วิดีโอว่าจะหยุดชั่วคราว
• CurplesTime: ตั้งค่าหรือส่งคืนตำแหน่งการเล่นปัจจุบันในเสียง/วิดีโอ (เป็นวินาที)
• จบลง: การเล่นของเสียง/วิดีโอจบลงหรือไม่

1.4.1 วิธีวิดีโอ

วิธีการทั่วไป

• play (): เริ่มเล่นเสียง/วิดีโอ
• หยุดชั่วคราว (): ระงับเสียง/วิดีโอปัจจุบัน

1.4.2 สถานะเครือข่าย

รับวิดีโอวิดีโอ

 Media = document.getElementById (สื่อ);

1.Media.currentSrc;

กลับไปที่ URL ของทรัพยากรปัจจุบัน

2.Media.src = ค่า;

ส่งคืนหรือตั้งค่า URL ของทรัพยากรปัจจุบัน

3.Media.canplaytype (ประเภท);

คุณสามารถเล่นทรัพยากรรูปแบบที่แน่นอนได้ไหม

4.Media.NetworkState;

0. องค์ประกอบนี้ไม่ได้เริ่มต้น

1. ปกติ แต่ไม่ได้ใช้เครือข่าย

2. ดาวน์โหลดข้อมูล

3. ไม่มีทรัพยากร

5.Media.load ();

Re -load ทรัพยากรที่ระบุโดย SRC

6.Media.buffered;

กลับไปที่พื้นที่บัฟเฟอร์ timeranges

7.Media.preload;

ไม่มี: ไม่โหลดล่วงหน้า

ข้อมูลเมตา: ข้อมูลทรัพยากรล่วงหน้า

อัตโนมัติ:

1.4.3 สถานะการเตรียมการ

1.Media.readyState

2.Media.Seeting;

ไม่ว่าคุณจะกำลังมองหา

1.4.4 สถานะการเล่น

1.Media.currentTime = ค่า;

ตำแหน่งการเล่นปัจจุบันสามารถเปลี่ยนเป็นตำแหน่งได้

2.Media.starttime;

โดยทั่วไป 0 ถ้าเป็นสื่อสตรีมหรือทรัพยากรที่ไม่ได้เริ่มจาก 0 มันไม่ใช่ 0

3.Media.Duration;

ความยาวของทรัพยากรปัจจุบันไหลกลับไม่ จำกัด

4.Media.paused;

ไม่ว่าจะหยุดชั่วคราว

5.Media.defaultPlayBackrate = ค่า;

ความเร็วในการเล่นเริ่มต้นคุณสามารถตั้งค่าได้

6.Media.PlayBackrate = ค่า;

ความเร็วในการเล่นปัจจุบันจะเปลี่ยนไปทันทีหลังจากตั้งค่า

7.Media.Played;

กลับไปที่พื้นที่ที่เล่น timeranges ดูวัตถุด้านล่างเกี่ยวกับวัตถุนี้

8. Media.Seekable;

กลับไปยังพื้นที่ที่สามารถค้นหาได้

9.Media.nded;

ไม่ว่าจะจบ

10.Media.Autoplay;

ไม่ว่าจะเล่นโดยอัตโนมัติ

11.Media.loop;

ไม่ว่าจะหมุนเวียน

12.Media.Play ();

เล่น

13.Media.pause ();

หยุดชั่วคราว

1.4.5 การควบคุมวิดีโอ

• Media.Controls;
• media.volume = value;
• media.muted = value;
• วัตถุ timeranges (ภูมิภาค)
• Timeranges.length;
• timeranges.start (ดัชนี) // ตำแหน่งเริ่มต้นของพื้นที่ส่วนดัชนี
• timeranges.end (ดัชนี) // จุดสิ้นสุดของพื้นที่ส่วนดัชนี

1.4.6 เหตุการณ์ที่เกี่ยวข้อง

1. ก่อนอื่นคุณสามารถผูกเหตุการณ์ผ่านวิธี addeventListener ใน JS

2. เหตุการณ์ทั่วไป

• Oncanplay: สคริปต์ที่ทำงานเมื่อไฟล์พร้อม (บัฟเฟอร์เพียงพอที่จุดเริ่มต้น)
• OnTimeUpdate: สคริปต์ทำงานเมื่อตำแหน่งการเล่นเปลี่ยน (เช่นเมื่อผู้ใช้กำลังจะเข้าสู่ตำแหน่งที่แตกต่างกันในสื่อ)
• Onended: สคริปต์ที่ทำงานเมื่อสื่อถึงจุดสิ้นสุด (สามารถส่งข้อความเช่นขอบคุณการดู)

1.4.7 คนอื่น ๆ

1. เต็มหน้าจอ:

• Element.webkitrequestfulscreen () (WebKit) (WebKit)
• Element.mozrequestfulscreen () (Firefox)
• Element.requestfulScreen () (W3C)

2. ออกจากหน้าจอเต็ม:

• document.webkitcanceltscreen () (WebKit)
• Document.mozcanceltscreen ();
• document.exitfulscreen ();

1. รูปแบบเสียงทั่วไป

การเข้ารหัสเสียง: ACC, MP3, Vorbis

2. HTML5 รองรับรูปแบบเสียง:

• Ogg ฟรีเบราว์เซอร์: C, F, O
• เบราว์เซอร์ชาร์จ MP3: I, C, S
• เบราว์เซอร์ชาร์จ WAV: F, O, S

รองรับรูปแบบเพลง

เสียงสามารถสร้างขึ้นได้โดยใหม่ คุณยังสามารถรับได้โดยใช้ documens

 // 通过ใหม่关键字来创建เสียง对象 var music = new Audio (test.mp3); // 通过เอกสาร来获取已经存在的เสียง对象 var music = document.getElementById (เสียง); // 当然这里也可以使用เอกสาร รับวิธีการอื่น ๆ เช่น. getElementsByClassName ('className')

ก่อนอื่นคุณสามารถผูกเหตุการณ์ผ่านวิธี addeventristener ใน JS

อันที่จริง API และเสียงของวิดีโอเกือบจะสอดคล้องกัน แตกต่างกันเล็กน้อย ดังนั้นโดยทั่วไปหนึ่งในนั้นจะอยู่ที่นั่น

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้