أفضل إضافات مشغل الفيديو المتميزة لـ WordPress

 

أفضل إضافات مشغل الفيديو المتميزة لـ WordPress


إضافة Ultimate Video Player Premium WordPress

وصف حول البرنامج الإضافي لمشغل الفيديو

يعد Ultimate Video Player مشغل فيديو قويًا وفريدًا من نوعه يستخدم قوائم التشغيل لتشغيل ملفات الفيديو والصوت المحلية أو المستضافة ذاتيًا أو المتدفقة، Youtube، Vimeo، Vimeo Pro، البث المباشر، HLS، DASH MPEG، مقاطع فيديو 360 درجة / VR، Google Adsense، VAST & VMAP وغير ذلك الكثير.

يرجى الملاحظة: 

إن تثبيت وتكوين Ultimate Video Player WordPress Plugin ليس معقدًا ولكن لأنه يحتوي على الكثير من الإعدادات القابلة للتخصيص فقد يبدو معقدًا، لذا يرجى مراجعة ملف المساعدة بالكامل ومشاهدة الفيديو  التعليمي  قبل محاولة تثبيته في موقع WordPress الخاص بك.

يعد Ultimate Video Player متوافقًا مع أي سمة WordPress ولا يعتمد على أي شيء.


تثبيت الإضافة 

بعد شراء البرنامج الإضافي من  CodeCanyon ، ستجد داخل ملف zip الرئيسي البرنامج الإضافي القابل للتثبيت  fwduvp.zip ،  وفيديو تعليمي

خطوات التثبيت

  • 1. في لوحة إدارة  WordPress الخاصة بك، انتقل إلى المكونات الإضافية  >  إضافة جديد .
  • 2. قم بتحميل  ملف البرنامج المساعد fwduvp.zip  الذي قمت بتنزيله من CodeCanyon.
  • 3. انقر فوق  التثبيت الآن .
  • 4. إذا نجحت العملية، انقر فوق تنشيط البرنامج الإضافي لتنشيطه، أو العودة إلى مثبت البرنامج الإضافي.

تحديث

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


طريقة الاستخدام 

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

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

لذلك أشجعكم على مشاهدته من البداية إلى النهاية.


الإعدادات المسبقة

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

بعد ذلك سيكون لديك حق الوصول إلى  زر تحديث الإعداد المسبق  الذي يسمح لك بحفظ إعدادات الإعداد المسبق المعدلة. 

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


قوائم التشغيل

الخطوة التالية هي إنشاء قائمة التشغيل الخاصة بك عن طريق النقر فوق  الزر إضافة قائمة تشغيل رئيسية جديدة  وإعطاء قائمة التشغيل الرئيسية اسمًا.

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

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

وأشرح أيضًا جميع الأنواع بالتفصيل في هذا  الفيديو التعليمي .


الرمز المختصر

بعد إنشاء الإعداد المسبق وقائمة التشغيل، استخدم منشئ الرمز المختصر لإضافة المشغل إلى صفحتك أو منشورك أو منشورك المخصص.


موارد

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


فيديو الواقع الافتراضي بزاوية 360 درجة

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

الخطوة التالية هي إضافة الفيديو إلى قائمة التشغيل، وتعيين  Is 360 degree / VR  على  yes ، وهناك أيضًا معامِلان إضافيان يمكنهما التلاعب بالواقع الافتراضي، الأول هو  دوران بدء تشغيل الفيديو 360  وهو دوران الفيديو أفقيًا بالدرجات، على سبيل المثال، قد ترغب في بدء تشغيل الفيديو في موضع معين، لذلك يمكنك إضافة زاوية معينة هنا لتدوير الفيديو ويمكن أن يكون رقمًا من -360 إلى 360.

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

لقد قمت بإنشاء فيديو تعليمي لإظهار ذلك أثناء العمل على Easy Video Player، والتركيب مختلف بعض الشيء ولكنه سيساعدك على فهم كيفية الاختبار وكيف يعمل  الفيديو التعليمي المباشر .


ختم بصمة الأصبع

من فضلك شاهد هذا  الفيديو التعليمي .


جوجل درايف

لهذا قمت بإنشاء  فيديو تعليمي ، يرجى مشاهدته من البداية إلى النهاية.

https://www.googleapis.com/drive/v3/files/[file_id]?alt=media&key=[api_key]&v=[.mp4][.mp3]

مثال على ملف .mp4 العامل:

https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZNHNtZTlXUm1UUUE?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp4

وملف mp3:

https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZVG0zc2pzalVCVjg?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp3 .


دروبوكس

انسخ رابط الفيديو أو الصوت الموجود في Dropbox، ثم استبدل www.dropbox.com بـ dl.dropboxusercontent.com.

وبالتالي فإن عنوان URL:

https://www.dropbox.com/s/abcd/file.mp4?dl=0&type=.mp3

سوف تصبح:

 https://dl.dropboxusercontent.com/s/acbd/file.mp4?dl=0&type=.mp3 . 

إذا كنت تستخدم ملفات mp4 قم بتغيير النوع إلى .mp4 مثل هذا &type=.mp4 .


جوجل ادسنس

يرجى مشاهدة هذا  الفيديو التعليمي  للحصول على مزيد من المعلومات.


بدء تشغيل الفيديو في وقت محدد باستخدام الطوابع الزمنية

من الممكن بدء تشغيل مقطع فيديو في وقت محدد عن طريق إضافة علامة زمنية كجزء من عنوان URL الخاص بالمشغل، ويجب أن يكون التنسيق على النحو التالي  t=hours[h]minutes[m]seconds[s]،  ويجب أن تكون الساعات والدقائق والثواني أعلى من 59، وفيما يلي بعض الأمثلة على النحو التالي  t=0h2m30s  ،  t=0h30m2s ،  t=20m40s .

هذا السلسلة هي جزء من عنوان URL على سبيل المثال:

https://www.videoplayer-domain.com/#t=0h30m2s

أو إذا تم استخدام الارتباط العميق 

https://www.videoplayer-domain.com#/?playlistId=0&videoId=0&t=0h30m2s.

معاينة الصور المصغرة

يرجى متابعة هذا  الفيديو التعليمي .vtt  وبرنامج  تعليمي لمعاينة الصورة المصغرة المباشرة هنا .


كروم كاست

من فضلك اتبع هذا  الفيديو التعليمي .


مفتاح API لليوتيوب

إذا كنت تريد استخدام قائمة تشغيل YouTube أو قنوات قناة YouTube كنوع من قائمة التشغيل، فسيتعين عليك الحصول على مفتاح API الخاص بـ YouTube، يرجى اتباع هذا  الفيديو التعليمي .


تحليلات جوجل

لقد قررت أن يكون الفيديو التعليمي أفضل لشرح هذه الميزة، لذا يرجى مشاهدة  هذا الفيديو التعليمي

تعريفات مخصصة

  • اسم الفيديو
  • رابط الفيديو
  • النسبة المئوية للعب
  • توقفت في الوقت المحدد
  • مدة
  • شاشة كاملة

افتح في صندوق الضوء

هناك طريقتان لفتح EVP في صندوق الضوء، الأولى باستخدام الكود والثانية باستخدام رمز مختصر إضافي.

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

يرجى مشاهدة هذا  الفيديو التعليمي  للحصول على مزيد من المعلومات.

<script type="text/javascript">

var lightboxIntervalId;
openLightboxWhenPageReady();
function openLightboxWhenPageReady(){
clearInterval(lightboxIntervalId);
if(window["fwduvpPlayer0"]){
window["fwduvpPlayer0"].showLightbox();
}else{
lightboxIntervalId = setInterval(openLightboxWhenPageReady, 100);
}
};
</script>

لفتح المشغل عن طريق الضغط على زر أو صورة (عنصر HTML) استخدم الكود أدناه

<button type="button" onclick="window['fwduvpPlayer0'].showLightbox()">Open lightbox</button>

فتح في نافذة منبثقة

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

في الصفحة أو المنشور الذي تريد فتح النافذة المنبثقة فيه، أضف هذا الكود في محرر النصوص في علامة تبويب النص أو مباشرة في الصفحة.

تقبل وظيفة openPopup ثلاثة معلمات، page: عنوان URL للصفحة، والصفحة التي سيتم فتحها في النافذة المنبثقة، والصفحة التي تم إنشاؤها باستخدام الإعداد المسبق مع تعيين نوع العرض على ملء الشاشة، width: عرض النافذة بالبكسل، height: ارتفاع النافذة بالبكسل.

