ภาพรวมการใช้แท็กเครื่องเล่นเพลง HTML5

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-16 06:00:03

ความคิดเห็น: บทความนี้จะให้ภาพรวมโดยละเอียดเกี่ยวกับการใช้แท็กเสียงของเครื่องเล่นเพลง HTML5 เพื่อนที่ชอบ HTML5 สามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ

<Audio> คุณสมบัติแท็ก: SRC: เพลง URLPRELOAD: PRELOAD AUTOPLAY: Autoplay Loop: Loop Controls: แถบควบคุมของเบราว์เซอร์เอง

<video> คุณสมบัติแท็ก: SRC: URL ของโปสเตอร์วิดีโอ: หน้าปกวิดีโอ, รูปภาพที่แสดงเมื่อไม่มีการเล่นล่วงหน้า: การเล่นล่วงหน้าอัตโนมัติ: การเล่นอัตโนมัติลูป: การควบคุมแบบวน

รับ HTMLVIDEOELEMENT และ HTMLAUDIOELEMENT

// เสียงสามารถสร้างวัตถุโดยตรงผ่านใหม่

Media = newaudio ("http://www.abc.com/test.mp3");

// ทั้งเสียงและวิดีโอสามารถรับวัตถุผ่านแท็ก

Media = Document.getElementById ("Media");

วิธีการสื่อและคุณสมบัติ:

HTMLVIDEOELEMENT และ HTMLAUDIOELEMENT ทั้งคู่สืบทอดมาจาก HTMLMediaElement

// สถานะข้อผิดพลาด

Media.error; // null: ปกติ

media.error.code; // 1. การเลิกจ้างผู้ใช้ 2. ข้อผิดพลาดเครือข่าย 3. ข้อผิดพลาดการถอดรหัส 4. URL ไม่ถูกต้อง

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

Media.currentsrc; // ส่งคืน URL ของทรัพยากรปัจจุบัน

Media.src = ค่า; // ส่งคืนหรือตั้งค่า URL ของทรัพยากรปัจจุบัน

Media.canplaytype (ประเภท); // สามารถเล่นทรัพยากรในรูปแบบที่แน่นอนได้หรือไม่

Media.networkState; // 0. องค์ประกอบนี้ไม่ได้เริ่มต้น 1. ปกติ แต่ไม่ได้ใช้เครือข่าย 2. ข้อมูลกำลังถูกดาวน์โหลด 3. ไม่พบทรัพยากร

Media.load (); // โหลดทรัพยากรที่ระบุโดย SRC

Media.buffered; // กลับไปยังพื้นที่บัฟเฟอร์ timeranges

Media.preload; // ไม่มี: ไม่ใช่ข้อมูลเมตาโหลดล่วงหน้า: ข้อมูลทรัพยากรล่วงหน้าอัตโนมัติ: อัตโนมัติ:

// สถานะพร้อม

Media.readyState; // 1: Have_nothing 2: HAS_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA

Media.Seeting; // กำลังค้นหา

// สถานะเล่นซ้ำ

media.currenttime = value; // ตำแหน่งการเล่นปัจจุบันการกำหนดสามารถเปลี่ยนตำแหน่งได้

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

Media.duration; // สตรีมความยาวทรัพยากรปัจจุบันส่งคืนอนันต์

Media.paused; // ว่าจะหยุดชั่วคราว

media.defaultplaybackrate = value; // ความเร็วในการเล่นเริ่มต้นสามารถตั้งค่าได้

media.playbackrate = value; // ความเร็วในการเล่นปัจจุบันจะเปลี่ยนทันทีหลังจากตั้งค่า

Media.fayed; // กลับไปที่พื้นที่เล่น Timeranges ดูด้านล่างสำหรับวัตถุนี้

Media.Seekable; // กลับไปยังพื้นที่ที่คุณสามารถหาช่วงเวลา

Media.ending; // มันจบลง

Media.Autoplay; // จะเล่นโดยอัตโนมัติหรือไม่

