What is Plyr.io?
Plyr.io is a responsive video player, and the interface and integration of this video player is very simple, easy to customize, it's very lightweight, and free for all users. And it's compatible with all modern browsers.
Plyr.io supports all HTML5 video and audio, YouTube and Vimeo major video formats, custom video posters, VTT captions, screen readers, picture-in-picture mode and many more features.
Hindi
Codeviraj के ब्लॉग में आपका स्वागत है। इस ब्लॉग मैं आपके साथ चर्चा करूंगा कि कैसे आप अपने ब्लॉगर ब्लॉगस्पॉट ब्लॉग में एक साधारण HTML5 ऑडियो/वीडियो, YouTube और Vimeo plyr.io वीडियो प्लेयर जोड़ सकते हैं।
तरीका यह है कि हम CDN सर्वर का उपयोग करके अपने ब्लॉग थीम पर Plyr.io वीडियो प्लेयर स्थापित करेंगे, फिर हम ब्लॉग पोस्ट में वीडियो टैग का उपयोग करके YouTube, Vimeo और HTML5 वीडियो को जोड़ेंगे और अनुकूलित करेंगे।
इसलिए यदि आप जानना चाहते हैं कि Plyr.io प्लेयर क्या है, ब्लॉगर ब्लॉगस्पॉट में कैसे एकीकृत किया जाए, Plyr.io का उपयोग करके किसी पोस्ट में वीडियो और ऑडियो कैसे जोड़ा जाए, तो इन चरणों का पालन करें।
Plyr.io क्या है?
Plyr.io एक उत्तरदायी वीडियो प्लेयर है, और इस वीडियो प्लेयर का इंटरफ़ेस और एकीकरण बहुत ही सरल, अनुकूलित करने में आसान है, यह बहुत हल्का है, और सभी उपयोगकर्ताओं के लिए निःशुल्क है। और यह सभी आधुनिक ब्राउज़रों के साथ संगत है।
Plyr.io सभी HTML5 वीडियो और ऑडियो, YouTube और Vimeo प्रमुख वीडियो प्रारूपों, कस्टम वीडियो पोस्टर, VTT कैप्शन, स्क्रीन रीडर, पिक्चर-इन-पिक्चर मोड और कई अन्य सुविधाओं का समर्थन करता है।
How to Add and Customize Plyr.io Video Player in Blogger?
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.3/plyr.css" rel="stylesheet">
And then add the below code before the </body> and click the Save Theme button in the top left corner to save the changes.
<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>
After adding the above both codes into your blog theme, go back to the post where you want to add your video, and change the post page "Compose view" to "HTML View" and add the below code in it.
<video class="js-player" poster="Poster.jpg"> <source src="Video.mp4" size="720"/> </video>
After adding the above code to your post, replace the highlighter code "Poster.jpg" with your video thumbnail URL and replace "Video.mp4" with the video URL address. If the video resolution is 1080p, then change the size to 1080. If you want to add YouTube videos to your blog posts within Plyr.io Player, add the following code. And then replace the YouTube Video ID with the Highlight ID.
<div
class="js-player"
data-plyr-provider="youtube"
data-plyr-embed-id="5S2ZZr3KG6g">
</div>
If you want to add Vimeo videos to your blog posts inside Plyr.io Player, add the following code. And then change your Vimeo Video ID to Highlight ID.
<div
class="js-player"
data-plyr-provider="vimeo"
data-plyr-embed-id="333197341">
</div>
If you want to add audio MP3 media to the plyr.io, add the following code. And then replace the highlighted Audio.mp3 with your mp3 URL address.
<audio class="js-player"> <source src="Audio.mp3"/> </audio>
And if you want to customize the video player controls, you have to add the following code instead of the code that you add before the body. And then leave the player tags in this code to your liking and remove the rest and save the theme.
<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>