المشغل الذي يحلم به اي مدون لعرض الفيديوهات
استخدم 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'>
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">
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">
</audio>
2. استدعاء الفيديو من يوتيوب<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="88Nrdqw5Hx8"></div>
انتبه ، استبدل معرف الفيديو RD9JB80AO-GCU بمعرف فيديو Youtube الخاص بك. الكود بعد الكتابة؟ على سبيل المثال:https:
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">
<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/AVvXsEg0xF7VgFIoYetseSlgZW3c1OsR5b41a3GM3NG07wt01tOUyqnJrQc1T7Uj5CVi5IWoSB6e0x_vG0RFxIPDglYRD3VN_dBIPprjEL5IaJrXy3wTbmFMuzabn9a0tCWCs_FFE_hVpoS06K0/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 الذي قمت بإنشائه ، ويمكنك استخدامه مباشرة أو إعادة تحريره ليناسب موقع الويب الخاص بك.
كما رأيتم الشرح سهل و الأمثلة واضحة الآن حاون وقت تحميل الملف به الشرح الكامل مع جميع الاكواد بالترتيب مع اماكن الروابط و كل شيء حمله الآن.
لاتكن مثلهم ، استخدم Plyr.js. مشغل Plyr.js هو مشغل وسائط بسيط وخفيف الوزن وسهل / التحرير ويدعم متصفحًا حديثًا. يمكن استخدام Plyr.js لعرض HTML5 Audio و HTML5 Video و iFrame (Responsive) و Youtube Video و Vimeo و فيسبوك. بعض من ميزاته المتفوقة:
ليست هناك تعليقات:
إرسال تعليق