في الآونة الأخيرة ، ندرس استخدام الفيديو بدلاً من الرسوم المتحركة والفيديو بدلاً من الرسوم المتحركة المتحركة. نسمي هذا النوع من الفيديو التفاعلي.
الرسوم المتحركة التقليدية للرموز المتحركة: ستكون مساحة القرص الكبيرة ، والتنزيل البطيء ، ولا سيما التشغيل عبر الإنترنت ، أبطأ
يؤدي وجود عدد كبير جدًا من الملفات ، والكثير من طلبات http عند اللعب عبر الإنترنت ، إلى استجابة بطيئة أو سلوك غير طبيعي. لذلك ، هناك حاجة ملحة لتطوير مجموعة من التقنيات لاستبدال الرسوم المتحركة بالفيديو. نسمي هذا النوع من الفيديو فيديو تفاعلي
مشاكل الفيديو التقليدي:
1. يمكن لعبها فقط في منطقة مربعة الشكل
2. تحت iPad ، هي نافذة للعب ، وتحت iPhone ، لا يمكن تشغيلها إلا في وضع ملء الشاشة.
3. عند اللعب ، سيظهر بالتأكيد في المقدمة
يتميز الفيديو التفاعلي بالخصائص التالية:
تحت iPhone ، لا يلزم تشغيل ملء الشاشة ، ويمكن تشغيله في منطقة واحدة
يمكن أن يظهر الفيديو التفاعلي أسفل الكائنات الرسومية العادية
يمكن أن يحتوي الفيديو التفاعلي على قناع ، بحيث يمكن إزالة خلفية الفيديو ويمكن دمج الفيديو والكائنات الرسومية العادية
ملخص: بالنسبة للفيديو المستخدم للتشغيل ، سنقوم بتعيينه كفيديو تقليدي. بالنسبة لمقاطع الفيديو التي يجب استخدامها لأغراض محددة ، قمنا بتعيينها كمقاطع فيديو تفاعلية. وقد أسفر البحث عن نتائج أولية. بالمناسبة ، فإنه يلخص المشاكل الفعلية التي تمت مواجهتها في تطوير الصوت والفيديو للهاتف المحمول H5 في السنوات القليلة القادمة ويقدم الحلول الخاصة به. ألق نظرة على التأثير الفعلي النهائي: متوافق مع أجهزة الكمبيوتر (> IE9) ، iphone ، ipad ، Android 5.0
حل مشاكل النوافذ اليدوية والآلية والنافذة على iPhone ويمكن ذلك تستخدم أساسًا في الإنتاج الفعلي. على اليمين يوجد ملف الفيديو الأصلي mp4 ، الفيديو الموجود على اليسار يحل محل الرسوم المتحركة ، ثم يدعم تأثير قناع الخلفية ، ويمكن أن يكشف عن الخريطة الأساسية ، ويدعم سلسلة من العمليات التفاعلية
صوت H5
في كل مرة يتم فيها تمرير كائن صوتي عبر صوت جديد ، يمكن رؤية سلسلة جديدة على IOS.
الحل: كائن صوتي جديد ، من خلال استبدال عناوين صوتية مختلفة ، يحقق هدف عدم فتح المزيد من سلاسل الرسائل.
الدعم ليس جيدًا على Android
الحل: لم يتم حل المشكلة في الإصدار الأدنى من Android. بشكل عام ، يمكن التعامل مع التطوير المختلط عن طريق ضبط الواجهة الأساسية ، مثل phonegap
لا يمكن اللعب التلقائي على iphone
الحل: التشغيل التلقائي على iphone هو عملية تتم عندما تم تصميم IOS. يبدو أنه لمنع السرقة التلقائية لحركة المرور.
ببساطة ، يجب تشغيله يدويًا عن طريق محاكاة المستخدم ، لذلك نحتاج إلى استدعاء هذا الجزء من الكود في البداية:
رمز النسخ
// أصلح المشكلة المتمثلة في أن متصفح ios لا يمكنه تشغيل الصوت تلقائيًا. أنشئ صوتًا جديدًا عند التحميل واستبدال src عند استخدامه.
Xut.fix = Xut.fix || {} ؛
إذا (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = خطأ
var fixaudio = function () {
إذا (! isAudio) {
isAudio = صحيح ؛
Xut.fix.audio = صوت جديد () ؛
document.removeEventListener ('touchstart'، fixaudio، false) ؛
}
};
document.addEventListener ('touchstart' ، fixaudio ، false) ؛
}
انسخ الكود أعلاه
إذا ربطت مثل هذا الرمز بالجسم: أنشئ كائنًا صوتيًا عن طريق تشغيله يدويًا ، ثم احفظه في الملف العام
عندما تستخدم على النحو التالي:
رمز النسخ
// إذا كنت تستخدم Xut.fix.audio لتحديد src لمتصفح iOS ، فيرجى الرجوع إلى app.js للتهيئة
إذا (Xut.fix.audio) {
سمعي
=
Xut.fix.audio ؛
audio.src = عنوان url ؛
{} آخر
الصوت = صوت جديد (url) ؛
}
audio.autoplay = صحيح ؛
audio.play () ؛
ببساطة استبدل الكائن الصوتي. ببساطة ، يجب أن يكون الكائن الذي تم إنشاؤه بواسطة مشغل المستخدم للعب.
صوت فيديو H5
نادرًا ما يتم استخدام علامات الفيديو على المحطة الطرفية للهاتف المحمول ، ودعم Android سيء للغاية ، ومن الناحية البصرية 5.0 أفضل. لا يمكن تشغيل المشكلة القديمة على iPhone تلقائيًا (حفظ البيانات ، حفظ أختك !!!) ، والافتراضي هو التحكم في ملء الشاشة للعب. لفترة طويلة ، تجاهلت معالجة هذا الفيديو. يستخدم Android الطبقة السفلية ، ويستخدم iPhone مباشرة VideoJS ، والفلاش المدمج ومفتاح h5 ، كما أن الفلاش لديه مشاكل في الدعم. منذ فترة ، كان لدى المدير طلب. لقد قمنا بتطبيق عدد كبير جدًا من الرسوم المتحركة ، وكلها عبارة عن رسوم متحركة مجمعة لمسارات الرموز المتحركة ، والتي تتراوح من مئات الميجابايت إلى مئات الميجابايت في تطبيق واحد ، لذلك هناك حاجة ماسة إلى حل لضغط الصور. الحل النهائي هو استخدام الفيديو بدلاً من الرسوم المتحركة ، لأن تقنية ضغط الفيديو تم تطويرها لسنوات عديدة وكانت ناضجة جدًا. الآن يمكن لتقنية ضغط الفيديو تحويل 720P بسهولة. أفلام عالية الدقة ، مضغوطة إلى 10M / دقيقة ، أو 160K / ثانية. حجم ملف تسلسل الصور أصغر بعشرات المرات على الأقل. في الوقت نفسه ، تدعم معظم الأجهزة فك ضغط الفيديو ، بحيث يكون استهلاك وحدة المعالجة المركزية لتشغيل الفيديو منخفضًا جدًا ، كما أن استهلاك البطارية منخفض جدًا ، كما أن سرعة التشغيل سريعة أيضًا. حتى تشغيل الشاشة بملء 25 إطارًا يمكن تحقيقه بسهولة.
تم الانتهاء من الخطة ، وهناك العديد من المشاكل التي يتعين حلها هنا.
يمكن للفيديو بأكمله ، بما في ذلك بعض العناصر الموجودة في الفيديو ، الاستجابة لنقرات المستخدم ، والشرائح والعمليات الأخرى تحت iPhone ، ويمكن تشغيله في نافذة ، ويمكنه تصفية الخلفية ، ويمكن استخدامه مثل صورة PNG. يحل الفيديو محل الرسوم المتحركة ، ثم يدعم تأثير قناع الخلفية ، والذي يمكن أن يكشف عن الصورة الأساسية ، كما يحل مشكلة الشاشة اليدوية والتلقائية وغير المكتملة
نوافذ فون
الحل: ادمج المعالجة من خلال علامات الرسم القماشية + الفيديو
المبدأ: احصل على إطار الصورة الأصلي للفيديو وارسمه إلى الصفحة من خلال canavs
هنا أرفق الكود المصدري مباشرة ، الكود مكتوب بشكل عام ، لكن يسلط الضوء على بعض النقاط الرئيسية
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
الفيديو بدلاً من الرسوم المتحركة
هذا مرهق بعض الشيء. يجب أن تكون تفاعلية وتسحب اللوحة القماشية لتحقيق الغرض من التحكم في الصورة. لم أنتهي من كتابة كل ذلك بعد ، ولن تتوفر هذه الاحتياجات العامة للشركة. فيما يلي وصف موجز ، تتم معالجته أيضًا بواسطة canvas + video ، ولكن يلزم وجود حاوية قماشية مخزنة مؤقتًا لإجراء معالجة مسبقة. من خلال المعالجة المسبقة ، احصل على وحدات البكسل لكل صورة ، وعن طريق تغيير قيمة كل بكسل RBG ، يمكن تصفية الخلفية ، بحيث يمكن استخدامها مثل صورة PNG. سأكتبها لاحقًا وأنشرها ~~
لدينا غيرها من المنتجات:
