تشغيل الفيديو او الصوت للبلوجر مميز

مشاهدات الان

 البحث عن

</head>

تحته

<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.3/plyr.css" rel="stylesheet">

البحث عن

</body>

فوقه

<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.3/plyr.min.js"></script>

<script>

      document.addEventListener('DOMContentLoaded', () => {

          const player = Plyr.setup('.js-player');

      });

</script>

ضعها بالمكان المناسب

الاضافه لـ إعداد اللغة HTML/JavaScript

الفيديو

<video

class="js-player"

poster="Poster.jpg">

<source src="Video.mp4"

size="720"/>

</video>

وهذا

<div

class="js-player"

data-plyr-provider="vimeo"

data-plyr-embed-id="333197341">

</div>

يوتيوب

<div

class="js-player"

data-plyr-provider="youtube"

data-plyr-embed-id="5S2ZZr3KG6g">

</div>

الصوت

<audio

class="js-player">

<source src="Audio.mp3"/>

</audio>

الكود الشامل

<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.3/plyr.min.js"></script>

<script>

document.addEventListener('DOMContentLoaded', () => {

const controls = [

'play-large', // Large play button in the middle

'restart', // Restart playback

'rewind', // Flip search time (default 10 seconds)

'play', // Play / pause playback

'fast-forward', // Fast forward time (default 10 seconds)

'progress', // The progress bar and scrubber for playback and buffering

'current-time', // Current playback time

'duration', // Full term media

'mute', // Toggle silent

'volume', // Volume control

'captions', // Toggle captions

'settings', // Settings menu

'pip', // Picture in Picture

'airplay', // Airplay

'download', // Display a download button with a custom link to an existing resource or custom URL that you specify in your options

'fullscreen' // Toggle fullscreen

];

const player = Plyr.setup('.js-player', { controls });

});

</script>

يحتاج تعديل

وسلامتكم