Media.loop; // ไม่ว่าจะเล่นลูป

Media.play (); //เล่น

Media.pause (); //หยุดชั่วคราว

//ควบคุม

Media.Controls; // มีแถบควบคุมเริ่มต้น

Media.volume = ค่า; //ปริมาณ

Media.muted = value; //ปิดเสียง

// timeranges (ภูมิภาค) วัตถุ

timeranges.length; // จำนวนส่วนพื้นที่

timeranges.start (ดัชนี) // ตำแหน่งเริ่มต้นของพื้นที่ส่วนดัชนี

timeranges.end (ดัชนี) // ตำแหน่งสิ้นสุดของพื้นที่ส่วนดัชนี

เหตุการณ์:

EventTester = function (e) {

media.addeventListener (e, function () {

console.log ((newdate ()). getTime (), e);

EventTester ("LoadStart"); // ไคลเอนต์เริ่มร้องขอข้อมูล

EventTester ("ความคืบหน้า"); // ลูกค้ากำลังขอข้อมูล

EventTester ("ระงับ"); // ดาวน์โหลดล่าช้า

EventTester ("Abort"); // ไคลเอนต์ยุติการดาวน์โหลดอย่างแข็งขัน (ไม่ได้เกิดจากข้อผิดพลาด)

EventTester ("ข้อผิดพลาด"); // พบข้อผิดพลาดในขณะที่ขอข้อมูล

EventTester ("หยุด"); // หยุดความเร็วเครือข่าย

EventTester ("Play"); // ทริกเกอร์เมื่อเล่น () และเล่นอัตโนมัติเริ่มเล่น

EventTester ("หยุดชั่วคราว"); // หยุดชั่วคราว () ทริกเกอร์

EventTester ("LoadedMetadata"); // ได้รับความยาวของทรัพยากรได้สำเร็จ

EventTester ("LoadedData"); -

EventTester ("รอ"); // รอข้อมูลไม่ใช่ข้อผิดพลาด

EventTester ("เล่น"); // เริ่มเล่น

EventTester ("Canplay"); // สามารถเล่นได้ แต่อาจหยุดชั่วคราวเนื่องจากการโหลดตรงกลาง

EventTester ("canplaythrough"); // สามารถเล่นได้ทุกเพลงจะถูกโหลด

EventTester ("ค้นหา"); // การค้นหา

EventTester ("แสวงหา"); // ค้นหาเสร็จสิ้น

EventTester ("TimeUpdate"); // การเปลี่ยนแปลงเวลาเล่น

EventTester ("จบ"); // การเล่นจบลง

EventTester ("Retechange"); // การเปลี่ยนแปลงอัตราการเล่น

EventTester ("Durationchange"); // การเปลี่ยนแปลงความยาวของทรัพยากร

Eventtester ("Volumechange"); // การเปลี่ยนแปลงระดับเสียง

ย่อหน้าของ JS ที่เขียนด้วยตัวเอง:

$ (function () {

var p = ผู้เล่นใหม่ ();

P.Read ("เล่น");

$ ("#stop") คลิก (ฟังก์ชัน () {

p.pause ();

$ ("#start") คลิก (ฟังก์ชัน () {

p.play ();

$ ("#show") คลิก (ฟังก์ชัน () {

การแจ้งเตือน (p.duration ());

setInterval (function () {

$ ("#currenttime") ข้อความ (p.currenttime ());

}, 1,000);

ฟังก์ชั่นเครื่องเล่น () {};

player.prototype = {

กล่อง: วัตถุใหม่ ()

อ่าน: ฟังก์ชัน (id) {

this.box = document.getElementById (id);

เล่น: ฟังก์ชั่น () {

this.box.play ();

หยุดชั่วคราว: ฟังก์ชัน () {

this.box.pause ();

SRC: ฟังก์ชั่น (URL) {

this.box.src = url;

currenttime: function () {

return (this.box.currenttime/60) .tofixed (2);

player.prototype.duration = function () {

return (this.box.duration/60) .tofixed (2);