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

استخدم 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_sRvSFWCS0vl6Jy2UzjNn-X1YYvRE7Kn2ha78zP6D_1_Vs-UpweePUNVN3v5N5uOveyULUgelvK1tzxhpFy1gPjes6RJxu9JwCAex7yis9qivFoVmw-M_5m33U91GHW0vtQMCumbQUc/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 الذي قمت بإنشائه ، ويمكنك استخدامه مباشرة أو إعادة تحريره ليناسب موقع الويب الخاص بك.

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

تحميل المشغل