مشغل فيديوهات متعدد الإستخدامات لمدونات بلوجر

الـسـلام عــلـيـكـم ومـرحـبـا بـكـم فـي مـدونـة تـقـنـي ويـب، فـي شـرح الـيـوم سـأقـدم لـكـم طـريـقـة لـتــضـمـيـن فــيـديـوهـات الــيـوتـيـوب والــفـيـمـو وصـيـغ اخـرا مـثـل MP3 والـ MP4 بــمـشـغـل احـتـرافـي جـدا يــمـكـنـك مــعـايـنـة الــمـشـغـلات مـن زر الـمــعـايـنـة الـتـالـي :

المعــاينة

الآن نـشـرح طــريـقـة الــتــركـيـب الإضـافـة :

مراحل تركيب الإضافة

1. ابحث على </head> او /head> وضع هذا الكود فوقه مباشرة

<link href='https://cdn.plyr.io/3.4.4/plyr.css' rel='stylesheet' />

2. الان ابحث على </body> وضع الكود التالي فوقه مباشرة :

<script src='//cdn.plyr.io/3.4.4/plyr.js' />
<script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>

3. احفظ القالب

• ولإضـافــة فــيـديــو أو شــيء آخــر ضــع الأكــواد الـتــالـيــة مــع الـتـغــيـيــر بـمــا يـنــاسـبــك.

<audio class="js-player" controls="">

  <source src="رابط الام بي ثري" type="audio/mp3" />

</audio>

<video class="js-player" controls="" playsinline="" poster="الصورة المصغرة">

<source src="رابط الفيديو ام بي فور" type="video/mp4" />

</video>

<div class="js-player" data-plyr-embed-id="معرف الفيديو في اليوتيوب" data-plyr-provider="youtube">
</div>

<div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="معرف الفيديو في الفيمو">
</div>

إذا أعــجــبــتـك إضــافـة الــيـوم لا تــنــسـى الإشــتـراك فـي الــمــدونـة لــكـي تــتــوصـل بــكـل مــاهـوا جــديـد.

المصدر : http://www.teqniweb.com/