wechatVideoExample

wechat فيديو سبيل المثال

اختبار الكود المصدري لتشغيل مقاطع الفيديو على WeChat: نظرًا لأن WeChat يستخدم متصفح X5، تحدث مشكلات غريبة متنوعة عند استخدام علامة الفيديو لتشغيل مقاطع الفيديو. رمز المصدر هذا هو رمز مصدر مؤقت تم إنشاؤه أثناء عملية حل هذه المشكلة. يتضمن حالات اختبار متنوعة: استخدام اللوحة القماشية لتشغيل مقاطع الفيديو، واستخدام الصور لتشغيل مقاطع الفيديو، واستخدام علامات x5، وما إلى ذلك. يمكن الاحتفاظ بمكتبة التعليمات البرمجية المصدر المتوفرة، ويمكن للطلاب المهتمين تنزيلها بأنفسهم.

###بعد تنزيل المقدمة، قم بإنشاء دليل جديد على المضيف وانسخ جميع التعليمات البرمجية المصدر إلى هذا الدليل. استخدم متصفح WeChat للوصول إلى صفحة html الموجودة بالداخل للاختبار.

تشغيل الفيديو--المجموع الفرعي للمزالق

المؤلف chenjsh36 فريق تكنولوجيا تجربة البيانات المالية Ant

مع ظهور عصر حركة المرور وتحسين تكنولوجيا الأجهزة، يأمل المزيد والمزيد من مواقع الويب في تشغيل مقاطع الفيديو الخاصة بهم على أجهزة الكمبيوتر الشخصية أو الأجهزة المحمولة. إن التحسن التدريجي لتوافق <video> يجعل المطورين أكثر استعدادًا لاستخدامه سيناريوهات التشغيل.

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

المشهد 1: التشغيل التلقائي

سمة التشغيل التلقائي المنطقية؛ عند تحديدها، سيبدأ تشغيل الفيديو تلقائيًا على الفور ولن يتوقف عن انتظار تحميل البيانات.

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

محطة متنقلة

دائرة الرقابة الداخلية

في الأيام الأولى، كان مطلوبًا تشغيل علامة فيديو بإيماءة المستخدم بدءًا من الإصدار 10 ، وتم تعديل قواعد الفيديو، وخففت شركة Apple من التشغيل المضمن والتشغيل التلقائي كما يلي (تنطبق فقط على متصفح Safari):

• سيتم السماح لعناصر <video> autoplay بدون إيماءة من المستخدم إذا كانت الوسائط المصدر الخاصة بها لا تحتوي على مسارات صوتية (تسمح عناصر الفيديو التي لا تحتوي على مصادر صوتية بالتشغيل التلقائي).
• سيتم أيضًا السماح لعناصر <video muted> بالتشغيل التلقائي بدون إيماءة المستخدم.
• إذا حصل عنصر <video> على مسار صوتي أو تم إلغاء كتم صوته بدون إيماءة من المستخدم، فسيتم إيقاف التشغيل مؤقتًا.
• لن يبدأ تشغيل عناصر <video autoplay> إلا عندما تكون مرئية على الشاشة، كما هو الحال عند تمريرها إلى إطار العرض، وجعلها مرئية من خلال CSS، وإدراجها في DOM (لن يبدأ تشغيل عناصر الفيديو إلا عندما تكون مرئية على الشاشة).
• ستتوقف عناصر <video autoplay> مؤقتًا إذا أصبحت غير مرئية، مثلاً عن طريق تمريرها خارج إطار العرض.

أندرويد

__مبكرًا__ يتطلب أيضًا إيماءات المستخدم للتشغيل؛ وقد قام Chrome 53 على Android لاحقًا بتخفيف سياسة التشغيل التلقائي عن Safari في نظام التشغيل iOS، فمن الضروري ضبط التشغيل التلقائي وكتم الصوت (سواء تم كتم الصوت) على الفيديو في نفس الوقت للسماح بالتشغيل التلقائي. التشغيل؛ __يدعم متصفح FireFox وUC Browser من Android__ التشغيل التلقائي تحت أي ظرف من الظروف؛ والوضع مع متصفحات Android الأخرى غير واضح حاليًا؛

نسخة الكمبيوتر

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

متصفح سفاري

__Safari 10 والإصدارات الأحدث__ يتم تعطيل الفيديو والصوت مع الصوت بشكل افتراضي من التشغيل التلقائي لمزيد من المعلومات، يرجى الرجوع إلى هذه المقالة؛

التشغيل التلقائي ضمن Chrome (الإصدار القديم):

لا يتم تشغيل Safari (المشاركة 10) تلقائيًا:

متصفح كروم

لا يزال من الممكن تشغيل مقاطع الفيديو ذات الصوت الصامت، وسيتم تشغيل مقاطع الفيديو ذات الصوت تلقائيًا بناءً على __مؤشر مشاركة الوسائط__. فما هو مؤشر مشاركة الوسائط؟ ويرد التفسير الرسمي والأبعاد ذات الصلة:

MEI هو فهرس يقوم بتقييم مشاركة المستخدم الإعلامية على الموقع الحالي ويعتمد على الأبعاد التالية:

• بقي المستخدم على الوسائط لأكثر من 7 ثوانٍ
• يجب أن يتم عرض الصوت وعدم كتمه
• تم التفاعل مع الفيديو
• يجب ألا يقل حجم الوسائط عن 200×140.

بعد قراءة هذا، أفكار المطور هي كما يلي:

هل يمكن إجراء الاختبار تلقائيًا؟

لحسن الحظ، يوفر كل من Safari وChrome، أثناء تقييد التشغيل التلقائي، آلية لاكتشاف ما إذا كان يمكن تشغيل الفيديو تلقائيًا، بحيث يمكن للمطورين الحصول على بدائل عندما يجدون أن التشغيل التلقائي لا يمكن أن يحدث:

 var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

يفكر

لماذا تم حظر التشغيل التلقائي للفيديو في وقت سابق؟

لأنه يمكن أن يكون مزعجًا ومتعطشًا للبيانات ولا يحبه العديد من المستخدمين ( لأنه يمكن أن يكون مزعجًا ومتعطشًا للبيانات ولا يحبه العديد من المستخدمين.)

لماذا السماح بالتشغيل التلقائي مرة أخرى؟

• يستخدم بعض المطورين طرقًا أخرى مثل Canvas وgif وما إلى ذلك لتحقيق تأثير التشغيل التلقائي للفيديو، لكن الأداء واستهلاك حركة المرور أقل بكثير من تشغيل الفيديو؛
• الآن أصبحت البيانات أرخص، وأصبحت أجهزة الهاتف المحمول تتحسن باستمرار؛
• يمكن للمستخدمين تعطيل التشغيل التلقائي من خلال الإعدادات (تشغيل وضع حفظ البيانات، وما إلى ذلك)؛

لماذا يمكن لـ WeChat وDingTalk تشغيل مقاطع الفيديو تلقائيًا بالصوت ضمن نظام التشغيل IOS؟

لقد وجدت أن H5 الذي يتم تشغيله تلقائيًا يمكن رؤيته غالبًا على WeChat، ومع ذلك، فإن مثال تشغيل الفيديو الذي كتبه المؤلف مع التشغيل التلقائي والتشغيل عبر الإنترنت لا يزال لا يمكن تشغيله تلقائيًا على WeChat، ولكن يمكن تشغيله تلقائيًا على DingTalk.

متصفح النظام	مع الصوت	بدون صوت
دائرة الرقابة الداخلية دينغ توك	يدعم	يدعم
سفاري آي أو إس	منع	التشغيل التلقائي
دائرة الرقابة الداخلية وي تشات	منع	منع

من خلال الاستعلام عن المعلومات، يعتمد تطوير IOS WebAPP على نواة المتصفح التي يوفرها IOS ، لذلك يمكن تعديل أداء التشغيل التلقائي في عرض الويب لـ WebAPP. من الواضح أن DingTalk يدعم التشغيل التلقائي، بينما يحظر WeChat التشغيل التلقائي، ولكنه يوفر تشغيلًا مدمجًا الأحداث لدعم التشغيل التلقائي:

التشغيل التلقائي من خلال حدث WeixinJSBridgeReady ضمن WeChat:

 document . addEventListener (
  'WeixinJSBridgeReady' ,
  function ( ) {
    video . play ( ) ;
  } ,
  false
) ; 

السيناريو 2: معالجة ملء الشاشة

في متصفحات الهاتف المحمول، عندما ينقر المستخدم للتشغيل أو يقوم بتشغيل التشغيل من خلال واجهة برمجة التطبيقات video.play()، سيتم تشغيل الفيديو بملء الشاشة في الأعلى تجربة مستخدم أفضل، ولكن في بعض الأحيان يرغب المطورون في أن يكونوا قادرين على التحكم في وضع ملء الشاشة لتلبية الاحتياجات الأخرى.

Playsinline إلغاء ملء الشاشة

إذا كنت ترغب في التشغيل بدون ملء الشاشة، فما عليك سوى إضافة السمة Playsinline إلى علامة الفيديو. ولا تمثل هذه السمة مشكلة في متصفحات الجوال المستندة إلى webkit kernel، وإذا لم تعمل، فما عليك سوى إضافة webkit-playsinline :

 < video
    src = {videoUrl}
    webkit-playsinline =" true "
    playsinline =" true "
  />

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

توافق اللعب عبر الإنترنت

أولا وقبل كل شيء، تحتاج إلى معرفة النوى الأربعة الحالية للمتصفح في العالم:

• مايكروسوفت آي إي __ترايدنت__
• تم تطويره في الأصل بواسطة Netscape وتم بيعه لاحقًا إلى مؤسسة Mozilla ثم تطور ليصبح __Gecko__ الخاص بـ Firefox
• نواة كيدي مفتوحة المصدر __Webkit__
• الأوبرا __المعزوفة__

في:

• __Trident__ هو في الأساس متصفح مدمج لنظام WP7 على الجانب المحمول.
• يتم استخدام Presto على جميع الأجهزة المتصلة بالإنترنت وعلى محطات الهاتف المحمول، وهو بشكل أساسي إصدار Opera Mobile وOperaMini وOpen Browser وOpen HD Beta.
• تتمتع نواة __Webkit__ بنطاق أوسع من التطبيقات. وقد تم تطوير متصفحات Android الأصلية، وSafari من Apple، وChrome من Google (المستخدم في Android 4.0) استنادًا إلى نواة Webkit مفتوحة المصدر.

متصفحات الكمبيوتر المحلية الشائعة مثل UC Browser، وQQ Browser، وBaidu Mobile Browser، و360 Secure Browser، وGoogle Chrome، وSogou Mobile Browser، وCheetah Browser، وUC، وQQ، وBaidu ومتصفحات الأجهزة المحمولة الأخرى تحتوي على نواة معدلة بناءً على Webkit في جوهرها ، يمكننا أن نعتقد أن مستخدمي الأجهزة المحمولة في السوق يستخدمون بشكل أساسي نواة webkit أو المتصفحات المعدلة بناءً على webkit kernel، لذا فإن توافق playsinline جيد جدًا!

المشهد 3: التحكم في التشغيل

يوفر عنصر الفيديو أحداثًا سلوكية متعددة للمطورين للتحكم في تشغيل الفيديو، وتشمل الأحداث التي تتمتع بتوافق جيد الأحداث onded و __ontimeupdate وonplay وonplaying وما إلى ذلك . __تتصرف بعض الأحداث بشكل غير متسق على متصفحات مختلفة وأجهزة مختلفة.

على سبيل المثال: لن يتم تشغيل مراقبة ' canplay ' ضمن نظام التشغيل iOS (ما إذا كان قد تم تخزين بيانات كافية مؤقتًا للتشغيل السلس) عند التحميل، حتى لو كان __preload="auto" __ عديم الفائدة، ولكن في مصحح أخطاء Chrome على جهاز الكمبيوتر التالي، سيكون كذلك يتم تشغيله أثناء مرحلة التحميل. يجب تشغيل ios قبل أن يتم تشغيله.

محاكي كروم

اكتمل التحميل:

انقر للعب:

ماك سفاري

اكتمل التحميل:

انقر للعب

سفاري آي أو إس

اكتمل التحميل:

انقر للعب:

تتميز بعض الأحداث بخصائص عرض غير متناسقة ضمن أنظمة وأجهزة ومتصفحات مختلفة، لذا كن حذرًا عند استخدامها.

السيناريو 4: إخفاء عناصر التحكم في التشغيل

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

تحدد سمة عناصر التحكم أن المتصفح يجب أن يوفر عناصر تحكم في التشغيل للفيديو، وإلا سيتم إخفاء عناصر التحكم في التشغيل، حتى يتمكن المطورون من تخصيص عناصر التحكم في التشغيل الخاصة بهم. يتمتع إخفاء عناصر التحكم في التشغيل بتوافق جيد على أجهزة الكمبيوتر الشخصية والأجهزة المحمولة التي تعمل بنظام IOS. ومع ذلك، لا يتم دعم إخفاء عناصر التحكم في الأجهزة المحمولة التي تعمل بنظام Android، ولكن لا يزال من الممكن تحقيق ذلك من خلال بعض الطرق.

قانون التكنولوجيا السوداء

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

متصفح وي شات

قام فريق x5 kernel التابع لفريق Android التابع لـ Tencent بتخفيف القيود المفروضة على تشغيل الفيديو في نفس الوقت __لم يعد الفيديو في الأعلى، مما يسمح للعناصر الأخرى بالطفو في الأعلى .

تلخيص

بعد فهم السيناريوهات الشائعة والمزالق الشائعة لتشغيل الفيديو، يمكننا تحسين تجربة المستخدم من خلال توفير الحلول المقابلة لسيناريوهات مختلفة. على سبيل المثال، يمكن لصفحة H5 التي يتم تشغيلها تلقائيًا على الجهاز المحمول تشغيل الفيديو بشكل غير مباشر عن طريق توجيه المستخدمين للنقر أو التمرير. هذا هو النهج الأكثر تحفظًا، ولا توجد أخطاء! الحل الأفضل هو التشغيل تلقائيًا بشكل افتراضي والتقاط الموقف الذي يُحظر فيه التشغيل، ثم توجيه المستخدم للتفاعل لتحقيق تشغيل الفيديو.

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

الرجوع إلى

• تغيير سياسة التشغيل التلقائي لنظام Macos
• التشغيل التلقائي في Chrome
• التشغيل التلقائي أمر سيء بالنسبة للمستخدمين
• لماذا يستخدم عدد قليل جدًا من المتصفحات نواة Gecko؟
• نواة المتصفح

إذا كنت مهتمًا بفريقنا، يمكنك متابعة العمود أو متابعة github أو إرسال سيرتك الذاتية إلى 'tao.qit####alibaba-inc.com'.replace('####', '@'). أي شخص لديه مُثُل نبيلة مرحب به للانضمام ~

العنوان الأصلي: https://github.com/ProtoTeam/blog/blob/master/201806/1.md