شرح مفصل لاستخدام الصوت المتوسط ​​HTML5

تنسيق الفيديو المشترك

• مكون الفيديو: شاشة ، صوت ، تنسيق ترميز
• ترميز الفيديو: H.264 ، Theora ، VP8 (Google Open Source)

يدعم HTML5 تنسيق الفيديو:

1. ogg

ملف OGG مع ترميز VORBIS AUDIO SHEORA

المتصفح المدعوم: F ، C ، O

2. MEPG4

ملف MPEG4 مع ترميز الفيديو H.264+AAC Audio الترميز

المتصفح المدعوم: S ، ج

3 ، ويب

تنسيق الويب مع ترميز الفيديو VP8+Vorbis Audio الترميز

المتصفح المدعوم: أنا ، واو ، ج ، س

العيوب: عدد قليل من مقاطع الفيديو ، لا توجد ترميزات ترميزات ، ليست جيدة للترميز

إذا كنت تريد الفيديو تلقائيًا ، يمكنك إضافة نمط الأب البطيء ، فقط إضافة نمط = 100 ٪ إلى علامات الفيديو ؛

حدد تنسيق الفيديو.

 <معرف الفيديو = الوسائط src = examp.mp4 عرض = 500 ملصق = examp1.jpg> لا يدعم متصفحك الفيديو </video>

بالنظر إلى مجموعة متنوعة من تنسيقات الفيديو ، أي نوع من المتصفح يختار اللعب وفقًا لشهادته الخاصة

 <controls video = controls> <source src = 1.mp4 type = video/mp4/> // src properties اكتب في علامات المصدر ، لتحديد نوع نوع الفيديو ، على سبيل المثال ، mp4 هو type = video/mp4 <source src = 2.gg type = video/ogg/> // ogg format <source src = 3.webm type = video/webm/>

سمة API

• المدة: إرجاع طول الصوت/الفيديو الحالي (بالثواني)
• توقف مؤقتًا: تعيين أو إرجاع الصوت/الفيديو سواء كنت ستتوقف مؤقتًا
• الوقت الحالي: تعيين أو إرجاع موضع التشغيل الحالي في الصوت/الفيديو (بالثواني)
• انتهى: ما إذا كان تشغيل الصوت/الفيديو قد انتهى

1.4.1 طريقة الفيديو

طريقة شائعة

• تشغيل (): ابدأ تشغيل الصوت/الفيديو
• وقفة (): تعليق الصوت/الفيديو الحالي

1.4.2 حالة الشبكة

احصل على كائن فيديو

 media = document.getElementById (media) ؛

1.Media.Currentrc ؛

العودة إلى عنوان URL للمورد الحالي

2.MEDIA.SRC = القيمة ؛

إرجاع أو تعيين عنوان URL للمورد الحالي

3.MEDIA.CANPLAYTYPE (النوع) ؛

هل يمكنك لعب مورد تنسيق معين

4.media.networkstate ؛

0. هذا العنصر لم يتم تهيئته

1. عادي ولكن لا يستخدم الشبكة

2. تنزيل البيانات

3. لا مورد

5.media.load () ؛

إعادة تحميل المورد المحدد بواسطة SRC

6.media.buffered ؛

العودة إلى منطقة المخزن المؤقت ، timeranges

7. MEDIA.PRELOAD ؛

لا شيء: ليس التحميل المسبق

بيانات التعريف: معلومات مورد ما قبل التحميل

آلي:

1.4.3 حالة التحضير

1. MEDIA.READYSTATE

2. MEDIA.Seaking ؛

سواء كنت في البحث

1.4.4 حالة اللعب

1.Media.CurrentTime = القيمة ؛

يمكن تغيير موضع اللعب الحالي إلى الموضع

2.MEDIA.StartTime ؛

بشكل عام 0 ، إذا كانت وسائط دفق أو المورد الذي لا يبدأ من 0 ، فهو ليس 0

3 media.duration ؛

يتدفق طول المورد الحالي غير محدود

4. MEDIA.PAUSED ؛

سواء للتوقف

5.media.DefaultPlayBackRate = value ؛

سرعة التشغيل الافتراضية ، يمكنك الإعداد

6.media.playbackRate = value ؛

يتم تغيير سرعة التشغيل الحالية مباشرة بعد الإعداد

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 = القيمة ؛
• media.ted = القيمة ؛
• Timeranges (المنطقة) كائن
• Timeranges.Length ؛
• timeranges.start (index) // موضع البداية لمنطقة قسم الفهرس
• timeranges.end (فهرس) // نهاية منطقة قسم الفهرس

1.4.6 الأحداث ذات الصلة

1. أولاً وقبل كل شيء ، يمكنك ربط الحدث من خلال طريقة AddeventListener في JS

2. الأحداث المشتركة

• Oncanplay: البرنامج النصي الذي يعمل عندما يكون الملف جاهزًا (المخزن المؤقت كافيًا في البداية).
• OntimeUpdate: يتم تشغيل البرنامج النصي عندما يتغير موضع التشغيل (مثل عندما يكون المستخدم على وشك إدخال موضع مختلف في الوسط).
• Onending: البرنامج النصي الذي يعمل عند وصول الوسائط إلى النهاية (يمكن إرسال رسائل مثل الشكر للعرض).

1.4.7 آخرون

1. ملء الشاشة:

• element.WebKitRequestful () ؛
• element.MozRequestfuls () ؛
• element.Requestfulscreen () ؛

2. الخروج من ملء الشاشة:

• document.webkitcanceltscreen () ؛
• document.mozcanceltscreen () ؛
• document.exitfuls () ؛

1. تنسيق الصوت الشائع

ترميز الصوت: ACC ، MP3 ، Vorbis

2. HTML5 يدعم تنسيق الصوت:

• OGG مجانًا للمتصفح: C ، F ، O
• متصفح شحن MP3: أنا ، ج ، ق
• متصفح شحن WAV: F ، O ، S

دعم تنسيق الموسيقى

يمكن إنشاء الصوت بواسطة New. يمكنك أيضًا الحصول عليها باستخدام Documens

 // 通过 new 关键字来创建 关键字来创建 var music = new audio (test.mp3) ؛ // 通过 document 来获取已经存在的 对象 var music = document.getElementById (Audio) ؛ // 当然这里也可以使用 document الحصول على طرق أخرى مثل .getElementsByClassName ('className').

بادئ ذي بدء ، يمكنك ربط الحدث من خلال طريقة addeventristener في JS

في الواقع ، فإن واجهة برمجة تطبيقات الفيديو والصوت متسقة تقريبًا. مختلف قليلا. لذلك سيكون هناك أحد الآخرين في الأساس

ما سبق هو كل محتويات هذه المقالة.