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

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

استخدم Plyr.js لعرض مقاطع الفيديو على المدونة عادةً عندما يريد مالك مدونة / موقع ويب عرض مقطع فيديو في مقالتهم ، فسيستخدمون إطار iFrame عاديًا ذي تصميم سيء ولا يستجيب على الشاشة.
اليكم المشغل الذي يحلم به اي مدون لعرض الفيديوهات او البث المباشر مع العديد من الخطائص مثل الترجمة و تعدد الجودات
لاتكن مثلهم ، استخدم Plyr.js. مشغل Plyr.js هو مشغل وسائط بسيط وخفيف الوزن وسهل / التحرير ويدعم متصفحًا حديثًا. يمكن استخدام Plyr.js لعرض HTML5 Audio و HTML5 Video و iFrame (Responsive) و Youtube Video و Vimeo و فيسبوك. بعض من ميزاته المتفوقة:


سهل التعديل
متجاوب صورة في الصورة أنيق بلغة HTML دعم العديد من ترجمات / تعليق يمكن أن تعمل مع Bootstrap الفيديو المدمج الخ ...

دليل تثببث مشغل Plyr.js
في الواقع ، يمكن تثبيت Plyr.js على العديد من المنصات ، لكن هذه المرة سوف اشرح تثبيته على بلوجر. فهو مختلف بعض الشيء عن كيفية تثبيته مع منصات أخرى.
أولاً. قم بتثبيت هذا السكربت أعلى وسم </ head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.plyr.io/3.4.7/plyr.css");
//]]>
</script>
ثانياً ، قم بتثبيت كود Javascript الخارجي ، وقم بتثبيت هذا السكررت أعلى الرمز
<script type='text/javascript' src='https://cdn.plyr.io/3.4.7/plyr.js'></script>
<script type="text/javascript">
/*<![CDATA[*/
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('.js-plyr')).map(plyrs => new Plyr(plyrs));
/*]]>*/
</script>
لا تضع علامة Async على السكربت النصي الخارجي Plyr.js إذا كنت تريد أن يستمر في العمل. تم الآن ، فقط حرر كود html بـ Plyr.js إذا كنت تريد عرض الفيديو / الصوت على مدونتك / موقعك. كيف ذلك
1. استدعاء الصوت
<audio class='js-player' controls>
  <source src="#" type="audio/mp3">
  <source src="#" type="audio/m4a"><!-- src diganti dengan link audio, type diganti dengan ekstensi filenya (mp3, m4a, flac, dsb). -->
</audio>
2. استدعاء الفيديو من يوتيوب
<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="88Nrdqw5Hx8"></div>
انتبه ، استبدل معرف الفيديو RD9JB80AO-GCU بمعرف فيديو Youtube الخاص بك. الكود بعد الكتابة؟ على سبيل المثال:
https://www.youtube.com/watch?v=dlFA0Zq1k2A&list=RD9JB80AO-GCU

 RD9JB80AO-GCU هو المعرف الذي تحتاج الى استبداله.
3. دعوة الفيديو مع وصلة مباشرة إذا كنت ترغب في عرض مقاطع الفيديو ، ولكن تتوفر على Google Drive أو Dropbox أو مواقع تحميل أخرى ، استخدم رمز المتصل هذا:( في بعض الاحيان لايقبل روابط جوجل درايف او دروبوكس)
<video class="js-plyr" controls playsinline poster="#" src="#">
  <source src="#" type="video/mp4" size="480">
  <source src="#?720" type="video/mp4" size="720">
  <source src="#?1080" type="video/mp4" size="1080">

<!-- Captions are optional -->
  <track kind="captions" label="Français" srclang="fr" src="#">
  <track kind="captions" label="English" srclang="en" src="#" default>
  <track kind="captions" label="Español" srclang="es" src="#">
</video>
هنا ضع رابط الصورة المصغرة:
1. ["..."=poster]استبدل... برابط الصورة المصغرة الذي تريد استخدامها. على سبيل المثال:
poster="https://3.bp.blogspot.com/-7sso1N47ToY/XC3jnnNM1aI/AAAAAAAAAOw/rZ9PoDjpOx8UB-k4g73JJYKSiz5vuIcqwCLcBGAs/s1600/spiderman-into-the-spider-verse-4k-2018-9o.jpg"
2. ["..."=src] استبدل... برابط الفيديو الخاص بك. على سبيل المثال:
src="https://cdn.plyr.io/static/blank.mp4"
3. [type = "video / mp4"] = استبدل mp4 بامتداد الفيديو الخاص بك. على سبيل المثال:
type="video/mp4"
type="video/mkv"
type="video/webm"
4. ["..."=size]استبدل... التغيير إلى أبعاد الفيديو الخاص بك. على سبيل المثال:
size="480"
size="720"
size="1080"
5. ["..."=label] استبدل... اسم لغة الترجمة / التسمية التوضيحية.
على سبيل المثال:
label="Français"
label="English"
label="Indonesia"
6. [ "..."=srclang] استبدل... باختصار البلد الذي أنشأته بلغة الترجمة / لغة التسمية التوضيحية. على سبيل المثال:
srclang="fr"
srclang="en"
srclang="id"
4. استدعاء الفيديو بواسطة iFrame يوتيوب أولاً ، ابحث عن الفيديو المراد استخدامه على Youtube ، ثم اضغط على الزر "مشاركة". اضغط على زر التضمين ، ثم انسخ كود الشفرة.
على سبيل المثال:
<div class="plyr__video-embed" id="player">
    <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
  </div>

