CODEWITHSUNDEEP
javascriptjquerynode.jsplyr.js
EaBengaluru
EaBengaluru

Reputation: 81

Why .mov,.mkv,and some .mp4 are not playing in plyr.js

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!!!

Upvotes: 5

Views: 3268

Answers (1)

Kaiido
Kaiido

Reputation: 137054

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.

Upvotes: 9

Related Questions