javascript - Why .mov,.mkv,and some .mp4 are not playing in plyr.js - Stack Overflow

admin 管理员组

文章数量: 1086019

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=".3.1/jquery.min.js"></script>
<script src=".4.7/plyr.polyfilled.js"></script>
<link href=".4.6/plyr.css" rel="stylesheet"/>
<div class="container">
<video controls crossorigin playsinline poster=".jpg" id="player">
                <!-- Video files -->
                <source src=".mp4" type="video/mp4" size="576">
                <source src=".mp4" type="video/mp4" size="720">
                <source src=".mp4" type="video/mp4" size="1080">
                <source src=".mp4" type="video/mp4" size="1440">

                <!-- Caption files -->
                <track kind="captions" label="English" srclang="en" src=".en.vtt"
                    default>
                <track kind="captions" label="Français" srclang="fr" src=".fr.vtt">

                <!-- Fallback for browsers that don't support the <video> element -->
                <a href=".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>

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

• javascript
• jquery
• node.js
• plyr.js

Share Improve this question Follow edited Jan 16, 2019 at 23:35 user10864482 asked Jan 5, 2019 at 4:10 EaBengaluruEaBengaluru 8122 gold badges3030 silver badges7272 bronze badges 1

• Have a look at this – YetAnotherBot Commented Jan 5, 2019 at 6:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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.}

本文标签： javascriptWhy mov mkv and some mp4 are not playing in plyrjsStack Overflow