How can i play .mov,.mkv,.wmv, .mp4 all files with plyr.js
because i like the look of plyr
i don't want to change plyr
by videojs
.
If any external plugin is there to help to play above files i'm glad to use them.
Note: i have used plyr.polyfilled.js even though it will not play. i don't have any .mov,.mkv,.wmv files to show
Question: is there any possiblity to play above said files with plyr.
Below demo:
'use strict';
document.addEventListener('DOMContentLoaded', function () {
// This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
var player = new Plyr('#player');
// Expose
window.player = player;
// Bind event listener
function on(selector, type, callback) {
document.querySelector(selector).addEventListener(type, callback, false);
}
// Play
on('.js-play', 'click', function () {
player.play();
});
// Pause
on('.js-pause', 'click', function () {
player.pause();
});
// Stop
on('.js-stop', 'click', function () {
player.stop();
});
// Rewind
on('.js-rewind', 'click', function () {
player.rewind();
});
// Forward
on('.js-forward', 'click', function () {
player.forward();
});
});
/* This is purely for the demo */
.container {
max-width: 800px;
margin: 0 auto;
}
.plyr {
border-radius: 4px;
margin-bottom: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
<link href="https://cdn.plyr.io/3.4.6/plyr.css" rel="stylesheet"/>
<div class="container">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<!-- Video files -->
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440">
<!-- Caption files -->
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
default>
<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
</video>
<div class="actions">
<button type="button" class="btn js-play">Play</button>
<button type="button" class="btn js-pause">Pause</button>
<button type="button" class="btn js-stop">Stop</button>
<button type="button" class="btn js-rewind">Rewind</button>
<button type="button" class="btn js-forward">Forward</button>
</div>
</div>
Please help me thanks in advance!!!
This library doesn't include a demuxer nor any media decoder* ;-)
All they do is to wrap DOM elements and add a nice js API to control it, but under the hood, it is still only the browser's media player that do play the medias.
So if your browser doesn't support these media files, this library won't be able to play it either.
No workaround.
*Even though it might be possible to make one, it is so much resource intensive that I don't think we'll see any js library doing it in real-time anytime soon.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With