<script type="text/javascript">
function openPopup(page, width, height){
var left = parseInt((screen.width - width)/2);
var top = parseInt((screen.height - height)/2);
if(FWDUVPUtils.isMobile){
self.popupWindow = window.open(page);
}else{
self.popupWindow = window.open(page,"",'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
}
}
</script>
<!-- Add a button -->
<button onclick="openPopup('page_to_open.html',800 , 400)"">Click me</button>

API - واجهة برمجة التطبيقات

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

يمكنك الوصول إلى مثيلات المشغل حسب ترتيبها في الصفحة باستخدام اسم "fwduvpPlayer" مع ترتيبها بعده، بدءًا من 0.

على سبيل المثال، إذا كان لديك مثيلان، فإن اسميهما هما "fwduvpPlayer0" و"fwduvpPlayer1". فيما يلي مثال لكيفية استخدام واجهة برمجة التطبيقات في محرر WordPress أو في قسم التعليمات البرمجية في صفحتك:

<script type="text/javascript">
addEvents();
function addEvents(){
if (!window.fwduvpPlayer0){
setTimeout(addEvents, 100);
}else{
fwduvpPlayer0.addListener(FWDUVPlayer.READY, onReady);
fwduvpPlayer0.addListener(FWDUVPlayer.PLAY, onPlay);
}
}
function onReady(){
console.log("player ready");
}
function onPlay(){
console.log("current playing video id: " + fwduvpPlayer0.getVideoId());
}
function playNextVideo(){
fwduvpPlayer0.playNext();
}
</script>
<!-- Add a button -->
<button onclick="playNextVideo()">Play next video</button>

طُرق الحصول على معرف قائمة التشغيل

getPlaylistId():رقم

إرجاع معرف قائمة التشغيل الحالية، ويبدأ العد من 0.

الحصول على معرف الفيديو

getVideoId():رقم

يتم إرجاع معرف الفيديو الحالي، ويبدأ العد من 0.

الحصول على مصدر الفيديو

الحصول على مصدر الفيديو (): سلسلة

قم بإرجاع مسار مصدر الفيديو إذا كان الفيديو من الخادم أو معرف YouTube إذا كان يتم تشغيل الفيديو من YouTube.

الحصول على مصدر الملصق

الحصول على مصدر الملصق (): سلسلة

إرجاع مصدر الملصق.

احصل على الوقت الحالي

الحصول على الوقت الحالي (قيمة: سلسلة): سلسلة

إرجاع الوقت الحالي. يمكن أن تكون معلمة القيمة عبارة عن text(hh:mm:ss) أو ثوانٍ أو مللي ثانية.

  • val (String - مطلوب)  - يمكن أن يكون هذا ثوانٍ أو ميلي ثانية.

الحصول على إجمالي الوقت

getTotalTime(val:String):String

قم بإرجاع إجمالي وقت/مدة الفيديو. يمكن أن تكون معلمة val عبارة عن text(hh:mm:ss) أو ثوانٍ أو مللي ثانية.

  • val (String - مطلوب)  - يمكن أن يكون هذا ثوانٍ أو ميلي ثانية.

انتقل إلى ملء الشاشة

اذهب إلى ملء الشاشة:void

ضبط مشغل الفيديو على ملء الشاشة.

يلعب

لعب ():باطل

بدء / تشغيل التشغيل.

تشغيل التالي

تشغيل التالي ():void

قم بتشغيل الفيديو التالي.

تشغيل السابق

playPrev():void

تشغيل الفيديو السابق.

تشغيل عشوائي

playShuffle():void

تشغيل فيديو عشوائي.

تشغيل الفيديو

تشغيل الفيديو(id:Number):void

تشغيل مقطع فيديو بناءً على معرف الفيديو.

  • id (رقم - مطلوب)  - معرف الفيديو، ويبدأ العدد من 0.

إيقاف تلقائيا 

وقفة ():void

إيقاف التشغيل مؤقتًا.

إيقاف فوري

توقف ():باطل

يتم إيقاف عملية التشغيل والتحميل إذا بدأت عملية التحميل.

تعيين مصدر الفيديو

setVideoSource(المصدر:سلسلة):void

ضبط مصدر الفيديو.

  • المصدر (سلسلة - مطلوبة)  - مصدر الفيديو، مصدر الفيديو المطلق أو النسبي.

تعيين مصدر الملصق

setPosterSource(المصدر:سلسلة):void

تعيين مصدر الملصق.

  • المصدر (سلسلة - مطلوبة)  - مصدر الملصق، مصدر الملصق للصورة المطلق أو النسبي (.jpg، .jpeg، .png).

تعيين الحجم

setVolume(قيمة:رقم):void

ضبط مستوى صوت الفيديو.

  • val (رقم - مطلوب)  - رقم بين 0 (حالة كتم الفيديو) و1 (الحد الأقصى لمستوى صوت الفيديو).

فرك

فرك(قيمة:رقم):فارغ

إعلام المثيل بالتنظيف (تعيين موضع الفيديو).

  • val (رقم - مطلوب)  - رقم بين 0 (موضع بداية الفيديو) و1 (موضع نهاية الفيديو).

فرك في الوقت المناسب

scrubbAtTime(val:String):void

إعلام المثيل بالتنظيف في وقت محدد.

  • val (String - مطلوب)  - يجب أن تكون وسيطة val بتنسيق ساعات:دقائق:ثواني، على سبيل المثال:00:01:20.

تحميل قائمة التشغيل

loadPlaylist(id:Number):void

يقوم بتحميل قائمة تشغيل بناءً على المعرف

  • id (رقم - مطلوب)  - معرف قائمة التشغيل، ويبدأ العدد من 0.

عرض الفئات

عرض الفئات ():void

إظهار نافذة قائمة التشغيل الرئيسية


الأحداث:

مستعد

برنامج FWDUVPlayer.جاهز

يتم الإرسال عندما تكون واجهة برمجة تطبيقات Ultimate Video Player متاحة بالفعل.

خطأ

خطأ FWDUVPlayer

يتم إرساله عندما لا يتمكن مثيل Ultimate Video Player من تحميل المصدر أو تشغيله.

  • الخطأ (سلسلة)  - رسالة الخطأ، على سبيل المثال:e.error.

انتقل إلى ملء الشاشة

FWDUVPlayer.GO_FULLSCREEN

يتم الإرسال عندما يتم ضبط مشغل الفيديو النهائي على وضع ملء الشاشة.

اذهب إلى الشاشة العادية

برنامج FWDUVPlayer.GO_NORMALSCREEN

يتم الإرسال عندما يتم ضبط مشغل الفيديو النهائي على الشاشة العادية.

آمن للتنظيف

FWDUVPlayer.SAFE_TO_SCRUB

يتم إرساله عندما يكون من الآمن تنظيف مثيل Ultimate Video Player.

قف

إيقاف FWDUVPlayer

يتم إرساله عند إيقاف تشغيل Ultimate Video Player.

يلعب

برنامج FWDUVPlayer.PLAY

يتم الإرسال عند بدء تشغيل مثيل Ultimate Video Player.

يوقف

إيقاف مؤقت لـ FWDUVPlayer

يتم إرساله عند إيقاف تشغيل مثيل Ultimate Video Player مؤقتًا.

تحديث

تحديث FWDUVPlayer

يتم إرساله عند تشغيل مثيل Ultimate Video Player وتغيير موضعه.

  • النسبة المئوية (رقم)  - نسبة التحديث، على سبيل المثال: النسبة المئوية، قيمة من 0 إلى 1.

وقت التحديث

تحديث FWDUVPlayer.وقت التحديث

يتم إرساله عند تغيير المدة الحالية لمثيل Ultimate Video Player. يحتوي هذا الحدث على خاصيتين من نوع السلسلة curTime وtotalTime.

  • curTime (سلسلة)  - الوقت الحالي، على سبيل المثال: e.curTime.
  • TotalTime (سلسلة)  - إجمالي الوقت، على سبيل المثال:e.totalTime.

لعب كامل

FWDUVPlayer.PLAY_COMPLETE

يتم الإرسال عندما يصل تشغيل Ultimate Video Player إلى نهاية ملف الفيديو.

تحديث مصدر الفيديو

برنامج FWDUVPlayer.تحديث مصدر الفيديو

يتم الإرسال عند تعديل مصدر الفيديو الحالي لمثيل Ultimate Video Player.

تحديث مصدر الملصق

تحديث مصدر المنشور

يتم الإرسال عند تعديل مصدر الملصق الحالي لنسخة Ultimate Video Player.

بدء تحميل قائمة التشغيل

FWDUVPlayer.START_TO_LOAD_PLAYLIST

يتم الإرسال عندما تبدأ قائمة تشغيل Ultimate Video Player في التحميل.

قائمة التشغيل تحميل كامل

تحميل قائمة التشغيل كاملة

يتم الإرسال عند تحميل قائمة تشغيل Ultimate Video Player.


تنزيل برنامج Ultimate Video Player Premium

أحدث أقدم

نموذج الاتصال