تعليق: سوف يمنحك هذه المقالة نظرة عامة مفصلة على استخدام علامة الصوت لمشغل الموسيقى HTML5. يمكن للأصدقاء الذين يحبون HTML5 الرجوع إليه. آمل أن يكون ذلك مفيدًا لك.
<Oudio> خصائص العلامة: SRC: URLPRELOAD MUSIC: PRELOAD AUTOPLAIN
<OudioId = "Media" src = "http://www.abc.com/test.mp3" Controls> </udio>
<video> خصائص العلامة: SRC: عنوان URL لملصق الفيديو: غلاف الفيديو ، الصورة معروضة عندما لا يكون هناك تشغيل مسبق: عرض تلقائي مسبق: حلقة اللعب التلقائي: حلقة عناصر تحكم: شريط التحكم الخاص بالمتصفح العرض: عرض الفيديو: ارتفاع الفيديو: ارتفاع الفيديو
<bideoid = "media" src = "http://www.abc.com/test.mp4" controlSheigt = "400px"> </video>
احصل على كائنات 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.Currentrc ؛ // إرجاع عنوان URL للمورد الحالي
Media.SRC = القيمة ؛ // إرجاع أو تعيين عنوان URL للمورد الحالي
Media.CanplayType (type) ؛ // هل يمكن أن تلعب موردًا لتنسيق معين
media.networkstate ؛ // 0. لم يتم تهيئة هذا العنصر 1. العادي ولكن لا يستخدم الشبكة 2. يتم تنزيل البيانات 3. لم يتم العثور على المورد
media.load () ؛ // إعادة تحميل المورد المحدد بواسطة SRC
media.buffered ؛ // العودة إلى المنطقة المخزنة ، timeranges
Media.Preload ؛ // لا شيء: Not Metadata التحميل المسبق: معلومات الموارد المسبقة Auto:
// حالة جاهزة
Media.ReadyState ؛ // 1: HAS_NOTHING 2: HAS_METADATA 3. HAVE_CURRENT_DATA
وسائل الإعلام. // هل هو البحث
// حالة إعادة التشغيل
media.currentTime = القيمة ؛ // وضع التشغيل الحالي ، يمكن أن يغير المهمة الموقف
Media.StartTime ؛ // عمومًا 0 ، إذا كانت وسائط دفق أو مورد لا يبدأ من 0 ، فهو ليس 0.
Media.Duration ؛ // يعيد دفق طول المورد الحالي لا حصر له
media.paused ؛ // سواء كنت قد توقفت
Media.DefaultPlayBackRate = value ؛ // سرعة التشغيل الافتراضية ، يمكن تعيينها
Media.PlayBackRate = value ؛ // سيتم تغيير سرعة التشغيل الحالية فورًا بعد الإعداد
media.played ؛ // العودة إلى المنطقة القابلة للعب ، Timeranges ، انظر أدناه لهذا الكائن
وسائل الإعلام. // العودة إلى المنطقة التي يمكنك فيها البحث عن توقيت
وسائل الإعلام. // هل انتهى
Media.Autoplay ؛ // هل يتم تشغيله تلقائيًا
Media.loop ؛ // ما إذا كنت تلعب حلقة
media.play () ؛ //يلعب
media.pause () ؛ //يوقف
//يتحكم
media.controls ؛ // هل هناك شريط تحكم افتراضي
media.volume = value ؛ //مقدار
media.cted = 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 ("Stalled") ؛ // أوقف سرعة الشبكة
EventTester ("play") ؛ // نشأت عند بدء تشغيل () وبدء اللعب التلقائي
EventTester ("توقف مؤقت") ؛ // توقف () المشغلات
EventTester ("LoadedMetadata") ؛ // الحصول على طول المورد بنجاح
EventTester ("LoadedData") ؛ //
EventTester ("الانتظار") ؛ // في انتظار البيانات ، وليس خطأ
EventTester ("اللعب") ؛ // ابدأ التشغيل
EventTester ("canplay") ؛ // يمكن أن يلعب ، ولكن قد يتم إيقافه مؤقتًا بسبب التحميل في الوسط
EventTester ("CanPlayRough") ؛ // يمكن تشغيلها ، يتم تحميل جميع الأغاني
EventTester ("البحث") ؛ // البحث
EventTester ("سعى") ؛ // الانتهاء من البحث
EventTester ("TimeUpdate") ؛ // يتغير وقت التشغيل
EventTester ("انتهى") ؛ // ينتهي التشغيل
EventTester ("RateChange") ؛ // يتغير معدل التشغيل
EventTester ("MaterChange") ؛ // تغيير طول المورد
EventTester ("VolumeChange") ؛ // تغيير حجم
فقرة من JS كتبت بنفسي:
$ (function () {
var p = new player () ؛
P.Read ("play") ؛
$ ("#stop"). انقر فوق (function () {
p.pause () ؛
}) ؛
$ ("#start"). انقر فوق (function () {
p.play () ؛
}) ؛
$ ("#show"). انقر فوق (function () {
التنبيه (p.duration ()) ؛
}) ؛
setInterval (function () {
$ ("#currenttime"). النص (p.currentTime ()) ؛
} ، 1000) ؛
}) ؛
Player Player () {} ؛
player.prototype = {
المربع: كائن جديد () ،
اقرأ: وظيفة (معرف) {
this.box = document.getElementById (id) ؛
} ،
play: function () {
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) ؛
} ؛