شرح مفصل لمشاكل وحلول الصوت والفيديو HTML5 للجوال

في الآونة الأخيرة، ندرس استخدام الفيديو ليحل محل الرسوم المتحركة، واستخدام الفيديو ليحل محل الرسوم المتحركة التي نسميها "الفيديو التفاعلي".

1. مساحة القرص الكبيرة، والتنزيل البطيء، وخاصة التشغيل عبر الإنترنت، سيكون أبطأ
2. هناك عدد كبير جدًا من الملفات عند اللعب عبر الإنترنت، سيؤدي عدد كبير جدًا من طلبات http إلى استجابة بطيئة أو سلوك غير طبيعي.

لذلك، هناك حاجة ملحة لتطوير مجموعة من التقنيات لاستبدال الرسوم المتحركة بالفيديو. نحن نسمي هذا النوع من الفيديو بالفيديو التفاعلي

1. لا يمكن تشغيل مقاطع الفيديو التقليدية إلا في منطقة مربعة
2. يتم تشغيل مقاطع الفيديو التقليدية في نافذة على جهاز iPad، ولكن على جهاز iPhone لا يمكن تشغيلها إلا في وضع ملء الشاشة.
3. بالتأكيد ستظهر مقاطع الفيديو التقليدية في المقدمة عند التشغيل.

1. في نظام iPhone، ليست هناك حاجة للعب في وضع ملء الشاشة، يمكنك اللعب في منطقة ما
2. يمكن أن تظهر مقاطع الفيديو التفاعلية أسفل الكائنات الرسومية العادية
3. يمكن إخفاء مقاطع الفيديو التفاعلية، مما يؤدي إلى إزالة خلفية الفيديو ومزج الفيديو مع الكائنات الرسومية العادية.

لقد أسفر البحث في البداية عن نتائج بالمناسبة، سأقوم بتلخيص المشكلات العملية التي تمت مواجهتها في الصوت والفيديو أثناء تطوير الهاتف المحمول H5 في السنوات القليلة الماضية وتقديم الحلول الخاصة بي.

ألقِ نظرة على التأثير الفعلي النهائي: متوافق مع أجهزة الكمبيوتر الشخصية (>IE9) وiPhone وiPad وAndroid 5.0

إنه يحل مشاكل التشغيل اليدوي والتلقائي والنوافذ وما إلى ذلك على iPhone، ويمكن استخدامه بشكل أساسي في الإنتاج الفعلي.

على اليمين يوجد ملف الفيديو الأصلي mp4

يستبدل الفيديو الموجود على اليسار الرسوم المتحركة ويدعم تأثير قناع الخلفية، والذي يمكنه الكشف عن الصورة الأساسية ودعم سلسلة من العمليات التفاعلية.

في كل مرة يتم فيها تمرير كائن صوتي عبر صوت جديد، يمكنك أن ترى أنه سيتم إنشاء سلسلة رسائل جديدة على نظام التشغيل IOS، وهذا أمر مثير للاشمئزاز.

الحل: استخدم كائن صوتي جديد لتحقيق غرض عدم فتح المزيد من سلاسل الرسائل عن طريق استبدال عناوين صوتية مختلفة.

الحل: لم يتم حل المشكلة في الإصدارات الأقل من Android بشكل عام، في التطوير المختلط، يمكن تعديل الواجهة الأساسية، مثل phonegap.

الحل: التشغيل التلقائي على iPhone هو عملية تم إجراؤها عندما تم تصميم نظام التشغيل IOS، ويبدو أنها تهدف إلى منع السرقة التلقائية لحركة المرور.

لتبسيط الأمر، تحتاج إلى محاكاة المستخدم لتشغيله يدويًا، لذلك نحتاج إلى استدعاء هذا الجزء من التعليمات البرمجية في البداية:

هذا من مشروعي، لقد خصمته للتو.

 // أصلح مشكلة عدم تمكن متصفح iOS من تشغيل الصوت تلقائيًا. أنشئ صوتًا جديدًا عند التحميل واستبدل src عند استخدامه. plat.isIOS) { var isAudio = false varfixaudio = function() { if (!isAudio) { isAudio = true; Xut.fix.audio = new Audio(); document.removeEventListener('touchstart',fixaudio, false);} document.addEventListener('touchstart',fixaudio, false);}

