Komentar: Artikel ini akan memberi Anda gambaran terperinci tentang penggunaan tag audio pemutar musik HTML5. Teman yang menyukai HTML5 dapat merujuknya. Saya harap ini akan membantu Anda.
<Audio> Tag Properties: SRC: Music Urlpreload: Preload Autoplay: Autoplay Loop: Loop Controls: Bilah kontrol sendiri Browser sendiri
<audioID = "media" src = "http://www.abc.com/test.mp3" controls> </ audio>
<Video> Tag Properties: SRC: URL Poster Video: Sampul Video, Gambar Ditampilkan Saat Tidak Ada Putar Preload: Preload Autoplay: Autoplay Loop: Loop Controls: Browser's Control Bar Width: Video Width Tinggi: Video Tinggi Video: Video
<VideoD = "Media" src = "http://www.abc.com/test.mp4" controlSheigt = "400px"> </dide>
Dapatkan objek htmlvideoelement dan htmlaudioElement
// audio dapat membuat objek secara langsung melalui yang baru
Media = newudio ("http://www.abc.com/test.mp3");
// Audio dan video dapat memperoleh objek melalui tag
Media = document.getElementById ("media");
Metode dan Properti Media:
Htmlvideoelement dan htmlaudioElement keduanya diwarisi dari htmlmediaelement
// Status kesalahan
Media. // NULL: Normal
Media.error.code; // 1. Pengakhiran Pengguna 2. Kesalahan jaringan 3. Kesalahan decoding 4. URL tidak valid
// Status Jaringan
Media.currentsrc; // Kembalikan URL sumber daya saat ini
Media.src = nilai; // Kembalikan atau atur URL dari sumber daya saat ini
Media.canplayType (type); // Bisakah itu memainkan sumber daya format tertentu
Media.networkstate; // 0. Elemen ini tidak diinisialisasi 1. Normal tetapi tidak menggunakan jaringan 2. Data sedang diunduh 3. Sumber daya yang tidak ditemukan
Media.load (); // Muat ulang sumber daya yang ditentukan oleh SRC
Media.Buffered; // Kembali ke area buffered, waktu
Media.preload; // tidak ada: tidak preload metadata: preload informasi sumber daya otomatis:
// status siap
Media. // 1: HAD_NOTHING 2: HAD_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; // apakah itu mencari
// Status Putar Ulang
Media.currenttime = nilai; // Posisi pemutaran saat ini, penugasan dapat mengubah posisi
Media.starttime; // Umumnya 0, jika itu adalah media streaming atau sumber daya yang tidak dimulai dari 0, itu bukan 0.
Media. Durasi; // Aliran Panjang Sumber Daya saat ini mengembalikan Infinite
Media.paused; // apakah akan berhenti
Media.defaultplaybackrate = value; // kecepatan pemutaran default, dapat diatur
Media.playbackrate = value; // kecepatan pemutaran saat ini akan diubah segera setelah pengaturan
Media.played; // Kembali ke area yang dapat dimainkan, waktu, lihat di bawah untuk objek ini
Media. // kembali ke area tempat Anda dapat mencari waktu
Media.EDDED; // Apakah itu berakhir
Media.autoplay; // apakah itu dimainkan secara otomatis
Media.loop; // apakah akan bermain loop
Media.play (); //Bermain
Media.Pause (); //Berhenti sebentar
//kontrol
Media.controls; // Apakah ada bilah kontrol default
Media.volume = nilai; //Volume
Media.muted = nilai; //Bisu
// Objek Timerang (Wilayah)
Timerang.length; // Jumlah segmen area
Timeranges.start (indeks) // Posisi mulai dari area bagian indeks
Timeranges.end (indeks) // Posisi akhir area bagian indeks
peristiwa:
EventTester = function (e) {
Media.addeventListener (e, function () {
console.log ((newDate ()). getTime (), e);
});
}
EventTester ("LoadStart"); // Klien mulai meminta data
EventTester ("Progress"); // Klien meminta data
EventTester ("Suspend"); // Unduh yang tertunda
EventTester ("Abort"); // Klien secara aktif mengakhiri unduhan (bukan disebabkan oleh kesalahan),
EventTester ("Kesalahan"); // Kesalahan ditemui saat meminta data
Eventtester ("Stalled"); // Hentikan kecepatan jaringan
EventTester ("Play"); // dipicu saat bermain () dan autoplay mulai bermain
EventTester ("jeda"); // jeda () pemicu
EventTester ("LoadedMetadata"); // berhasil mendapatkan panjang sumber daya
EventTester ("LoadedData"); //
EventTester ("Waiting"); // menunggu data, bukan kesalahan
EventTester ("Playing"); // Mulai pemutaran
EventTester ("CanPlay"); // dapat bermain, tetapi mungkin dijeda karena pemuatan di tengah
EventTester ("CanPlaythrough"); // dapat diputar, semua lagu dimuat
EventTester ("mencari"); // pencarian
EventTester ("Dicari"); // Pencarian selesai
EventTester ("TimeUpdate"); // Perubahan Waktu Playback
EventTester ("diakhiri"); // Pemutaran berakhir
EventTester ("Ratechange"); // Tingkat pemutaran berubah
EventTester ("Durasione"); // perubahan panjang sumber daya
EventTester ("VolumeChange"); // Perubahan Volume
Paragraf JS yang ditulis sendiri:
$ (function () {
var p = pemain baru ();
p.read ("play");
$ ("#stop"). klik (function () {
p.pause ();
});
$ ("#start"). Klik (function () {
p.play ();
});
$ ("#show"). klik (function () {
alert (p.duration ());
});
setInterval (function () {
$ ("#currentTime"). Teks (p.currenttime ());
}, 1000);
});
function player () {};
Player.prototype = {
Kotak: objek baru (),
Baca: function (id) {
this.box = document.getElementById (id);
},
play: function () {
this.box.play ();
},
Jeda: function () {
this.box.pause ();
},
src: function (url) {
this.box.src = url;
},
saat ini: function () {
return (this.box.currenttime/60) .tofixed (2);
}
};
Player.prototype.duration = function () {
return (this.box.duration/60) .tofixed (2);
};