5. JSON الإعدادات خاصة بالنسبة لأولئك الذين يفهمون إعدادات JSON ، هذه القائمة مباشرة من المصدر.
6. تنسيق مع CSS
.js-plyr,.post,.post-content{max-width:100%}
.js-plyr,.plyr__control--overlaid svg,article pre{display:block}
.plyr__control--overlaid{padding:1.5rem;background-color:rgba(156,136,255,.75)}
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {background-color: rgba(156,136,255,.9);}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {background: #aab74d;}
.plyr--video .plyr__control.plyr__tab-focus {box-shadow: 0 0 0 2px rgba(156,136,255,.5);outline: 0;}
.plyr__control.plyr__tab-focus {box-shadow: 0 0 0 2px rgba(156,136,255,.5);outline: 0;}
.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.5))}
.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true],.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true],.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background-color:rgba(156,136,255,.75)}
.plyr--full-ui input[type=range]{color:#9c88ff}
.plyr__poster{background-size:cover}
.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {background: #9c88ff;}
.plyr-ratio .plyr__video-wrapper{padding-bottom:56.25%;height:0}
.plyr-ratio .plyr__video-wrapper video{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;margin:auto}
.plyr__menu__container .plyr__control{font-size:14px;font-family:Google Sans,sans-serif;font-weight:500;line-height:1.5}
.plyr__menu__container ul,.plyr__menu__container ul li{margin:0;list-style:none}
.plyr--audio .plyr__controls{border:1px solid #dbe3e8}
هذا نموذج لأسلوب CSS الذي قمت بإنشائه ، ويمكنك استخدامه مباشرة أو إعادة تحريره ليناسب موقع الويب الخاص بك.

كما رأيتم الشرح سهل و الأمثلة واضحة الآن حاون وقت تحميل الملف به الشرح الكامل مع جميع الاكواد بالترتيب مع اماكن الروابط و كل شيء حمله الآن.


7 تعليقات "اليكم المشغل الذي يحلم به اي مدون لعرض الفيديوهات او البث المباشر مع العديد من الخطائص مثل الترجمة و تعدد الجودات"

  1. اخي رابط المعاينة معطل

    ردحذف
    الردود
    1. لا اخي الكريم فهو شغال قمت بفحصه و يعمل بشكل عادي

      حذف
  2. اخي الحبيب ، رمضان كريم ، وبارك الله بيك على مجهودك ، بس حاب اسألك
    شلون مواقع الانمي او الافلام او المسلسلات
    يشغلون ما ذكرت اعلاه بالسيرفرات مع ان روابطهم ما تنتهي mp4 عل اغلب تنتهي بـhtml او ارقام مثل موقع OK , واخيرا انا عندي مدونة انمي لكنها بدائية جدا ، هل تنصحني ابقى على بلوجر لو امسحها وافتح الووردبريس ؟ وشكرا لك من القلب ❤

    ردحذف
    الردود
    1. ربنا يكرمك اخي الكريم رمضان مبارك علينا وعليكم بالنسبة للروابط ليس من الضروري ان تنتهي بصيغة mp4 فهي موجودة على الاكواد يجب تغيي mp4 بصيغة الفيديو سوف اطرح موضوع حول رفع فيديوهات mp4. اما البث المباشر اذا كان يوتيوب ضع معرف في الكود المخصص لليوتيوب او .اقرأ هذا الموضوع به مشغل للبث المباشر
      https://www.ti9niway.com/2020/01/table-match-blogger.html
      بلوجر افضل اذا كانت الاستضافة التي سوف ترفع عليها حلقات الانمي قوية .

      حذف
  3. هل ينفع هذا المشغل للبث المباشر لملفات IPTV

    ردحذف
    الردود
    1. لم اجربه للبت المباشر لكن يمكنك تتبيث هذا المشغل خاص بروابط المباشرة للمباريات فهو من هنا
      https://www.ti9niway.com/2020/01/table-match-blogger.html

      حذف
  4. يرجى شرح طريقة اضافة ترجمة مخزنة على vps أو على حاسوب المنزل

    ردحذف
ملاحظة للجميع
  • يمكنك وضع تعليق بصورة أو فيديو YouTube أو Vimeo.
  • المرجو ترك تعليق يتعلق بنفس هذا الموضوع.
  • لا يجوز الترويج للسلع أو البيع.
  • لا تقم بتضمين روابط مشبوهة في التعليقات.
  • يمكنك التعليق بواسطة صورة او فيديو.
  • سيتم حذف التعليقات ذات الروابط السبام تلقائيًا
  • *علق بشكل جيد ، شخصيتك تنعكس عند التعليق.