فـي شـرح الـيـوم سـأقـدم لـكـم طـريـقـة لـتــضـمـيـن فــيـديـوهـات الــيـوتـيـوب والــفـيـمـو وصـيـغ اخـرا مـثـل MP3 والـ MP4 بــمـشـغـل احـتـرافـي جـدا يــمـكـنـك مــعـايـنـة الــمـشـغـلات مـن زر الـمــعـايـنـة الـتـالـي :
المعــاينة
ابحث على </head> او /head> وضع هذا الكود فوقه مباشرة
<link href='https://cdn.plyr.io/3.4.4/plyr.css' rel='stylesheet' />
الان ابحث على </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>
احفظ القالب
ولإضـافــة فــيـديــو أو شــيء آخــر ضــع الأكــواد الـتــالـيــة مــع الـتـغــيـيــر بـمــا يـنــاسـبــك.
<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>
إذا أعــجــبــتـك إضــافـة الــيـوم لا تــنــسـى الإشــتـراك فـي الــمــدونـة لــكـي تــتــوصـل بــكـل مــاهـوا جــديـد.