اخیراً ، ما در حال استفاده از ویدیو به جای انیمیشن و ویدیو به جای انیمیشن اسپریت هستیم. ما به این نوع فیلم های ویدیویی تعاملی می گوییم.
انیمیشن اسپریت سنتی: فضای بزرگ دیسک ، بارگیری کم ، به ویژه پخش آنلاین ، کندتر خواهد بود
تعداد زیادی پرونده ، تعداد زیادی درخواست http هنگام بازی آنلاین ، باعث پاسخ کند یا رفتار غیر عادی می شود. بنابراین ، نیاز فوری به توسعه مجموعه ای از فناوری برای جایگزینی انیمیشن sprite با ویدئو وجود دارد. ما این نوع ویدیوها را یک ویدیوی تعاملی می نامیم
مشکلات مربوط به ویدیوی سنتی:
1. فقط در یک ناحیه مربع شکل قابل بازی است
2. در زیر iPad ، پنجره ای برای بازی است و در زیر آیفون ، فقط در حالت تمام صفحه قابل پخش است.
3. هنگام بازی ، قطعاً در خط مقدم ظاهر می شود
فیلم تعاملی دارای ویژگی های زیر است:
در زیر آیفون ، پخش تمام صفحه مورد نیاز نیست ، می توان آن را در یک منطقه پخش کرد
فیلم تعاملی می تواند در زیر اشیا graph گرافیکی معمولی ظاهر شود
ویدیوی تعاملی می تواند ماسک داشته باشد ، بنابراین می توان پس زمینه ویدیو را حذف کرد و فیلم و اشیا graph گرافیکی معمولی را ادغام کرد
خلاصه: برای ویدیویی که برای پخش استفاده می شود ، آن را به عنوان یک ویدیوی سنتی تنظیم می کنیم. برای ویدیوهایی که باید برای اهداف خاصی استفاده شوند ، آنها را به عنوان فیلم های تعاملی تنظیم می کنیم. این تحقیقات نتایج اولیه را به همراه داشته است. ضمناً ، این خلاصه ای از مشکلات واقعی است که در چند سال آینده در توسعه صوتی و تصویری موبایل H5 به وجود آمده و راه حل های خاص خود را ارائه می دهد. نگاهی به اثر نهایی نهایی بیندازید: سازگار با PC (> IE9) ، iphone ، ipad ، Android 5.0
مشکلات دستی ، اتوماتیک و پنجره سازی در آیفون را برطرف کنید و می تواند اساساً در تولید واقعی استفاده شود. در سمت راست ، فایل اصلی mp4 ویدئو قرار دارد ، ویدئو در سمت چپ جایگزین انیمیشن می شود و سپس از اثر ماسک پس زمینه پشتیبانی می کند ، می تواند نقشه پایه را نشان دهد و از یک سری عملیات تعاملی پشتیبانی می کند
صوتی H5
هر بار که یک شی صوتی از Audio جدید عبور می کند ، یک موضوع جدید در IOS قابل مشاهده است.
راه حل: یک شی صوتی جدید ، با جایگزینی آدرس های صوتی مختلف ، به هدف باز نکردن رشته های بیشتر می رسد.
پشتیبانی در Android خوب نیست
راه حل: مشکل نسخه پایین اندروید حل نشده است. به طور کلی ، می توان با تنظیم رابط زمینه ای ، مانند گپ تلفن ، توسعه مختلط را مدیریت کرد
پخش خودکار روی آیفون امکان پذیر نیست
راه حل: پخش خودکار روی آیفون فرآیندی است که هنگام طراحی IOS انجام می شود. به نظر می رسد برای جلوگیری از سرقت خودکار ترافیک است.
به زبان ساده ، باید با شبیه سازی کاربر به صورت دستی فعال شود ، بنابراین باید در ابتدای کار این قطعه کد را فراخوانی کنیم:
کپی کردن کد
// این مشکل را برطرف کنید که مرورگر ios نمی تواند به طور خودکار صدا را پخش کند. هنگام بارگیری صوتی جدید ایجاد کنید و هنگام استفاده از src آن را جایگزین کنید.
Xut.fix = Xut.fix || {}؛
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = false است
var fixaudio = تابع () {
اگر (! isAudio است) {
isAudio = درست است؛
Xut.fix.audio = جدید صوتی ()؛
document.removeEventListener ('touchstart'، fixaudio، false)؛
}
};
document.addEventListener ('touchstart'، fixaudio، false)؛
}
کد بالا را کپی کنید
اگر چنین کدی را به بدنه متصل کردید: با فعال سازی دستی آن یک شی صوتی ایجاد کنید و سپس آن را در بخش جهانی ذخیره کنید
هنگامی که به شرح زیر استفاده می شود:
کپی کردن کد
// اگر از Xut.fix.audio برای تعیین src برای مرورگر ios استفاده می کنید ، لطفاً برای راه اندازی اولیه به app.js مراجعه کنید
if (Xut.fix.audio) {
سمعی
=
Xut.fix.audio ؛
audio.src = url ؛
} دیگری {
audio = Audio جدید (url) ؛
}
audio.autoplay = درست ؛
audio.play ()؛
به سادگی شی صوتی را جایگزین کنید. به زبان ساده ، باید شی object ایجاد شده توسط تریگر کاربر برای بازی باشد.
صوتی تصویری H5
از برچسب های ویدئو ممکن است به ندرت در ترمینال تلفن همراه استفاده شود ، پشتیبانی از Android بسیار بد است ، از نظر بصری 5.0 بهتر است. مشکل قدیمی موجود در آیفون به صورت خودکار قابل پخش نیست (صرفه جویی در داده ها ، صرفه جویی در خواهرتان !!!) و پیش فرض بازی در حالت تمام صفحه است. مدت ها بود که این پردازش ویدئو را نادیده می گرفتم. اندروید از لایه پایین استفاده می کند ، آیفون مستقیماً از VideoJS ، فلش داخلی و سوئیچ h5 استفاده می کند ، همچنین فلش دارای مشکلات پشتیبانی است. چندی پیش رئیس خواسته ای داشت. ما انیمیشن های زیادی را اعمال کردیم ، همه آنها انیمیشن های ترکیبی از مسیرهای sprite بودند ، از صدها مگابایت تا صدها مگابایت تحت یک برنامه ، بنابراین نیاز فوری به راه حل برای فشرده سازی تصاویر وجود دارد. راه حل نهایی استفاده از ویدئو به جای انیمیشن است ، زیرا فناوری فشرده سازی فیلم سالهاست که توسعه یافته و بسیار بالغ است. اکنون فناوری فشرده سازی فیلم می تواند به راحتی 720P را تبدیل کند. فیلم های با کیفیت بالا ، فشرده شده تا 10M / min ، یا 160K / sec. اندازه پرونده توالی تصویر حداقل چندین ده برابر کمتر است. در همان زمان ، اکثر دستگاه ها از رفع فشار سخت افزاری فیلم پشتیبانی می کنند ، به طوری که مصرف CPU از پخش فیلم بسیار کم است ، مصرف باتری نیز بسیار کم است و سرعت پخش نیز سریع است. به راحتی می توان به پخش تمام صفحه 25 فریم نیز دست یافت.
این طرح نهایی شده است و چندین مشکل برای حل در اینجا وجود دارد.
کل ویدیو ، از جمله برخی اشیا in موجود در ویدئو ، می تواند به کلیک کاربر ، اسلایدها و سایر عملیات زیر آیفون پاسخ دهد ، می تواند در یک پنجره پخش شود ، می تواند پس زمینه را فیلتر کند و مانند یک تصویر PNG قابل استفاده است این فیلم جایگزین انیمیشن می شود و سپس از اثر ماسک پس زمینه پشتیبانی می کند ، که می تواند تصویر پایه را نشان دهد و همچنین مشکل صفحه دستی ، خودکار و ناقص را برطرف می کند
پنجره آیفون
راه حل: ترکیب پردازش از طریق بوم + برچسب های ویدئویی
اصل: قاب تصویر اصلی فیلم را دریافت کرده و از طریق canavs آن را به صفحه بکشید
در اینجا من به طور مستقیم کد منبع را ضمیمه می کنم ، کد به طور کلی نوشته شده است ، اما چند نکته اصلی را برجسته می کند
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
ویدئو به جای انیمیشن
این کمی دست و پا گیر است. باید تعاملی باشد و بوم را بکشید تا به هدف کنترل تصویر برسید. من هنوز نگارش تمام آن را به پایان نرسانده ام و نیازهای عمومی شرکت این مورد را نخواهد داشت. در اینجا یک توضیح مختصر آورده شده است ، همچنین توسط بوم + ویدئو پردازش می شود ، اما برای انجام پیش پردازش یک ظرف بوم پنهان مورد نیاز است. از طریق پیش پردازش ، پیکسل های هر عکس را بدست آورید و با تغییر مقدار هر پیکسل RBG ، می تواند پس زمینه را فیلتر کند ، به طوری که می توان مانند یک تصویر PNG از آن استفاده کرد. بعدا می نویسم و منتشر می کنم
محصول دیگر ما:
