تحميل الفيديو إلى YouTube وVimeo باستخدام مكون السمة

[ti0]

يتيح هذا المكون الجديد للموضوع رفع مقاطع الفيديو من محرر Discourse إلى YouTube وVimeo. بالنسبة لأولئك الذين يعرفون بالفعل الإضافة التي طورتها مؤخرًا، فإن نفس الوظيفة متاحة الآن في هذا المكون الذي يمكن إضافته إلى أي موضوع. هذا يجعل التثبيت أسهل بكثير ويعمل بنفس الطريقة تمامًا مثل الإضافة.

الميزات

يمكن لجميع أعضاء المنتدى رفع مقاطع الفيديو إلى Vimeo أو YouTube (يمكن للمسؤولين اختيار تمكين أي منهما أو كليهما).

يمكن للمسؤولين التحكم في خيارات الخصوصية الخاصة بالعرض والتضمين للمقاطع المرفوعة إلى Vimeo باستخدام إعدادات المسؤول.

يمكن للمستخدم التحكم في خصوصية العرض للمقاطع المرفوعة إلى YouTube من نافذة الرفع.

يمكنك مشاهدة عرض توضيحي للإضافة هنا (كل شيء متطابق في المكون باستثناء صفحة الإعدادات. توجد صفحة إعدادات المكون تحت المسؤول > تخصيص > مكونات > رفع الفيديو):

Discourse Video Upload Plugin with YouTube and Vimeo Demo

التكوين

مهم: للمكونات، يجب عليك التأكد من تفعيل المكون للموضوعات المستخدمة في نسختك (إما النقر على إضافة جميع الموضوعات أو اختيار الموضوعات التي تريدها).

يُذكر أدناه إعداد المطور لتمكين الرفع إلى YouTube وVimeo. إذا كنت تفضل أن يقوم شخص آخر بذلك، فيمكنك طلب الدعم بالاتصال بي، @ti0.

لرفع مقاطع الفيديو إلى YouTube

تذهب مقاطع الفيديو المرفوعة إلى YouTube إلى حساب المرفِع، على عكس مقاطع الفيديو المرفوعة إلى Vimeo التي تذهب إلى حساب مشترك.

عرض الخطوات

• أنشئ حسابًا ومشروعًا على https://console.developers.google.com

• فعّل YouTube Data API v3

• قم بإعداد شاشة الموافقة على OAuth للمستخدمين الخارجيين (ما لم يكن جميع مستخدمو منتدى Discourse الخاص بك تابعين لمنظمة Google واحدة).

• قم بإعداد بيانات الاعتماد الخاصة بك:

  • أنشئ معرف عميل OAuth
  • اختر نوع تطبيق الويب
  • أضف عنوان URL الخاص بنسخة Discourse الخاصة بك في قسم أصول JavaScript المصرح بها

• انسخ معرف العميل المولد فقط

• انتقل إلى صفحة إعدادات المكون في لوحة تحكم Discourse، والصق معرف العميل في حقل youtube api client id.

• فعّل رفع مقاطع الفيديو على YouTube بتفعيل الإعداد: youtube upload enabled

• عدّل خيارات خصوصية العرض الافتراضية لـ YouTube إذا لزم الأمر.

• يجب أن تكون قادرًا الآن على رفع مقاطع الفيديو من محرر مواضيع Discourse مباشرة إلى YouTube.

لرفع مقاطع الفيديو إلى Vimeo

بمجرد إعداد المكون بالخطوات التالية، سيتمكن جميع مستخدمو المجتمع من رفع مقاطع الفيديو إلى حساب Vimeo الخاص بك.

أنت مسؤول عن الحدود والاستخدام الخاص بحساب Vimeo الخاص بك.

عرض الخطوات

• أنشئ حسابًا وتطبيقًا على Vimeo Developers:
  https://developer.vimeo.com/apps/new

• أنشئ رمز وصول مع أذونات الرفع

• انتقل إلى صفحة إعدادات المكون في لوحة تحكم Discourse، وأضف رمز الوصول المولد في إعداد vimeo api access token، ثم احفظ

• فعّل رفع مقاطع الفيديو إلى Vimeo بتفعيل إعداد vimeo upload enabled.

• عدّل خيارات الخصوصية الخاصة بالعرض والتضمين

  • راجع هذه الصفحة على Vimeo للحصول على خيارات الخصوصية: privacy.view وprivacy.embed

• يجب أن تكون قادرًا الآن على رفع مقاطع الفيديو من محرر مواضيع Discourse مباشرة إلى Vimeo

نشر مقطع فيديو

• لنشر مقطع فيديو، أنشئ موضوعًا جديدًا أو ردًا على موضوع موجود.

• انقر على زر رفع إلى فيديو الجديد في شريط أدوات المحرر (أيقونة الفيديو). يظهر هذا الزر فقط إذا قمت بتمكين YouTube أو Vimeo (أو كليهما) في إعدادات الإضافة.

• اختر ملف فيديو وعدّل التفاصيل مثل العنوان والوصف إذا رغبت في ذلك.

• انقر على زر رفع إلى Vimeo أو رفع إلى YouTube.

  • ستعتمد الأزرار المعروضة على ما إذا كنت قد فعّلت رفع مقاطع الفيديو على YouTube / Vimeo (أي منهما أو كليهما).

  • سيُظهر لك تقدم الرفع، ثم سينتظر حتى تكتمل عملية الترميز للمقطع.

  • ستبقى النافذة منفتحة حتى تكتمل عملية الترميز.

  • بمجرد اكتمال الترميز، سيتم إضافة رابط الفيديو إلى المحرر (ما لم تكن هناك مشكلة في الترميز).

• احفظ المنشور، ويمكن لجميع مستخدمي المجتمع الآخرين مشاهدة الفيديو الخاص بك
  (اعتمادًا على خيارات الخصوصية التي اخترتها).

طلبات الميزات

يمكنك طلب ميزات إضافية أو دعم عن طريق الاتصال بي @ti0.

المساهمات

إذا وجدت هذا المكون للموضوع مفيدًا، فيرجى النظر في التبرع للمطور باستخدام رابط PayPal هذا: PayPal.Me

المساهمات الكبيرة والصغيرة مرحب بها بالتساوي

إذا كنت ترغب في تحسين المكون / الإضافة، فإن طلبات السحب (PRs) مرحب بها.

	معاينة	معاينة منشئ الموضوع
	المستودع	discourse-video-upload
	دليل التثبيت	كيفية تثبيت موضوع أو مكون موضوع
	جديد في موضوعات Discourse؟	دليل المبتدئين لاستخدام موضوعات Discourse

[Canapin (Coin-coin le Canapin)]

@ti0

This makes for a much easier installation and works in exactly the same way as the plugin.

Will the plugin be discontinued then?

[ti0]

Not right now, but I think it will be much easier just to maintain the theme component. I will keep the plugin around for now, but recommend migrating to the theme component.

[Don]

Thank you @ti0 This is awesome again Much easier to use a theme component then a plugin.

One question. Can you add these text to translate? Uploading , Transcoding Video and the video details title, description etc? Thank you!

[ti0]

@Don all labels in the component can be customized now

[Don]

Hello

I really like your component thank you again to make it.

It worked super good but now we have some problem
Sometimes we have error while transcoding video (only mp4 files) status.error.transcode. The video is upload correctly but only shown on Vimeo and not place the link in composer.

The other problem is we cannot upload mp4 files from MacOS Safari browser.

Is that possible to solve these problems somehow?

Thank you for your answer!

[ti0]

Hello @Don, thanks for catching this edge case on MacOS Safari. It looks like an issue in Safari (a reference on SO), I have fixed this issue in the theme component, so once you update it, then refresh the page, you should be able to upload mp4 from Safari. I just tested on my own machine and it works now.

Regarding transcode errors, that happens on the Vimeo end, no way to do anything on our side.

[Don]

Thank you for the quick fix! Now it works great on Safari

[Don]

مرحبًا @ti0،

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

[anon82467725]

@دون، منشور: 6، موضوع: 170079

المشكلة الأخرى هي أننا لا نستطيع رفع ملفات mp4 من متصفح سفاري على نظام macOS.

نفس الشيء هنا، لكن يبدو أن المشكلة تؤثر الآن على موزيلا فايرفوكس على جميع المنصات.

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

[Don]

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

في المكون، يوجد
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

إذا كنت محقًا، فهذا يعني أنه بعد عملية التحميل، يتم إرسال طلب إلى Vimeo كل 10 ثوانٍ، وهو ما يفسر ظهور عملية الانتظار حتى اكتمال الفيديو. لأن واجهة برمجة تطبيقات Vimeo لا تدعم Webhooks وما شابه… لذا نحتاج إلى إرسال طلبات دورية لمعرفة ما إذا كانت عملية الترميز لا تزال جارية أم أنها انتهت.

لقد غيّرت هذه القيمة إلى 60 ثانية بالنسبة لنا حتى نصل إلى حل أفضل، وهذا سيكون كافيًا لمعظم عمليات التحميل لتجاوز طلب عملية الانتظار. لقد اختبرت ذلك مع ملفات صغيرة بحجم ~10 ميجابايت، ومتوسطة بحجم ~500 ميجابايت، وكبيرة بحجم ~2 جيجابايت.
مع الملفات الصغيرة، تكون مدة الانتظار بضع ثوانٍ (~4-5 ثوانٍ)، ومع الملفات المتوسطة (~10-15 ثانية)، ومع الملفات الكبيرة (~40-45 ثانية). أعتقد أن ذلك يعتمد على حجم الملف المُحمّل.
يبدو أن الأمر يعمل، ولكن إذا استغرقت عملية الانتظار للتحويل أكثر من 60 ثانية، فسيتم لصق الرابط كما كان من قبل. إذا أمكننا تجاوز عملية الانتظار هذه، فسيكون ذلك أفضل.

