我如何使用 plyr.js
播放 .mov,.mkv,.wmv, .mp4 所有文件 因为我喜欢 plyr
的外观,我不想通过 plyr
更改 videojs
。
如果 任何外部 插件 可以帮助播放以上文件,我很高兴使用它们。
注意: 我已经使用了 plyr.polyfill.js 即使它不会播放。我没有任何 .mov,.mkv,.wmv files to show
问题: 是否可以使用 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>
请帮助我在此先感谢!!!
最佳答案
此库不包含 demuxer 或任何媒体解码器* ;-)
他们所做的只是包装 DOM 元素并添加一个不错的 js API 来控制它,但在幕后,它仍然只有浏览器的媒体播放器才能播放媒体。
因此,如果您的浏览器不支持这些媒体文件,该库也将无法播放。
没有解决方法。
*尽管有可能制作一个,但它占用大量资源,我认为我们不会在短期内看到任何 js 库实时执行此操作。
关于javascript - 为什么 .mov、.mkv 和一些 .mp4 无法在 plyr.js 中播放,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54048914/