javascript - 为什么 .mov、.mkv 和一些 .mp4 不能在 plyr.js 中播放

Question

我如何使用 plyr.js 播放 .mov,.mkv,.wmv, .mp4 所有文件 因为我喜欢 plyr 的外观code> 我不想通过 videojs 更改 plyr。

如果有任何外部插件可以帮助播放上述文件，我很乐意使用它们。

注意:我使用了 plyr.polyfilled.js，尽管它不会播放。我没有任何要显示的 .mov、.mkv、.wmv 文件

问题:是否可以使用 plyr 播放上述文件。

下面的演示:

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

请帮助我提前谢谢!!!

Answer 1

此库不包含 demuxer也没有任何媒体解码器* ;-)

他们所做的只是包装 DOM 元素并添加一个漂亮的 js API 来控制它，但在幕后，播放媒体的仍然只是浏览器的媒体播放器。

所以如果你的浏览器不支持这些媒体文件，这个库也将无法播放。
没有解决方法。

^{*尽管有可能制作一个，但它会占用大量资源，我认为我们不会很快看到任何 js 库实时执行此操作。}