[Zup]

أفضّل أن تذهب تحميلات Vimeo إلى حساب المصوّر بدلاً من حسابي المشترك… هل هذا ممكن؟

[linzo (Collins)]

@ti0 لا أدري إن كان الأمر يخصني فقط، لكنني أعتقد أن هناك خللًا ما. عملية التحميل عالقة عند المصادقة، ويظهر الخطأ التالي في وحدة تحكم كروم:

تم حظر بعض الموارد لأن مصدرها غير مدرج في سياسة أمان المحتوى (CSP) الخاصة بموقعك. تعتمد سياسة أمان المحتوى لموقعك على قائمة السماح، لذا يجب إدراج الموارد في قائمة السماح للوصول إليها.

يتم تعيين سياسة أمان المحتوى للموقع إما عبر رأس HTTP (مستحسن) أو عبر وسم meta في HTML.

لحل هذه المشكلة، قم بإحدى الخطوات التالية:

1. (مستحسن) إذا كنت تستخدم قائمة السماح لـ `'script-src'`، ففكر في التحويل من سياسة أمان محتوى قائمة على السماح إلى سياسة صارمة، لأن السياسات الصارمة أكثر متانة في مواجهة هجمات XSS. راجع كيفية تعيين سياسة أمان محتوى صارمة.

2. أو تحقق بعناية من أن جميع الموارد المحظورة موثوقة؛ وإذا كانت كذلك، فأدرج مصادرها في سياسة أمان المحتوى لموقعك. ⚠️ لا تضيف أبدًا مصدرًا لا تثق به إلى سياسة أمان محتوى موقعك. إذا لم تكن تثق بالمصدر، ففكر في استضافة الموارد على موقعك الخاص بدلاً من ذلك.

الموارد المتأثرة
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`

محظور script-src-elem api.js:12

[ti0]

@linzo هذه مشكلة تتعلق بـ CSP، وليس لها علاقة بمكون السمة. يرجى قراءة معلومات حول سياسة أمان المحتوى (CSP) في Discourse هنا: Mitigate XSS Attacks with Content Security Policy

@Zup

أفضّل أن تذهب تحميلات Vimeo إلى حساب المصّور بدلاً من حسابي المشترك… هل هذا ممكن؟

@Zup، هذا طلب ميزة إضافية - ممكن بالطبع لكنه يتطلب عملًا إضافيًا يجب دفع ثمنه إذا أردت تنفيذه. أخبرني إذا كنت ترغب في ذلك.

@Don

إذًا لا يمكن عرض الفيديو بشكل منبثق وتشغيله على المنتدى لأنه غير جاهز.

آسف على التأخير في الرد - نعم، هناك عملية ترميز بعد التحميل، وسيظهر مربع حوار التحميل ذلك قبل تضمين الفيديو. هذا يعمل كما هو متوقع من جهتي. ينتظر حتى يكتمل الترميز، ثم يغلق المربع ويدمج الفيديو. إليك عرض توضيحي:

[debryc (Deborah Chang)]

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

لقد حاولت عرضه في معاينة منشئ السمط، وتلقيت إشعارًا بـ “مرفوض الوصول”.

[Don]

مرحبًا ديبورا،

نستخدمه في منتدانا مع رفع ملفات الفيديو إلى Vimeo، ويعمل بشكل ممتاز على جميع الأجهزة. عملية الاختيار مشابهة لـ Discourse، ولكن بعد اختيار الفيديو، يجب عليك النقر على زر “رفع Vimeo” أو “YouTube” لبدء التحميل.

[debryc (Deborah Chang)]

هل منتداك عام؟ هل يمكنني الاطلاع عليه؟ أود جدًا رؤيته يعمل! ما هو الرابط؟

[davidkingham]

هذا يعمل بشكل رائع! ستكون ميزة رائعة إمكانية رفع الفيديوهات إلى مجلد معين على Vimeo حتى أتمكن من فصل تحميلات المستخدمين عن تحميلاتي الخاصة. شكرًا لك على هذا!

[ti0]

يسعدنا أن تعجبك إذا كنت مستعدًا للمساهمة في طلب الميزة هذا، يمكنني تنفيذه أو يمكنك تقديم طلب دمج (PR)، أخبرني بذلك.

[debryc (Deborah Chang)]

هل يمكن إضافة التسميات التوضيحية للفيديوهات تلقائيًا وعرضها افتراضيًا؟ هذا مهم جدًا بالنسبة لنا لضمان إمكانية الوصول.