البحث عن
</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>
يحتاج تعديل
وسلامتكم
0 التعليقات :
إرسال تعليق