[英]How to integrate HLS.js and mp4's with Plyr
is it possible to not hardcode the source of an hls file inside javascript but instead put the source in a <source>
tag like regular mp4 files? 是否可能不将hls文件的源硬编码在javascript中,而是将源放置在像常规mp4文件一样的
<source>
标签中?
Use Case 用例
I am running a website with the html5 based Plyr . 我正在使用基于html5的Plyr运行网站。 So far, I have managed to get it running along with having the option of 4 resolutions to choose from, encoded with mp4 files.
到目前为止,我已经设法使其运行并具有mp4编码编码的4种分辨率供您选择。 The video tag looks like this:
视频标签如下所示:
<video id="video" controls poster="{URL}/poster.jpg playsinline>
<source src="{URL}/1080.mp4 type="video/mp4" size="1080">
<source src="{URL}/720.mp4" type="video/mp4" size="720">
and so on....
However the issue is if I put a source with an .m3u8
file extension, Firefox complains it cannot play it since it's unsupported. 但是问题是如果我放一个带有
.m3u8
文件扩展名的源,Firefox抱怨说,由于不受支持,它无法播放它。 Fair enough, except the hls demo on the github readme shows a codepen where the source is hardcoded in, like so: 公平地说,除了github自述文件中的hls演示显示了一个硬编码源的codepen,如下所示:
<video id="video" controls></video>
<script>
var source = 'https://<url-to-m3u8-here
...
This cannot work in my use-case since as you saw above, I need the multiple sources for resolution switching until Plyr can do this with the manifest natively. 在我的用例中,这是行不通的,因为如上所述,我需要多个源来进行分辨率切换,直到Plyr可以本地对清单执行此操作。
Is there any way to incorporate hls.js into Plyr so I can just specify a video tag like so? 有什么方法可以将hls.js合并到Plyr中,这样我就可以指定视频标签了吗?
<video id="video" controls poster="{URL}/poster.jpg playsinline>
<source src="{URL}/index.m3u8" type="application/x-mpegURL" size="Auto">
<source src="{URL}/1080.mp4 type="video/mp4" size="1080">
<source src="{URL}/720.mp4" type="video/mp4" size="720">
(I'm working to include the Auto tag) (我正在努力添加自动标签)
Hey i guess you need to do something like this: 嘿,我想您需要执行以下操作:
HTML 的HTML
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css">
<video id="player" controls preload="metadata">
<source src="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8" type="application/x-mpegURL">
<source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4">
</video>
<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
JS JS
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var player = new Plyr(document.getElementById('player'), {
//debug: true
});
player.on('ready', function(event){
var instance = event.detail.plyr;
var hslSource = null;
var sources = instance.media.querySelectorAll('source'), i;
for (i = 0; i < sources.length; ++i) {
if(sources[i].src.indexOf('.m3u8') > -1){
hslSource = sources[i].src;
}
}
if (hslSource !== null && Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(hslSource);
hls.attachMedia(instance.media);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
console.log('MANIFEST_PARSED');
});
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.