إذا قمت بربط مثل هذا الرمز بالنص: قم بإنشاء كائن صوتي من خلال التشغيل اليدوي، ثم احفظه في ملف global

وعند استخدامه يكون على النحو التالي

 // إذا كنت تستخدم Xut.fix.audio لتحديد تهيئة src لمتصفح ios، فراجع app.jsif (Xut.fix.audio) { audio = Xut.fix.audio; Audio(url );}audio.autoplay = true;audio.play();

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

نادرًا ما يتم استخدام علامة الفيديو على الأجهزة المحمولة، كما أن دعم Android أمر فظيع، وقد تم تحسينه فقط في الإصدار 5.0.

مشكلة قديمة في الايفون هي أنه لا يستطيع التشغيل تلقائيا (حفظ البيانات، حفظ أختك!!!)، والوضع الافتراضي هو التحكم في التشغيل بملء الشاشة

لفترة طويلة، تجاهلت معالجة الفيديو هذه. يستخدم Android الطبقة السفلية، ويستخدم iPhone VideoJS مباشرة، ويحتوي على فلاش مدمج وتبديل h5 أيضًا.

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

لذلك هناك حاجة ملحة لإيجاد حل لضغط الصور

الحل النهائي هو استخدام الفيديو بدلاً من الرسوم المتحركة، لأن تقنية ضغط الفيديو تم تطويرها منذ سنوات عديدة وأصبحت ناضجة جداً. يمكن لتقنية ضغط الفيديو الحالية ضغط الأفلام عالية الوضوح بدقة 720 بكسل بسهولة إلى 10 ميجا/دقيقة، أو 160 كيلو/ثانية. إنه أصغر بعشرات المرات على الأقل من حجم ملف تسلسل الصور. وفي الوقت نفسه، تدعم معظم الأجهزة فك ضغط مقاطع الفيديو عن طريق الأجهزة، وبهذه الطريقة، يكون استهلاك وحدة المعالجة المركزية لتشغيل الفيديو منخفضًا جدًا، كما أن استهلاك البطارية منخفض جدًا أيضًا، ولا تزال سرعة التشغيل سريعة. ويمكن تحقيق التشغيل بسهولة على كامل الشاشة عند 25 إطارًا.

بعد الانتهاء من الخطة، يجب حل بعض المشاكل.

1. يمكن أن يستجيب الفيديو بأكمله، بما في ذلك كائنات معينة في الفيديو، لنقرات المستخدم والشرائح والعمليات الأخرى.

2. ضمن iPhone، يمكنك اللعب في النافذة

3. القدرة على تصفية الخلفية بحيث يمكن استخدامها كصورة PNG

يظهر التأثير الفعلي النهائي أيضًا في الرسوم المتحركة المتحركة للبدء:

يستبدل الفيديو الرسوم المتحركة ويدعم تأثير إخفاء الخلفية، والذي يمكن أن يكشف عن الصورة الأساسية.

وفي الوقت نفسه، تم أيضًا حل مشكلة الشاشة اليدوية والتلقائية وعدم ملء الشاشة.

حل:

تمت معالجتها من خلال تركيبة لوحة الرسم + علامة الفيديو

المبدأ: احصل على الإطار الأصلي للفيديو وارسمه إلى الصفحة من خلال اللوحات

أرفق هنا الكود المصدري مباشرةً. الكود مكتوب بشكل عام، ولكن تم تسليط الضوء على العديد من النقاط الرئيسية.

http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

هذا مزعج بعض الشيء. تحتاج إلى التفاعل وسحب اللوحة القماشية للتحكم في الصورة. لم أنتهي من كتابتها بعد. إليك وصف بسيط. تتم معالجتها أيضًا بواسطة Canvas فيديو، لكنه يحتاج إلى حاوية قماش مخبأة للمعالجة المسبقة، من خلال المعالجة المسبقة، يتم الحصول على وحدات البكسل لكل صورة عن طريق تغيير قيمة RBG لكل بكسل، ويمكن تصفية الخلفية، بحيث يمكن استخدامها مثل PNG الصورة مكتوبة في المستقبل، فلننشرها ~~

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.