WXInlinePlayer
1.3.6
مع ظهور البث المباشر ومقاطع الفيديو القصيرة، أصبح الفيديو وسيلة شائعة جدًا لإخراج معلومات التشغيل/المنتج لأنه يحمل قدرًا أكبر من المعلومات. ومع ذلك، ونظرًا لمصالح العديد من الشركات المصنعة للمتصفحات المحلية، فقد وضعوا العديد من القيود على إمكانيات الفيديو لـ HTML5، والتي لا تقتصر على:
لطرح أسئلة محددة، يرجى الرجوع إلى "تنفيذ تعدين الفيديو على الأجهزة الطرفية المتنقلة للرسوم المتحركة ذات الإطارات المعقدة" الذي كتبه فريق IMWeb التابع لشركة Tencent.
من أجل حل هذه المشكلات، قمنا بتطبيق WXInlinePlayer عن طريق فك التشفير الناعم لـ FLV. فيما يلي تقنية الطرف الثالث وواجهة برمجة تطبيقات النظام الأساسي:
وفي الوقت نفسه، كتبنا أيضًا إصدار WebAssembly من FLV Demuxer. يمكنك العثور على الكود ذي الصلة في lib/codec.
يستخدم اختبار التوافق النماذج ذات الصلة التي توفرها خدمة BrowserStack، كمرجع فقط:
https://eroszy.github.io/WXInlinePlayer/example/index.html
الرجاء التأكد من تثبيت الطرود/emscripten 1.38.45/cmake وmake، ثم تنفيذ الأمر التالي:
npm install # 初始化工程
npm update # 更新工程有关的插件。如果网络错误，改用 cnpm update
bash build.shسيكون المنتج النهائي في مجلد المثال.
يرجى الملاحظة:
- يرجى إنشاء بيئة *nix غير مضمونة.
- الرجاء التأكد من وجود emscripten في الإصدار 1.38.45، وإلا ستحدث أخطاء Wasm32.
- يجب أن يكون إصدار cmake 3.16+
<!DOCTYPE html >
< html >
< head >
< meta charset =" UTF-8 " />
< title > WXInlinePlayer </ title >
< style >
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
</ style >
</ head >
< body >
< canvas id =" container " width =" 800 " height =" 450 " > </ canvas >
< script src =" ./index.js " > </ script >
< script >
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( {
url : 'https://static.petera.cn/mm.flv' ,
$container : document . getElementById ( 'container' ) ,
hasVideo : true ,
hasAudio : true ,
volume : 1.0 ,
muted : false ,
autoplay : true ,
loop : true ,
isLive : false ,
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
customLoader : null
} ) ;
const { userAgent } = navigator ;
const isWeChat = / MicroMessenger / i . test ( userAgent ) ;
if ( ! isWeChat ) {
alert ( 'click to play!' ) ;
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;
}
} ) ;
}
</ script >
</ body >
</ html >في الدليل الجذر للمشروع، أدخل الأمر لبدء الخادم:
npm run serveثم أدخل عنوان URL للوصول إلى العرض التوضيحي:
http://localhost:8888/example/index.html
ما إذا كانت بيئة التنفيذ الحالية تدعم WXInlinePlayer.
if ( WXInlinePlayer . isSupport ( ) ) {
console . log ( 'WXInlinePlayer support' ) ;
}لتهيئة WXInlinePlayer، تحتاج إلى إدخال العنوان المحدد لمكتبة فك التشفير H264 المحملة لاختيار مكتبة فك التشفير، يرجى الرجوع إلى: كيفية اختيار تبعيات فك التشفير.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) . catch ( e => {
console . log ( `WXInlinePlayer init error: ${ e } ` ) ;
} ) ;
}WXInlinePlayer جاهز ويمكن تهيئته بأمان.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( { /*.....*/ } ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
console . log ( 'WXInlinePlayer ready' ) ;
} ) ;
}منشئ WXInlinePlayer، يرجى الرجوع إلى: معلمات التهيئة لمعلمات التهيئة ذات الصلة.
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( { /*...*/ } ) ;
} ) ;لتشغيل الفيديو. تجدر الإشارة إلى أنه نظرًا لقيود المتصفح (باستثناء إصدارات WeChat وChrome الأقل من 66)، قامت الإصدارات الأعلى بتعطيل التشغيل التلقائي للصوت، لذا قد لا يكون الاتصال بهذه الطريقة مباشرةً فعالاً، يرجى النقر/touchstart/touchend/touchmove، وما إلى ذلك. اسمح للمستخدمين إثارة الأحداث بشكل نشط.
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;يوقف المشغل بأكمله ولا يمكن استئنافه.
player . stop ( ) ;إيقاف التشغيل الحالي مؤقتًا.
player . pause ( ) ;يستأنف العملية المتوقفة مؤقتًا بسبب الإيقاف المؤقت.
player . resume ( ) ;الحصول على/ضبط مستوى الصوت الحالي.
const volume = player . volume ( ) ; // get volume
player . volume ( volume ) ; // set volumeالحصول على/تعيين حالة كتم الصوت.
const muted = player . mute ( ) ; // get mute
player . mute ( muted ) ; // set muteقم بتدمير اللاعب وتحرير كل الذاكرة لإعادة التدوير.
player . destroy ( ) ;احصل على وقت التشغيل الحالي. يرجى ملاحظة أنه قد تكون هناك قيم سلبية، لذا يرجى التعامل معها بعناية.
player . on ( 'timeUpdate' , ( ) => {
let currentTime = player . getCurrentTime ( ) ;
currentTime = currentTime <= 0 ? 0 : currentTime ;
} ) ;يمكن فهم المدة القابلة للتشغيل على أنها مدة التخزين المؤقت.
player . on ( 'timeUpdate' , ( ) => {
const duration = player . getAvaiableDuration ( ) ;
} ) ; يوجد حاليًا 3 مجموعات من مكتبات فك التشفير، وهي:
الفرق هو:
نوصي باستخدام baseline.asm/baseline.wasm عند تشغيل مقاطع فيديو إعلانية/مقاطع فيديو تسويقية/مقاطع فيديو رسوم متحركة صغيرة حساسة لحجم المكتبة التابعة، واستخدامها عند تشغيل مقاطع فيديو حسب الطلب/مقاطع فيديو مباشرة غير حساسة لحجم المكتبة التابعة حجم المكتبة التابعة all.asm/all.wasm.
على جهاز التطوير، لنفس الفيديو، تتمتع تطبيقات WXInlinePlayer وFFMpeg مثل Taobao وHuajiao باستخدام مماثل للذاكرة واستخدام وحدة المعالجة المركزية. الأداء العام لـ WXInlinePlayer أفضل بحوالي 5-10% من حل FFMpeg، في حين أن H265 قلل من إلغاء الحظر. أداءه أفضل بنسبة 30% تقريبًا من حل FFMpeg وفيما يلي مقارنة لأداء تشغيل H265:
يأتي التأخير والتأخير في WXInlinePlayer بشكل أساسي من ثلاثة أماكن:
بشكل عام، إذا كانت بيئة الشبكة الخاصة بالمستخدم جيدة، فمن الصعب التسبب في اختناق بسبب استخدام WebGL في العرض (العملية بسيطة جدًا)، مما يؤدي عمومًا إلى تأخيرات وتأخيرات مستمرة بسبب عدم كفاية أداء فك التشفير الناعم.
لتحسين التأخير الناتج عن عدم كفاية أداء فك التشفير، نبدأ بشكل عام من عدة أماكن:
حاليًا، يمكن لـ WXInlinePlayer فك تشفير مقاطع الفيديو بدقة 1280 × 720 ومعدل الكود 1024 ومعدل الإطارات 24 إطارًا في الثانية على الأجهزة المتوسطة إلى المتطورة بسلاسة نسبيًا.
فيما يتعلق بمعلمات الفيديو المذكورة أعلاه، يمكنك مشاهدتها من خلال FFmpeg:
ffmpeg -i " your.flv "نقدم هنا ملف التعريف/معدل الإطارات/معدل الكود/الدقة للمنصات الرئيسية كمرجع:
| منصة | يكتب | الوضوح | حساب تعريفي | معدل الإطار | معدل الكود | دقة |
|---|---|---|---|---|---|---|
| أسنان النمر | شاشة أفقية | SD | عالي | أربعة وعشرون | 500 ألف | 800x450 |
| أسنان النمر | شاشة أفقية | عالية الدقة | عالي | أربعة وعشرون | 1200 ألف | 1280x720 |
| أسنان النمر | شاشة عمودية | عالية الدقة | رئيسي | 16 | 1280 ألف | 540x960 |
| تشيشيو | شاشة عمودية | SD | عالي | 15 | 307 ألف | 204x360 |
| تشيشيو | شاشة عمودية | عالية الدقة | عالي | 15 | 512 ألف | 304x540 |
| تشيشيو | شاشة عمودية | فائقة الوضوح | خط الأساس | 15 | 1440 ألف | 720x1280 |
| تيك توك | شاشة عمودية | تقصير | عالي | 30 | 1600 ألف (المزيد من التغييرات، كمرجع فقط) | 720x1280 |
| عامل سريع | شاشة عمودية | تقصير | عالي | 25 | 2880 كيلو (المزيد من التغييرات، للإشارة فقط) | 720x1280 |
نحن ننصحك بما يلي:
معلمات التكوين ذات زمن الوصول المنخفض شائعة الاستخدام الخاصة بـ WXInlinePlayer هي كما يلي، كمرجع فقط، يرجى ضبطها وفقًا لتكوين ملف البث المباشر/عند الطلب:
{
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
}في الوقت نفسه، يمكنك استخدام حدث الأداء لتحديد أداء فك التشفير الحالي، ثم مطالبة المستخدم والرجوع إلى حل النسخ الاحتياطي الخاص بك (مثل تشغيل الفيديو المباشر/الصور الثابتة/إطارات التسلسل، وما إلى ذلك):
player . on ( 'performance' , ( { averageDecodeCost , averageUnitDuration } ) => {
const prop = averageUnitDuration / averageDecodeCost ;
if ( prop >= 2.0 ) {
console . log ( 'good performance' ) ;
} else if ( prop < 2.0 && prop >= 1.0 ) {
console . log ( 'ok, thats fine' ) ;
} else {
console . log ( 'bad performance' ) ;
}
} ) ; يواجه حل FFmpeg حاليًا العديد من المشكلات الرئيسية، الأول هو حجم مكتبة فك التشفير بعد التخفيض، ويبلغ حجم gzip حوالي 600 كيلو بايت. ثانيًا، من الصعب تحسين حل FFmpeg بنفسك. على سبيل المثال، سيقوم WXInlinePlayer بفك تشفير العديد من العمال في الإصدار 2.0، وهو أمر مكلف للغاية لتعديل مثل هذا الحل.
أسباب التأخير والتأخير معقدة بالنسبة لـ WXInlinePlayer، لا يمكن لسرعة فك التشفير عمومًا مواكبة سرعة التشغيل، يرجى الرجوع إلى كيفية تقليل التأخير والتأخير من أجل التحسين.
قام كل من iOS وAndroid UC بإخصاء WebAssembly/ASM.js، لذا فهم ببساطة لا يدعمونه.
الرجاء استخدام FFmpeg أو أدوات أخرى مماثلة فيما يلي مثال بسيط للأوامر:
ffmpeg -i " your.mp4 " -vcodec libx264 -acodec aac out.flvتتبع مواصفات FLV الخاصة بـ WXInlinePlayer مواصفات توسيع FLV الخاصة بـ Kingsoft. إذا كنت بحاجة إلى إجراء ترميز ذي صلة، فيمكنك الرجوع إلى تصحيح FFmpeg ذي الصلة أو برنامج التشفير المكتوب بواسطة Kingsoft.
